/** * La barra de navegación. * * Sale en todas las pantallas de la aplicación y es lo único que sale * en todas, así que tiene hoja propia: mientras vivía dentro de app.css * cualquier retoque de la barra obligaba a abrir el archivo que tocan * todos, y eso es justo lo que hay que evitar cuando se trabaja a la * vez en varias pantallas. * * Lo que hay aquí es lo que la barra necesita y app.css no tiene: el * apaño de los ordenadores estrechos y la palabra «Perfil». Lo demás * sigue donde estaba, que funciona y no había motivo para moverlo. * * SE CARGA DESPUÉS DE app.css, y no da igual: varias de estas reglas * afinan medidas que allí ya están escritas y pesan lo mismo. Entre dos * reglas del mismo peso gana la última que se carga, así que si esta * hoja se colara antes, la mitad no haría nada. En functions.php va con * «reddie-app» como dependencia. * * Las medidas de móvil de tamaño puro —la moneda encogida— siguen en * movil.css, que se carga el último a propósito. Aquí no se repiten. */ /* --- La píldora de la izquierda --- Aquí vivían cinco reglas para vestir el botón de la tienda: el hueco del icono de la bolsa, su tamaño en ordenador y en móvil, el peso de la palabra «Tienda» y el ancho en que esa palabra se escondía. Las cinco se han ido con el icono y la palabra, que Alba ha quitado de la cabecera: dentro de la píldora quedan la moneda y la cifra, que es lo que había antes de todo aquello. Y para eso app.css ya tiene escrito el relleno, el hueco, el fondo y la forma, así que repetirlo aquí sería mantener dos veces la misma medida. La clase «rd-nav__tienda» sigue en el HTML y no está de adorno: es de la que cuelga el encogido de la moneda en los ordenadores estrechos, más abajo, y es la que dice que esta píldora concreta es la de la tienda. El enlace sigue llevando a la tienda. Que ya no lo diga con palabras es cosa de lo que se ve, no de a dónde va: quien use lector de pantalla lo oye igual, porque la etiqueta del enlace lo dice entero y esa no depende del ancho. */ /* ========================================================== Ordenador ========================================================== La fila, de izquierda a derecha: el monedero —que es la puerta de la tienda—, Emociones, Hábitos, Casa, Progreso, Comunidad, Notificaciones, Perfil y Ajustes. El orden lo pone el HTML; aquí solo se evita que se rompa. ========================================================== */ @media (min-width: 900px) { /* Ningún nombre se parte en dos líneas. Sin esto, al estrechar la ventana el primero que no cabe se abre en dos renglones, crece de alto y estira la barra entera: un apartado con el nombre partido descuadra los nueve. Antes de que dé ese salto, que se aprieten. */ .rd-nav__item, .rd-nav__coins { white-space: nowrap; } } /* --- La palabra «Perfil», solo a partir de 1200 --- Es lo que dice app.css. Se repite aquí con un selector de dos clases en vez de una para que no dependa del orden de carga: profile.css llegó a tener un «.rd-nav__name { display: inline-flex }» sin condición de ancho que ganaba siempre y sacaba la palabra también en el móvil. Esa línea ya no está —hay una nota en su sitio explicando por qué no vuelve—, pero la barra no debería quedar a merced de que otra hoja se acuerde o no, así que este seguro se queda. Donde de verdad hace falta esconderla es en el móvil: ahí es lo que separa las dos esquinas de arriba en una pantalla de 320. En el ordenador ya no aprieta. Con la píldora de la tienda reducida a la moneda y el número, la fila entera mide 1045 píxeles con la palabra puesta y 1000 sin ella —medidos, no calculados—, así que a partir de 1200 sobra sitio de largo. El corte se queda en 1200 porque es lo que dice app.css y porque nadie ha pedido cambiarlo; lo que ha dejado de ser cierto es que de esa palabra dependa que los ajustes se queden dentro de la pantalla. */ .rd-nav__user .rd-nav__name { display: none; } @media (min-width: 1200px) { .rd-nav__user .rd-nav__name { display: inline-flex; align-items: center; } } /* --- Ordenadores estrechos, de 900 a 1050 --- Sin la palabra «Perfil» —que se va por debajo de 1200— la fila pide 1000 píxeles, y 1026 si el saldo llega a cuatro cifras. Los dos números están medidos en la pantalla, no calculados a ojo. Por debajo de eso se desborda por la derecha y los ajustes se quedan fuera. Así que hasta 1050 todo encoge un punto: menos relleno a los lados, letra pequeña e iconos de 22. Es la misma barra, un poco más apretada, y en cuanto hay sitio vuelve a su tamaño. El corte está en 1050 y no en 1026 justo para dejar un margen, porque los nombres cambian de ancho si algún día se traducen. Encoger es feo; dejar un botón fuera de la pantalla, peor. Este corte estaba en 1150, cuando la píldora de la izquierda llevaba además la bolsa de la compra y la palabra «Tienda»: aquello eran cien píxeles más de fila y la barra empezaba a apretarse mucho antes. Quitados los dos, se apretaba durante 125 píxeles en los que ya sobraba sitio. */ @media (min-width: 900px) and (max-width: 1049px) { .rd-nav__item { /* AHORA SÍ SE TOCA EL RELLENO DE LOS LADOS, que antes se dejaba en paz aposta. Baja de 12 a 8, igualado al de arriba y abajo. Lo que ha cambiado es que los tres dibujos de Alba han crecido: se igualaban por la caja y ahora se igualan por lo que pintan, y para pesar lo mismo que sus vecinos de trazo el cohete y las dos cabezas necesitan 9 píxeles más de ancho entre los dos. Medido a 900, que es donde peor se está, y con el saldo en cuatro cifras, que es lo que más estira la píldora de la izquierda: con el relleno de 12 la fila pedía 911 píxeles y solo hay 884, o sea 27 fuera de la pantalla. Con 8 pide 871 y sobran 29. Ese desbordamiento no lo estrena este cambio —con los iconos viejos y cuatro cifras la fila ya pedía 886 y se salía por 1,7—, pero sí lo empeoraba, y arreglarlo cuesta cuatro píxeles de relleno en el tramo más apretado de todos. El apartado activo sigue teniendo forma de pastilla; lo que pierde es aire, que es justo lo que aquí no hay. El hueco entre el dibujo y el nombre se queda en 4. Eran 6 hasta que los iconos de Alba entraron en la barra. */ padding: var(--rd-space-2); gap: 4px; font-size: var(--rd-size-xs); } .rd-nav__item .rd-icon, .rd-nav__item svg { width: 22px; height: 22px; } .rd-nav__nivel { font-size: 26px; } /* La moneda es el elemento más ancho de la barra y el que menos información da por píxel ocupado: si algo tiene que encoger para que quepan los nombres, empieza ella. Se encoge con «scale» y no con el ancho porque está hecha de dos caras y un canto puestos en el espacio; cambiándole el ancho aparecen arcos sueltos. Es el mismo apaño que usa movil.css, con otra medida. */ .rd-nav__tienda .rd-nav__coin { transform: scale(0.8); transform-origin: left center; margin-right: -9px; } } /* --- Y dos píxeles menos de hueco a partir de 1050 --- Justo al pasar de 1050 la barra deja de estar apretada y todo vuelve a su tamaño: relleno, letra e iconos. Ese primer píxel es el peor de todo el tramo ancho, porque es donde menos sitio hay con las medidas grandes puestas. Medido a 1050 con el saldo en cuatro cifras: con el hueco de 8 que pone app.css entre el dibujo y el nombre, la fila pide 1046 de los 1050 que hay. Cabe, pero por cuatro píxeles, y basta con que una traducción alargue un nombre para que se salga. Con 6 pide 1036 y sobran 14, que es la holgura que tenía la barra antes de que los dibujos de Alba crecieran. Es el mismo apaño que el tramo apretado le hace al mismo hueco, con otra medida: dos píxeles entre un icono y su palabra no se notan, y un botón fuera de la pantalla sí. */ @media (min-width: 1050px) { .rd-nav__item { gap: 6px; } } /* ========================================================== Móvil ========================================================== Arriba, las dos esquinas: el monedero a la izquierda y la campana, el perfil y los ajustes a la derecha. Abajo, fija, la fila de cinco. El reparto ya lo hace app.css —la fila de secciones se va abajo del todo con «position: fixed» y la barra de arriba se queda con lo que no se fue—, así que aquí no hay que colocar nada. Y ya no hay que apretar la píldora tampoco. Aquí se le quitaba relleno y se le encogía el icono para que en una pantalla de 320 cupiera al lado de los otros tres botones. Sin icono ni palabra ocupa la mitad, así que sobra el sitio y las medidas de app.css valen tal cual. La moneda encogida sigue en movil.css, que es donde vive lo de su tamaño. ========================================================== */ /* --- La fila de abajo --- Cinco apartados: Emociones, Hábitos, Casa, Progreso y Comunidad. Eran seis y el sexto era el que hacía que «Comunidad» y «Evolución» se partieran por la mitad en un móvil estrecho. Con cinco caben, pero justo, así que se les dice dos cosas: que repartan el ancho a partes iguales y que el nombre no se parta nunca. Si a alguien no le cabe entero, prefiero que se recorte con puntos suspensivos —se sigue reconociendo— a que se rompa en dos líneas y suba la altura de la barra por encima de la pantalla. */ @media (max-width: 899px) { .rd-nav__sections .rd-nav__item { min-width: 0; flex: 1 1 0; } .rd-nav__sections .rd-nav__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ========================================================== Los tres dibujos de Alba ========================================================== Hábitos, Progreso y Comunidad no son dibujos hechos aquí: son los suyos. Antes eran una versión redibujada a mano que se les parecía, y parecerse no es lo mismo que ser. Y LOS TRES ENTRAN DE LA MISMA MANERA: SON MÁSCARAS. El archivo es una silueta y de él solo se lee dónde hay tinta; con esa silueta se recorta un rectángulo del color que toque. El dibujo es exactamente el de Alba y el color lo pone la barra, así que se ponen del color del rótulo que llevan al lado: claros sobre la pastilla de la sección en la que estás, apagados en el resto y del revés en Calma. Es el mismo apaño que usa app.css con el distintivo de nivel. HÁBITOS ERA LA EXCEPCIÓN Y HA DEJADO DE SERLO. Entraba como imagen en color —dos círculos coral con un visto blanco dentro y un tercero blanco con el borde marrón—, y un archivo con sus colores dentro no se entera de lo que tiene detrás: sobre la pastilla coral el coral desaparecía y sobre el azul de Calma se esfumaban el borde y las barritas. El apaño era pintarle debajo un trozo de papel crema, y ese papel es lo que Alba ha pedido quitar: «Ahora el icono está metido en un óvalo. Quítalo, no quiero que esté metido en ningún sitio, quiero solo el icono». Quitar el papel obligaba a rehacer el dibujo, porque lo que pedía Alba en la misma frase —«que las líneas sean claritas en fondos oscuros y oscuras en fondos claritos»— no lo puede hacer una imagen con el color dentro. Ahora los vistos son HUECOS recortados del círculo, así que por ellos se ve el fondo de verdad y el dibujo se adapta solo. El porqué entero está en el comentario del propio habitos.svg; aquí solo hace falta saber que ya es una máscara como sus dos hermanos. LO QUE SE GANA CON ESO, medido en la barra de arriba a 1440 con las transiciones paradas: la tinta del icono contra lo que se ve por el hueco del visto da 4,61:1 sobre la pastilla de Foco —el peor de los seis— y 5,29:1 en Calma, donde el icono se pinta MARRÓN sobre la pastilla naranja de la noche. Apagado sobre la barra da de 8,39:1 para arriba en los seis. Antes, con el papel puesto, ese visto era blanco fijo sobre el coral del dibujo: 3,71:1 y a callar, diera igual lo que hubiera detrás. Los doce casos —seis fondos por encendido y apagado— están escritos uno a uno en habitos.svg. VAN EN «span» Y NO EN «img» a propósito, los tres. Una imagen de verdad necesitaría un texto alternativo, y estos no dicen nada que no diga ya la palabra que llevan al lado: repetirlo hace que un lector de pantalla lea «Hábitos, Hábitos». Un «span» vacío no se lee, que es lo que queremos. ========================================================== */ .rd-nav__dibujo { display: inline-block; flex-shrink: 0; /* La altura es la MISMA para los tres, y es la misma que la de los iconos de trazo que tienen al lado. Es lo que importa de la caja: en móvil el dibujo va encima del nombre, y si cada uno midiera de alto lo suyo, los cinco nombres de abajo quedarían a cinco alturas distintas y la fila se vería descuadrada. El ancho, en cambio, lo pone cada dibujo (más abajo). Una caja ancha e igual para los tres dejaría al cohete —que es casi cuadrado— con ocho píxeles de aire a cada lado, y en ordenador el hueco hasta su nombre se vería el doble que el de Hábitos. AQUÍ ESTABA «--rd-dibujo-caja», que guardaba este mismo número para que el papel de Hábitos pudiera leerlo y calcular su borde. Sin papel no hay quien lo lea, así que la altura vuelve a estar escrita a pelo y los dos cortes de abajo la cambian directamente. Una variable que solo se usa donde se declara es una pieza de más que hay que ir a mirar para entender un número. */ height: 26px; /* --- Lo que hace falta para las tres máscaras --- El «span» no tiene nada dentro: lo que se ve es este rectángulo de color del tamaño de la caja, recortado por la silueta. Y el color es «currentColor», o sea el del rótulo que lleva al lado, que es lo que hace que el dibujo se aclare y se oscurezca solo según dónde esté. */ background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; /* «contain» y no «100%», y aquí no es una precaución: es lo que sujeta al cohete. Su dibujo es casi cuadrado y no cabe a lo alto en una caja de 26, así que «contain» le manda encoger hasta que quepa y sale de 26 × 25,57 —la cuenta entera está en su regla—. Con «100%» se estiraría a la caja y saldría aplastado. Para los otros dos manda el ancho, y ahí «contain» solo hace de red por si algún día se toca la altura. */ -webkit-mask-size: contain; mask-size: contain; /* Aquí estaban «background-repeat», «background-position» y «background-size», que eran para el Hábitos de antes: el único que entraba como imagen de fondo en vez de como máscara. Ahora los tres son máscaras y ninguno pinta un fondo, así que las tres líneas no hacían nada. Se van, que una propiedad que no se usa es una pista falsa para el siguiente que lea esto. */ } /* Si el navegador no sabe recortar con una máscara, el rectángulo de color se quedaría ahí de adorno: un ladrillo coral en mitad de la barra. Mejor que no se pinte nada y quede el nombre, que es lo que de verdad dice a dónde lleva cada botón. Ahora entran los tres, que es lo que ya hacía esta regla: se apaga la clase común. Antes el comentario avisaba de que Hábitos se salvaba por ser una imagen de fondo, y eso ha dejado de ser verdad. */ @supports not ((-webkit-mask-image: url('../img/iconos/progreso.png')) or (mask-image: url('../img/iconos/progreso.png'))) { .rd-nav__dibujo { background-color: transparent; } } /* --- Cuadrar los tres: se iguala LO PINTADO, no la caja --- Antes se igualaba el área de la CAJA: los tres ocupaban un hueco equivalente a 20 × 20 y dentro cada uno pintaba lo que le salía. Medido —cada icono rasterizado al tamaño real que tiene en pantalla y sumado el alfa, a 1440— aquello daba esto: Hábitos 200,0 px² Comunidad 127,8 px² Progreso 120,1 px² O sea que Hábitos pintaba 1,56 veces lo de Comunidad y 1,67 lo de Progreso. Y los otros dos se quedaban flojos al lado del calendario de Emociones, que es de trazo y pinta 186,3 px² en esa misma barra. Igualar la caja no iguala nada: dos siluetas del mismo tamaño de caja pesan lo que pesan según cuánto rellenen, y un cohete de trazo fino rellena la mitad que tres círculos macizos. Así que lo que se iguala es EL ALFA, y el número al que se iguala es el del calendario, para que la fila entera —los de trazo y los de Alba— se lea pareja. Ese calendario es el único de los cuatro que no se mueve nunca: es un trazo que el navegador dibuja en vivo, no una máscara, y mide 186,5 esté donde esté. CÓMO SE MIDE, que es lo que hay que repetir el día que Alba pase un dibujo nuevo. Se retrata el hueco de cada icono en la pantalla de verdad y se despeja el ALFA de cada pixel, canal a canal: pintado = fondo + alfa × (tinta − fondo) → alfa = (pintado − fondo) ÷ (tinta − fondo) Sumando esos alfas sale cuánto tapa el dibujo, en píxeles cuadrados. Se despeja del pixel y no del brillo a propósito: midiendo el brillo, el mismo dibujo daba un número de día y otro de noche, porque el brillo no crece igual hacia el blanco que hacia el negro. Y HAY QUE PARAR LAS TRANSICIONES ANTES DE RETRATAR. «.rd-nav__item» tiene «transition: color, background» (app.css), así que la pastilla del apartado activo tarda en llegar a su color. Retratando antes de tiempo sale a medio camino —un coral aguado— y todo lo que se mida ahí es mentira, y mentira optimista. Se le pone a la página un «transition: none» y se espera. CUIDADO, QUE ESTO NO SE AFINA POR DECIMALES. Chrome redondea el tamaño de una máscara a píxeles enteros: medido, una caja de 36 y una de 37,7 dan EL MISMO dibujo de 36 × 10, y a 38 salta a 39 × 11. O sea que entre 36 y 37,9 escribir un número u otro no cambia nada de nada, y de 37,9 a 38 cambia un 11 %. Escribir aquí tres decimales es fingir una puntería que el navegador no tiene. Y ADEMÁS SE MUEVE SEGÚN DÓNDE CAIGA. Como el tamaño se redondea, lo que pinta depende de en qué medio pixel empiece el hueco, y eso cambia con el ancho de la ventana. Medido en seis anchos seguidos —1440 a 1445, que corren la fila medio pixel cada vez— el cohete se mueve entre 170,2 y 186,9 sin tocar nada. Por eso los números de abajo son PROMEDIOS de esos seis, no una medida suelta: una sola vale poco. Emociones 186,5 Hábitos 191,0 Comunidad 188,3 Progreso 178,5 Siete por ciento entre el más y el menos, y los tres a menos de cinco del calendario. Eso es lo que quería decir Alba con «que se vean iguales», y es la medida que hay que repetir antes de dar por bueno un ancho nuevo. NO SE ESCRIBE UNA PROPORCIÓN Y UN LADO, SINO EL ANCHO DIRECTO. La versión anterior guardaba «√proporción» de cada dibujo y un lado común, y multiplicaba. Eran dos números por icono para decir uno solo, y el de la proporción había que rehacerlo a mano cada vez que se recortaba el archivo. El alto lo saca el navegador de la propia imagen con «contain», así que aquí basta el ancho. EL ALTO QUE SALE, que es lo que hay que vigilar al tocar esto: Hábitos 10,6 y Comunidad 16,4 dentro de una caja de 26. El cohete es caso aparte y tiene su propia nota abajo: no le manda el ancho, le manda el alto de la caja. */ .rd-nav__dibujo { /* El factor con el que encogen los tres a la vez en las barras pequeñas. Ver el último bloque de esta hoja. */ --rd-dibujo-peso: 1; width: calc(var(--rd-dibujo-ancho) * var(--rd-dibujo-peso)); } .rd-nav__dibujo--habitos { /* * EL MÁS ANCHO Y EL MÁS BAJO DE LOS TRES, y no es un descuido. * * Su dibujo es una tira: tres círculos en fila, 72 de largo por 20 * de alto. Igualando lo que pinta, a 38 de ancho el dibujo sale de * 10,6 de alto dentro de una caja de 26. Al lado del cohete, que * llena los 26, parece más pequeño; pero de tinta pesan lo mismo, * que es lo que se ve de lejos y lo que pidió Alba. * * Y ese alto NO SE PUEDE SUBIR sin cambiarle el dibujo. Con dos * círculos rellenos, lo que pinta depende solo del alto —el largo * de las barritas no entra en la cuenta—, así que subirlo es pintar * más y volver a ser el que grita. Para que cupiera más alto habría * que vaciar los dos círculos cumplidos y dejarlos en aro, y eso ya * es cambiar el dibujo de Alba. Queda dicho, no hecho. * * 38 y no 37,7: entre 36 y 37,9 el navegador pinta exactamente lo * mismo, y a 38 salta al escalón bueno. Ver la nota de arriba. */ --rd-dibujo-ancho: 38px; -webkit-mask-image: url('../img/iconos/habitos.svg'); mask-image: url('../img/iconos/habitos.svg'); } .rd-nav__dibujo--comunidad { /* Las dos cabezas son anchas y bajas —240 × 111—, así que a este sí le manda el ancho: 35,5 le dan 16,4 de alto, holgados dentro de la caja de 26. Es el que estaba mejor puesto de los tres y se queda casi donde estaba. */ --rd-dibujo-ancho: 35.5px; -webkit-mask-image: url('../img/iconos/comunidad.png'); mask-image: url('../img/iconos/comunidad.png'); } .rd-nav__dibujo--progreso { /* * A ESTE NO LE MANDA EL ANCHO, LE MANDA EL ALTO DE LA CAJA, y por eso * su número es distinto de los otros dos. * * El cohete es casi cuadrado: 236 × 240 puntos, o sea 1,017 de alto * por cada uno de ancho. Con «contain», en una caja de 26 de alto el * dibujo se planta en 26 × 25,57 y ahí se queda: por ancha que se * haga la caja, no crece más, porque el que se pasa es el alto. * * EL AJUSTE FINO DE AQUÍ HACE DAÑO, Y ESTÁ MEDIDO. * * Se puso 25,57 —el ancho «de verdad» del dibujo— pensando que los * 31,4 de antes solo dejaban hueco vacío a los lados. Lo que pasa es * lo contrario: «progreso.png» es MÁS ALTO QUE ANCHO (236×240), así * que en una caja de 25,56 por 26 el navegador compara 25,56÷236 con * 26÷240 y gana el ancho POR UNA MILÉSIMA. El dibujo se ajusta a * 25,56 y se redondea a 25 píxeles en vez de a 26. * * Medido rasterizando y sumando lo pintado: a 25,57 el cohete sale * de 25×25 y pinta 170; de 27 en adelante sale de 26×26 y pinta 184, * que es prácticamente lo que pinta el calendario de Emociones * (184,1). O sea que afinar el ancho le quitó un 7,5 % de dibujo y * lo alejó de la referencia que quería igualar. * * Por eso vuelve a 27: es el primer valor que rasteriza a 26×26. Los * 1,4 píxeles de hueco que sobran a cada lado no se ven; el cohete * encogido, sí. */ --rd-dibujo-ancho: 27px; -webkit-mask-image: url('../img/iconos/progreso.png'); mask-image: url('../img/iconos/progreso.png'); } /* --- Aquí vivía «El papel del dibujo de Hábitos» --- Era el óvalo: un rectángulo crema con esquinas de pastilla que se le pintaba detrás al icono en los dos sitios donde su dibujo en color se perdía —la pastilla del apartado activo y el fondo de noche de Calma—. Alba lo ha pedido fuera con todas las letras: «no quiero que esté metido en ningún sitio, quiero solo el icono». Se ha ido entero, y con él las tres cosas que lo sujetaban: la variable con el alto del dibujo, el borde transparente que lo separaba del canto de la caja y las dos reglas que lo encendían. No hacía falta cambiarlo por otra cosa porque el dibujo nuevo no lo necesita: sus vistos son huecos y su tinta es la del rótulo, así que se aclara y se oscurece solo. Los números están arriba. Queda escrito y no borrado porque este es el sitio donde alguien vendrá a buscarlo el día que se pregunte por qué el icono ya no lleva fondo. */ /* --- La pastilla también en el móvil --- En la barra de abajo, la sección activa solo se distinguía por el color del rótulo y del icono. Eso, medido, es no distinguirse: contra el color de inactivo da 1,39:1 en Descanso, 1,74:1 en Calma, 1,79:1 en Creatividad, 1,92:1 en Orden, 1,99:1 en Rumbo y 2,01:1 en Foco. Lo que de verdad cambia es el tono, no la claridad. (Estas cifras están medidas con la tinta apagada que hay hoy, #53443c. Con la de antes, #87766c, el peor de todos bajaba a 1,06:1; el arreglo de esa tinta ha subido el suelo, pero no cambia la conclusión.) No es un problema que traiga ningún icono: ya estaba, y en los cinco apartados. Aquí decía que en Hábitos era peor, porque su dibujo en color no podía teñirse y ni siquiera ponía esa diferencia de tono. Eso ya no es verdad —ahora es una máscara y se tiñe como los otros cuatro—, pero la pastilla se queda: dos a uno entre dos rótulos vecinos no lo ve quien no distinga esos tonos, ni quien mire el móvil al sol, y eso pasa en los cinco apartados, no solo en uno. Se arregla con lo que lleva funcionando en el ordenador desde el principio: la pastilla. La misma que se pinta a partir de 900, ahora también por debajo. Contra el fondo de la barra da 4,34:1 en Foco, 4,51:1 en Rumbo, 4,55:1 en Orden, 4,81:1 en Calma, 4,85:1 en Creatividad y 6,19:1 en Descanso: una diferencia de claro a oscuro que se ve pase lo que pase. Y el rótulo encima se lee en los seis, de 4,61:1 en Foco a 6,68:1 en Descanso. Es además la MISMA forma que arriba, así que no hay dos maneras distintas de decir dónde estás según el ancho de la pantalla. El redondeo no es de pastilla sino el mediano. Arriba el apartado es una tira ancha y baja y el redondo entero le sienta bien; abajo es casi un cuadrado, de unos 60 × 50, y un radio de pastilla lo convierte en un huevo. Se escribe con «.rd-nav__sections» delante para no tocar los botones de arriba: la campana, el perfil y los ajustes tienen su propio «is-active» en app.css y ahí no hay nada que arreglar. */ @media (max-width: 899px) { .rd-nav__sections .rd-nav__item.is-active { background: var(--rd-primary); color: #fff; border-radius: var(--rd-radius-md); } /* El distintivo de nivel de Casa se invierte, como en el ordenador. app.css lo dejaba en coral aquí abajo, y con razón: sin pastilla, el coral sobre el crema de la barra se lee bien. Ahora hay pastilla y también es coral, así que coral sobre coral no está; hace falta lo mismo que a partir de 900. */ .rd-nav__sections .rd-nav__item.is-active .rd-nivel { background-color: #FFF6EF; } .rd-nav__sections .rd-nav__item.is-active .rd-nivel__n { color: var(--rd-primary); } } /* --- El rótulo de la pastilla en Calma no se toca aquí --- La pastilla lleva el rótulo en blanco, y en los cinco fondos claros eso está bien: el peor es Foco con 4,61:1, por encima del 4,5 que pide un texto pequeño. En Calma el coral se aclara a naranja para que se vea sobre el azul de noche, y el blanco encima no llegaría. AQUÍ NO HAY NADA QUE ARREGLAR: ya lo arregla el plugin. En «class-reddie-backgrounds.php» hay una lista larga de cosas que de noche cambian el color de su texto, y «.rd-nav__item.is-active» está en ella. Medido con Calma puesto, el rótulo sale #4e3018 sobre #ff8e66 y da 5,29:1, en la barra de arriba y en la de abajo: pasa el 4,5 que pide un texto pequeño con holgura. (Aquí ponía #1c2a4d y 6,26:1, que es lo que salía cuando de noche ese rótulo se pintaba de azul marino. El plugin lo cambió a marrón y el número bajó, pero sigue pasando. Se apunta el cambio porque un número viejo escrito con seguridad es peor que no tener número: el siguiente que venga a medir creerá que ha roto algo.) Se deja escrito porque este bloque es justo donde alguien iría a buscarlo: una regla aquí que dijera lo mismo pesaría menos que la del plugin, no ganaría, y no haría nada. Y una regla que no hace nada es la avería más difícil de ver de todas. */ /* --- Los dos huecos más pequeños --- app.css encoge los iconos de la barra a 22 en los ordenadores estrechos y a 23 en el móvil. Estos van con ellos, o serían los únicos que no encogen. Se cambian las dos cosas juntas —el alto del hueco y el factor— porque son lo mismo visto de dos formas: si encoge el hueco y no el dibujo, el cohete deja de caber dentro. Y ahora los dos cortes NO comparten factor, que es lo que hacían antes. Con la caja igualada daba casi igual, porque de todas formas cada uno pintaba lo que le salía; igualando el alfa, el factor tiene que ser el mismo que el de los iconos de trazo de al lado o la fila vuelve a descuadrarse. Y esos miden 22 en un corte y 23 en el otro: 22 ÷ 26 = 0,846 → los tres pintan 133 px², el calendario 133 23 ÷ 26 = 0,885 → los tres pintan 146 px², el calendario 146 Con un solo factor de 0,846 para los dos, en el móvil los dibujos se quedarían un 9 % por debajo del calendario. No es un escándalo, pero es justo lo que este bloque entero intenta evitar, y son dos números escritos una vez. EL COHETE ENCAJA SOLO, y conviene saber por qué para no asustarse. Su dibujo llena el alto entero de la caja, así que aquí no hay décimas de sobra que contar: al bajar el hueco a 22 el cohete pasa a medir 22, y a 23 mide 23. Y el ancho le sigue el paso porque el factor es el mismo: 25,57 × 0,846 = 21,63, que es justo lo que pide un cohete de 22 de alto. Los dos números están atados; si algún día se cambia uno hay que rehacer el otro, y la cuenta está en la nota del propio cohete. */ @media (min-width: 900px) and (max-width: 1049px) { .rd-nav__dibujo { --rd-dibujo-peso: 0.846; height: 22px; } } @media (max-width: 767px) { .rd-nav__dibujo { --rd-dibujo-peso: 0.885; height: 23px; } }