Sergio
082246da84
El operador pasó un tablero de identidad: zorro en medallón con cenefa andina, disco teal, anillo noche. Se adapta la FORMA y el COLOR. Los eslóganes NO — los descartó explícitamente, y de todos modos `brand.ftl` no es sitio para copy: lleva el nombre y nada más. EL ICONO DEJA DE DIBUJARSE EN CÓDIGO. Hasta la v0.2 `rebrand.py` generaba una marca geométrica en Python puro, con el argumento de que un PNG en el árbol no se puede revisar en un diff. Ese argumento valía mientras el icono era un marcador de posición inventado por falta de arte. Ya hay arte, así que el criterio se invierte: un asset de diseño ES la fuente, no un derivado. Lo que se conserva es la disciplina — los seis tamaños salen del MISMO master (recorte del medallón con máscara circular y alfa, LANCZOS desde 1024 px), se generan una vez y se copian, así que dos builds ponen los mismos bytes. LA PALETA SE MIDIÓ, NO SE ESTIMÓ. Los cuatro tokens salen del color más frecuente de cada zona del medallón: #c15728 el zorro, #1b6470 el disco, #04161d el anillo, #f5ecde los reflejos. Escribirlos «parecidos» a ojo es cómo una identidad se desalinea de su propio logo en tres ediciones. Con eso el CSS suma `accent-color` —un solo cambio alcanza decenas de widgets nativos del chrome sin enumerar ninguno— y el fondo de la barra de pestañas verticales, para que marco e icono cuenten lo mismo. ⚠ Anotado y no escondido: a 16 px el medallón pierde el detalle y queda como una mancha cálida redonda. Es intrínseco a un logo con cenefa; la salida sería un dibujo simplificado para ese tamaño y lo decide quien dibujó el zorro, no este script. Construido y sellado EN LOCAL en 3 segundos (b3:97328d1c), hidratado y abierto: 8 procesos vivos, anunciándose como `(atuq:9581)`.
50 lines
2.3 KiB
CSS
50 lines
2.3 KiB
CSS
/* atuq.css — el aspecto de atuq. Se registra como USER_SHEET desde `atuq.cfg`.
|
|
*
|
|
* ── LA PALETA SALE DEL ARTE, MEDIDA, NO ESTIMADA A OJO ─────────────────────────────────────────
|
|
* Los cuatro tokens se muestrearon del propio medallón (`branding/icons/atuq256.png`) tomando el
|
|
* color más frecuente de cada zona: el cuerpo del zorro, el disco de fondo, el anillo exterior y
|
|
* los reflejos. Escribirlos «parecidos» a ojo es cómo una identidad se desalinea de su logo en tres
|
|
* ediciones.
|
|
*
|
|
* ⚠ Del tablero de marca se toman la FORMA y el COLOR. Los eslóganes NO: el usuario los descartó
|
|
* explícitamente, y esta hoja no es sitio para copy de todos modos.
|
|
*
|
|
* ⚠ TODO va acotado con @-moz-document a la ventana del navegador. Una hoja de nivel USER sin
|
|
* acotar alcanza CUALQUIER documento chrome —el visor de PDF, el inspector, los diálogos— y un
|
|
* selector genérico como `toolbar` termina pintando ventanas que nadie miró nunca.
|
|
*/
|
|
|
|
@-moz-document url("chrome://browser/content/browser.xhtml") {
|
|
:root {
|
|
--atuq-naranja: #c15728; /* el zorro */
|
|
--atuq-teal: #1b6470; /* el disco */
|
|
--atuq-noche: #04161d; /* el anillo */
|
|
--atuq-crema: #f5ecde; /* los reflejos */
|
|
--atuq-radio: 8px;
|
|
}
|
|
|
|
/* La pestaña activa: identidad visible sin reescribir la barra entera. */
|
|
#tabbrowser-tabs .tabbrowser-tab[selected] .tab-background {
|
|
border-radius: var(--atuq-radio);
|
|
box-shadow: inset 0 -2px 0 0 var(--atuq-naranja);
|
|
}
|
|
|
|
/* La barra de direcciones enfocada usa el naranja del zorro en vez del azul de Firefox. */
|
|
#urlbar[focused="true"] > #urlbar-background {
|
|
outline-color: var(--atuq-naranja);
|
|
}
|
|
|
|
/* El acento del sistema (botones activos, selección de menú, foco) pasa a ser el de la marca.
|
|
* `accent-color` es lo que Gecko usa para los widgets nativos del chrome: un solo cambio alcanza
|
|
* a decenas de controles sin enumerar ninguno. */
|
|
:root {
|
|
accent-color: var(--atuq-naranja);
|
|
}
|
|
|
|
/* La barra lateral de pestañas verticales —los «dientes» que prende `atuq.cfg`— con el fondo del
|
|
* medallón, para que el marco de la ventana y el icono cuenten lo mismo. */
|
|
#sidebar-main {
|
|
background-color: color-mix(in srgb, var(--atuq-noche) 92%, var(--atuq-teal));
|
|
}
|
|
}
|