/* * Piel de Domiva para Roundcube. * * Roundcube busca la hoja de una piel en styles/styles.css, pero la de elastic * viene compilada como styles.min.css. Lo primero es importarla entera y * despues repintar encima: asi una actualizacion de Roundcube no rompe la * marca, porque no se copia ni se modifica su hoja original. * * Elastic trae modo oscuro y lo activa con la clase .dark-mode en . Por * eso aqui todo color sale de una variable que se redefine para ese modo: una * regla con el color escrito a mano funciona en un tema y se vuelve ilegible en * el otro. */ @import "../../elastic/styles/styles.min.css"; :root { /* Marca: no cambian entre temas. */ --domiva-naranja: #ff6a00; --domiva-naranja-claro: #ff8a3d; --domiva-naranja-oscuro: #c25000; --domiva-azul: #0b3657; /* Dependen del tema. */ --dv-superficie: #ffffff; --dv-borde: #e8ecef; --dv-titulo: #0b3657; --dv-texto: #33475b; --dv-seleccion: rgba(255, 106, 0, 0.10); --dv-acento: var(--domiva-naranja); } /* * Modo oscuro: una sola familia de azules. * * Antes convivian tres tonos que no eran parientes: el gris verdoso propio de * Roundcube en el fondo (#21292c), el azul de marca en la barra lateral y un * tercer azul en las cabeceras. Se veian como tres programas pegados. Ahora * los tres salen del mismo azul, en tres profundidades. */ html.dark-mode { --dv-fondo: #071e2c; /* lo que se ve detras de todo */ --dv-superficie: #0c2a3e; /* paneles de carpetas, lista y mensaje */ --dv-chrome: #0b3657; /* barra lateral y cabeceras: el azul de marca */ --dv-borde: rgba(255, 255, 255, 0.09); --dv-titulo: #e3edf4; --dv-texto: #b3c6d5; --dv-seleccion: rgba(255, 138, 61, 0.18); --dv-acento: var(--domiva-naranja-claro); } body, .menu, #layout, input, button, select, textarea { font-family: Montserrat, "Segoe UI", system-ui, sans-serif; } /* ---------------- Barra de tareas (columna de iconos) ---------------- Va en el azul de marca en los dos temas, asi que todo lo que se pose encima tiene que ser claro, incluido el logo. */ #taskmenu { background: var(--domiva-azul); } #taskmenu a { color: rgba(255, 255, 255, 0.62); } #taskmenu a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } #taskmenu a.selected { color: #fff; background: var(--domiva-naranja); } #taskmenu a.selected:before { color: #fff; } /* ---------------- Cabeceras de cada panel ---------------- */ .header .header-title, #layout-list .header .header-title, #layout-content .header .header-title, #layout-sidebar .header .header-title { color: var(--dv-titulo); font-weight: 800; letter-spacing: -0.015em; } /* ---------------- Lista de mensajes ---------------- Lo no leido se marca con una franja naranja: un color se ve de reojo, la negrita sola hay que leerla. */ .messagelist li.unread, table.messagelist tr.unread > td:first-child, #messagelist tr.unread > td:first-child { box-shadow: inset 3px 0 0 0 var(--dv-acento); } .messagelist li.unread .subject, table.messagelist tr.unread td.subject, #messagelist tr.unread td.subject { font-weight: 700; color: var(--dv-titulo); } .messagelist li.selected, table.messagelist tr.selected > td, #messagelist tr.selected > td { background-color: var(--dv-seleccion); } /* ---------------- Carpetas ---------------- */ #mailboxlist li.selected > a { background-color: var(--dv-seleccion); color: var(--dv-titulo); font-weight: 600; } #mailboxlist li .unreadcount, .unreadcount { background: var(--dv-acento); color: #fff; } /* ---------------- Botones ---------------- Elastic los pinta con selectores muy especificos; aqui se fuerza solo el color, que es lo unico que cambia. */ #login-form button.btn-primary, button.btn.btn-primary, a.btn.btn-primary, input.button.mainaction, .btn-primary { background-color: var(--domiva-naranja) !important; border-color: var(--domiva-naranja) !important; color: #fff !important; font-weight: 600; } #login-form button.btn-primary:hover, button.btn.btn-primary:hover, a.btn.btn-primary:hover, input.button.mainaction:hover, .btn-primary:hover { background-color: var(--domiva-naranja-oscuro) !important; border-color: var(--domiva-naranja-oscuro) !important; } /* El boton de redactar es la accion principal de la pantalla. */ #taskmenu a.compose, a.button.compose { background: var(--domiva-naranja); color: #fff; } /* ---------------- Pantalla de entrada ---------------- */ #layout.layout-login, .task-login #layout { background: linear-gradient(160deg, #0b3657 0%, #072a45 100%); } .task-login #layout .box-inner, #login-form .box-inner { border-radius: 18px; box-shadow: 0 24px 60px -24px rgba(7, 42, 69, 0.75); } #login-form #logo, #logo { max-height: 68px; width: auto; } #login-form .footer a, .task-login #layout a { color: #ffb27a; } /* ---------------- Foco ---------------- El naranja se reserva para tres cosas: lo no leido, lo seleccionado y la accion principal. Pintar tambien los enlaces llenaba la barra de herramientas y los asuntos de naranja, y la pantalla perdia jerarquia: cuando todo resalta, nada resalta. */ input:focus, select:focus, textarea:focus, a:focus, button:focus { outline-color: var(--dv-acento); } .form-control:focus { border-color: var(--dv-acento); box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.16); } /* ---------------- Una sola superficie oscura ---------------- Elastic usa un gris azulado para sus cabeceras; junto al azul de marca de la barra lateral quedaban dos tonos oscuros distintos peleando. Se unifican. */ html.dark-mode #layout > div > .header, html.dark-mode .header, html.dark-mode #layout-content > .header, html.dark-mode #layout-list > .header, html.dark-mode #layout-sidebar > .header { background-color: #0e2c46; border-bottom-color: rgba(255, 255, 255, 0.07); } /* ------------------------------------------------------------------ * * Densidad y aire * * La queja era que se veia "apretado y cargado". Elastic dimensiona casi todo * en rem, asi que subir la raiz agranda texto y espaciados a la vez y de forma * proporcionada: mejor que ir parchando padding por padding, que descuadra las * alineaciones. * ------------------------------------------------------------------ */ html { font-size: 15px; } /* Filas de la lista de correos: mas altas y con la linea mas suave. */ #messagelist tr > td, table.messagelist tr > td, .messagelist li { padding-top: 0.7rem; padding-bottom: 0.7rem; line-height: 1.45; border-color: rgba(128, 150, 170, 0.18); } /* Carpetas: filas mas comodas y esquinas redondeadas al seleccionar. */ #mailboxlist li > a { padding-top: 0.62rem; padding-bottom: 0.62rem; border-radius: 8px; margin: 1px 6px; } #mailboxlist li.selected > a { border-radius: 8px; } /* Barras de herramientas con mas respiro, solo donde sobra espacio: en el telefono ese alto extra se come la pantalla util. */ @media (min-width: 768px) { .header, #layout > div > .header { min-height: 3.4rem; } .header a.button, .toolbar a.button { padding-left: 0.85rem; padding-right: 0.85rem; } } /* Bordes internos mas suaves: el gris fuerte de Roundcube es lo que mas envejece la pantalla. */ #layout > div, #layout-sidebar, #layout-list, #layout-content { border-color: rgba(128, 150, 170, 0.20); } /* El cuerpo del mensaje se lee mejor con linea alta y ancho contenido. */ #messagebody, .message-part div.pre { line-height: 1.65; } /* Campos de formulario con esquinas menos duras. */ .form-control, input.form-control, select.form-control, textarea.form-control { border-radius: 8px; } /* ------------------------------------------------------------------ * * Modo oscuro: aplicar la familia * * Elastic pinta el fondo y los paneles con su propio gris; estas reglas los * reemplazan por los tres azules de arriba. * ------------------------------------------------------------------ */ html.dark-mode body, html.dark-mode #layout { background-color: var(--dv-fondo); color: var(--dv-texto); } html.dark-mode #layout-sidebar, html.dark-mode #layout-list, html.dark-mode #layout-content { background-color: var(--dv-superficie); border-color: var(--dv-borde); } html.dark-mode .header, html.dark-mode #layout > div > .header, html.dark-mode #layout-list > .header, html.dark-mode #layout-content > .header, html.dark-mode #layout-sidebar > .header, html.dark-mode .footer, html.dark-mode #layout > div > .footer { background-color: var(--dv-chrome); border-color: var(--dv-borde); color: var(--dv-titulo); } html.dark-mode #messagelist tr > td, html.dark-mode table.messagelist tr > td { border-color: var(--dv-borde); } /* ------------------------------------------------------------------ * * Movimiento * * Discreto a proposito: transiciones cortas sobre lo que el usuario toca, y * una entrada suave del panel de lectura. Nada que rebote ni que haga esperar. * ------------------------------------------------------------------ */ #taskmenu a, #mailboxlist li > a, #messagelist tr, table.messagelist tr, .messagelist li, .btn, button.btn, a.btn { transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } /* El boton se hunde apenas al presionarlo: da sensacion de respuesta. */ .btn:active, button.btn:active, a.btn:active, #taskmenu a:active { transform: translateY(1px); } /* El mensaje aparece en vez de saltar. */ #messagecontframe, #messagepartcontainer, .message-part { animation: dv-aparecer 220ms cubic-bezier(0.22, 1, 0.36, 1); } @keyframes dv-aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Quien pidio menos movimiento en su sistema no recibe ninguno. */ @media (prefers-reduced-motion: reduce) { #taskmenu a, #mailboxlist li > a, #messagelist tr, table.messagelist tr, .messagelist li, .btn, button.btn, a.btn { transition: none; } #messagecontframe, #messagepartcontainer, .message-part { animation: none; } .btn:active, button.btn:active, a.btn:active, #taskmenu a:active { transform: none; } } /* En el telefono se vuelve a la escala original de Roundcube: los 15px dan aire en el escritorio, pero en una pantalla chica restan correos visibles. */ @media (max-width: 767px) { html { font-size: 14px; } #mailboxlist li > a { margin: 0; border-radius: 0; } } /* ------------------------------------------------------------------ * * El ultimo color suelto * * Roundcube pinta el boton de redactar en cian (#37beff). Sobre el azul de * marca daba 1.36:1 de contraste -- ilegible -- y era el unico color de la * pantalla que no pertenecia a la paleta. Se convierte en lo que en realidad * es: la accion principal, en naranja y con fondo, que ademas lo separa del * resto de iconos de navegacion. * ------------------------------------------------------------------ */ #taskmenu a.compose { /* El naranja #ff6a00 con el icono blanco daba 2.87:1, por debajo del minimo de 3:1 que piden los elementos de interfaz. El tono 600 de la misma rampa sube a 3.3:1 sin dejar de leerse como el naranja de la marca. */ background: #e85f00; border-radius: 10px; margin: 6px; } #taskmenu a.compose, #taskmenu a.compose:before, #taskmenu a.compose .inner { color: #ffffff !important; } #taskmenu a.compose:hover { background: var(--domiva-naranja-oscuro); } /* Los iconos de navegacion heredan el color del enlace, para que las reglas de arriba manden; Elastic los pinta aparte en el pseudo-elemento. */ #taskmenu a:before { color: inherit; } #taskmenu a { color: rgba(255, 255, 255, 0.74); } #taskmenu a.selected, #taskmenu a.selected:before { color: #ffffff; } /* Cerrar sesion se queda rojo porque significa algo, pero apagado: el rojo puro competia con el naranja de la accion principal. */ #taskmenu a.logout, #taskmenu a.logout:before { color: #e8736f; } #taskmenu a.logout:hover, #taskmenu a.logout:hover:before { color: #ff7b76; } /* En pantallas chicas la columna de iconos se esconde y redactar pasa a un boton flotante. Es otro elemento, con su propio azul: tambien va en naranja, porque sigue siendo la misma accion principal. */ .floating-action-buttons a.compose, .floating-action-buttons a.button { /* Roundcube lo pinta con un selector mas fuerte, de ahi el marcado. Mismo tono que el boton de la barra, por la misma razon de contraste. */ background-color: #e85f00 !important; box-shadow: 0 8px 20px -6px rgba(255, 106, 0, 0.6); transition: background-color 180ms ease, transform 140ms ease, box-shadow 180ms ease; } .floating-action-buttons a.compose:hover, .floating-action-buttons a.button:hover { background-color: var(--domiva-naranja-oscuro) !important; transform: translateY(-2px); box-shadow: 0 12px 26px -6px rgba(255, 106, 0, 0.7); } .floating-action-buttons a.compose:active { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .floating-action-buttons a.compose, .floating-action-buttons a.button { transition: none; } .floating-action-buttons a.compose:hover, .floating-action-buttons a.button:hover { transform: none; } }