Sección «Pedir evento» con gestor de reservas y calendario legible en móvil
- /pedir/: calendario de fechas pedidas (negro) y confirmadas (verde), findes tranqui y con ruido, solo findes por defecto con opción de ver la semana entera. Se pincha un día libre y, sin sesión, se pide entrar y se vuelve al formulario con la fecha puesta. - Gestor en Go (gestor/): cuentas por colectivo con argon2id, sesiones y CSRF, cupo y ventana de la asamblea, caducidades, registro append-only. - La cuenta de la asamblea confirma, rechaza, cambia turnos de finde y en «Todas las fechas» quita o modifica cualquier evento. - Orden «cuenta» y «clave» con -clave y -definitiva para fijar contraseñas desde el servidor; ninguna contraseña va en el repositorio. - Botón «Pedir evento» arriba de la barra lateral en todas las páginas. - Calendario semanal en móvil: lista de días con nombre y hora de cada cita. - Fuentes servidas desde fuentes/: fuera Google Fonts en todas las páginas.
This commit is contained in:
SITO
parent
c3b51be992
commit
ce3127baff
38 changed files with 4029 additions and 52 deletions
434
index.css
434
index.css
|
|
@ -97,6 +97,22 @@
|
|||
font-weight:normal; font-style:normal; font-display:swap;
|
||||
}
|
||||
|
||||
/* Anton y Rock Salt, servidas desde aquí. Antes las traía cada página con un
|
||||
<link> a fonts.googleapis.com: eso son dos conexiones más antes de pintar
|
||||
nada y, sobre todo, la IP de cada persona que entra en la web de un centro
|
||||
social okupado pasando por Google. Son los subconjuntos latinos, 77 KB entre
|
||||
las dos, los mismos ficheros que servía Google: se ve exactamente igual. */
|
||||
@font-face{
|
||||
font-family:'Anton';
|
||||
src:url('/fuentes/anton-latin.woff2') format('woff2');
|
||||
font-weight:400; font-style:normal; font-display:swap;
|
||||
}
|
||||
@font-face{
|
||||
font-family:'Rock Salt';
|
||||
src:url('/fuentes/rocksalt-latin.woff2') format('woff2');
|
||||
font-weight:400; font-style:normal; font-display:swap;
|
||||
}
|
||||
|
||||
/* ============================ 2. BASE ============================ */
|
||||
*,*::before,*::after{ box-sizing:border-box; }
|
||||
html,body{ margin:0; padding:0; overflow-x:hidden; }
|
||||
|
|
@ -1009,30 +1025,78 @@ gancio-calendar{
|
|||
#redes-toggle:checked ~ .brotes > li{ visibility:visible; }
|
||||
|
||||
/* En pantallas muy estrechas, siete columnas dan 55px cada una y ahí no cabe
|
||||
ningún texto útil: "Autodefensa 20:00" quedaba en "Autod...". Se cambia por
|
||||
una barra del color del colectivo, que la leyenda de debajo explica. Sigue
|
||||
siendo pulsable y el nombre completo queda en el title para lectores. */
|
||||
ningún texto útil: "Autodefensa 20:00" quedaba en "Autod...".
|
||||
|
||||
Durante un tiempo la salida fue quitarle el texto a la píldora
|
||||
—`font-size:0`— y dejar sólo una barra del color del colectivo, con la
|
||||
leyenda de debajo para descifrarla. La asamblea lo rechazó: en el móvil hay
|
||||
que leer la hora y el nombre, no interpretar colores.
|
||||
|
||||
Así que por debajo de 560px la rejilla deja de ser rejilla y se convierte en
|
||||
una LISTA DE DÍAS, uno debajo de otro y a todo el ancho. Ahí el texto entra
|
||||
entero. Se hace sólo con CSS: el guión del calendario sigue dibujando
|
||||
exactamente el mismo DOM y no se toca ni una línea de él.
|
||||
|
||||
En ordenador y en tableta no cambia nada. */
|
||||
@media (max-width:560px){
|
||||
/* La barra se VE de 10px pero el elemento MIDE 24: el relleno vertical
|
||||
agranda el área a la que llega el dedo y `background-clip:content-box`
|
||||
deja el color sólo en la franja del medio. Con 10px de verdad, tocarla en
|
||||
un móvil era imposible, y la página dice «pulsa cualquier etiqueta».
|
||||
24px es el mínimo de WCAG 2.5.8. */
|
||||
/* El marco de la rejilla sobra: ahora cada día es su propia tarjeta. */
|
||||
.cal{ border:none; background:transparent; overflow:visible; border-radius:0; }
|
||||
|
||||
/* Los rótulos L M X J V S D sólo tienen sentido en siete columnas. */
|
||||
.cal-row.cal-head{ display:none; }
|
||||
|
||||
/* `contents` disuelve la fila: las celdas pasan a ser hijas de .cal y caen
|
||||
una debajo de otra. La regla de más arriba que esconde la semana entera
|
||||
vacía tiene más especificidad, así que sigue mandando. */
|
||||
.cal-row{ display:contents; }
|
||||
|
||||
/* La celda deja de ser columna flexible y pasa a bloque, para que el día de
|
||||
la semana y el número salgan en la misma línea y las píldoras debajo. */
|
||||
.cal-cell{
|
||||
display:block; min-height:0;
|
||||
margin:0 0 8px; padding:10px 12px 12px;
|
||||
border:var(--pluma) solid var(--rosa-tenue); border-radius:var(--curva);
|
||||
background:var(--verde-humo);
|
||||
}
|
||||
|
||||
/* Los días sin nada no pintan nada en una lista, y un mes entero son treinta
|
||||
tarjetas. Se quedan los que tienen actividad y el de hoy, aunque esté
|
||||
vacío. Donde no haya :has() salen todos: se ve más largo, no roto. */
|
||||
.cal-cell:not(:has(.cal-pills)):not(:has(.cal-turno)):not(.cal-today){ display:none; }
|
||||
.cal-cell.cal-empty{ display:none; }
|
||||
|
||||
/* El nombre del día lo pone el CSS a partir de la posición dentro de la
|
||||
fila: la columna 1 es lunes. `display:contents` no toca el árbol, así que
|
||||
:nth-child sigue contando igual. */
|
||||
.cal-cell::before{
|
||||
font-family:var(--titular); font-size:.82rem; letter-spacing:.12em;
|
||||
text-transform:uppercase; color:var(--rosa-legible); margin-right:7px;
|
||||
}
|
||||
.cal-row > .cal-cell:nth-child(1)::before{ content:"Lunes"; }
|
||||
.cal-row > .cal-cell:nth-child(2)::before{ content:"Martes"; }
|
||||
.cal-row > .cal-cell:nth-child(3)::before{ content:"Miércoles"; }
|
||||
.cal-row > .cal-cell:nth-child(4)::before{ content:"Jueves"; }
|
||||
.cal-row > .cal-cell:nth-child(5)::before{ content:"Viernes"; }
|
||||
.cal-row > .cal-cell:nth-child(6)::before{ content:"Sábado"; }
|
||||
.cal-row > .cal-cell:nth-child(7)::before{ content:"Domingo"; }
|
||||
|
||||
.cal-daynum{ display:inline; font-size:1.05rem; color:var(--tinta); }
|
||||
|
||||
.cal-pills{ gap:5px; margin-top:8px; }
|
||||
|
||||
/* La píldora recupera su texto y ocupa el ancho de la tarjeta. Con 1.35 de
|
||||
interlínea y 8px arriba y abajo mide 35px de alto, por encima de los 24
|
||||
que pide WCAG 2.5.8 para tocarla con el dedo. */
|
||||
.cal-pill{
|
||||
font-size:0; line-height:0; color:transparent;
|
||||
/* content-box: con el border-box global el relleno se comía la altura y
|
||||
la barra desaparecía. Así los 10px son los del color y el relleno los
|
||||
suma por fuera hasta 24. */
|
||||
box-sizing:content-box;
|
||||
height:10px; padding:7px 0; border-radius:3px;
|
||||
background-clip:content-box; box-shadow:none;
|
||||
font-size:.92rem; line-height:1.35; color:var(--tinta);
|
||||
padding:8px 14px; border-radius:999px;
|
||||
white-space:normal; text-overflow:clip; overflow:visible;
|
||||
background-clip:border-box;
|
||||
}
|
||||
@supports (background: color-mix(in srgb, red 10%, transparent)){
|
||||
.cal-pill{ background:color-mix(in srgb, var(--bg) 60%, transparent);
|
||||
background-clip:content-box; box-shadow:none; }
|
||||
}
|
||||
.cal-cell{ gap:2px; }
|
||||
.cal-pills{ gap:2px; }
|
||||
/* En reposo la píldora no se mueve; el desplazamiento del :hover de
|
||||
escritorio se queda para el toque, que es donde se agradece. */
|
||||
.cal-pill:hover, .cal-pill:active{ transform:none; }
|
||||
|
||||
.cal-legend{ margin-top:18px; }
|
||||
.cal-legend-item{ font-size:.78rem; }
|
||||
}
|
||||
|
|
@ -1112,3 +1176,331 @@ gancio-calendar{
|
|||
.sidebar-nav li{ margin-bottom:2px; }
|
||||
.sidebar .sb-marca{ margin-bottom:22px; }
|
||||
}
|
||||
|
||||
/* ========================== 10. PEDIR EVENTO ==========================
|
||||
La sección /pedir/: el calendario de fechas pedidas y confirmadas, y los
|
||||
formularios con los que se piden y se confirman. Las sirve el gestor, no son
|
||||
ficheros de esta carpeta, pero comparten esta hoja y sus colores.
|
||||
|
||||
El sitio no tenía ni un estilo de formulario —sólo las dos flechas del
|
||||
calendario—, así que todo lo de aquí es nuevo. Los contrastes van medidos
|
||||
contra el mismo umbral que el resto: --rosa a secas NUNCA para texto (3.1:1),
|
||||
--rosa-legible sí, tanto de tinta como de fondo con texto claro encima. */
|
||||
|
||||
/* ---- El botón de la barra lateral ----
|
||||
Va encima del logo, que es lo primero que se ve al abrir el menú con el botón
|
||||
de arriba a la izquierda. */
|
||||
.sb-pedir{
|
||||
display:block; margin:0 0 18px; padding:13px 12px;
|
||||
background:var(--rosa-legible); color:var(--verde-humo);
|
||||
font-family:var(--titular); font-size:.95rem; letter-spacing:.14em;
|
||||
text-transform:uppercase; text-align:center; text-decoration:none;
|
||||
border:var(--pluma) solid var(--rosa); border-radius:var(--curva);
|
||||
transition:background .2s, color .2s;
|
||||
}
|
||||
.sb-pedir:hover, .sb-pedir:active{ background:var(--rosa); color:var(--negro); }
|
||||
|
||||
/* ---- El menú de la sección ---- */
|
||||
.pedir-menu{
|
||||
display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px;
|
||||
margin:0 clamp(16px,5vw,60px) 22px; padding:8px;
|
||||
border:var(--pluma) solid var(--verde-vivo); border-radius:var(--curva);
|
||||
background:var(--verde-humo);
|
||||
}
|
||||
.pedir-menu a, .pedir-salir button{
|
||||
display:flex; align-items:center; min-height:44px; padding:0 14px;
|
||||
font-family:var(--titular); font-size:.8rem; letter-spacing:.1em;
|
||||
text-transform:uppercase; text-decoration:none;
|
||||
color:var(--rosa-legible); background:transparent;
|
||||
border:none; border-radius:var(--curva); cursor:pointer;
|
||||
}
|
||||
.pedir-menu a:hover, .pedir-menu a:active,
|
||||
.pedir-salir button:hover, .pedir-salir button:active{
|
||||
background:var(--rosa-legible); color:var(--verde-humo);
|
||||
}
|
||||
.pedir-menu a[aria-current="page"]{
|
||||
color:var(--tinta); box-shadow:inset 0 -3px 0 var(--rosa);
|
||||
}
|
||||
.pedir-salir{ margin-left:auto; }
|
||||
.pedir-salir button{ color:var(--verde-hoja); }
|
||||
|
||||
/* ---- Avisos ---- */
|
||||
.pedir-aviso, .pedir-error{
|
||||
margin:0 clamp(16px,5vw,60px) 22px; padding:14px 18px;
|
||||
border-radius:var(--curva); font-family:var(--lectura); line-height:1.6;
|
||||
}
|
||||
.pedir-aviso{ border:var(--pluma) solid var(--verde-hoja); background:#e7f2e9; color:var(--tinta); }
|
||||
.pedir-error{ border:var(--pluma) solid var(--rosa); background:#fdeaf5; color:var(--rosa-legible); font-weight:700; }
|
||||
|
||||
/* ---- Textos de apoyo ---- */
|
||||
.pista{ display:block; margin-top:4px; font-size:.85rem; color:var(--tinta-suave); }
|
||||
.pedir-reglas{ margin:0 0 26px; padding-left:22px; line-height:1.7; max-width:70ch; }
|
||||
|
||||
/* ---- Formularios ---- */
|
||||
.pedir-form{ max-width:34rem; }
|
||||
.pedir-form p{ margin:0 0 18px; }
|
||||
.pedir-form label{
|
||||
display:block; margin-bottom:6px;
|
||||
font-family:var(--titular); font-size:.82rem; letter-spacing:.1em;
|
||||
text-transform:uppercase; color:var(--tinta);
|
||||
}
|
||||
.pedir-form input[type="text"], .pedir-form input[type="password"],
|
||||
.pedir-form input[type="date"], .pedir-form input[type="time"],
|
||||
.pedir-form select, .pedir-form textarea,
|
||||
.solicitud-resolver input[type="text"]{
|
||||
width:100%; box-sizing:border-box; min-height:46px; padding:10px 13px;
|
||||
font-family:var(--lectura); font-size:1rem;
|
||||
color:var(--tinta); background:var(--verde-humo);
|
||||
border:var(--pluma) solid var(--verde-hoja); border-radius:var(--curva);
|
||||
}
|
||||
.pedir-form textarea{ min-height:110px; line-height:1.6; resize:vertical; }
|
||||
.pedir-form input:focus-visible, .pedir-form select:focus-visible,
|
||||
.pedir-form textarea:focus-visible{ outline:3px solid var(--rosa); outline-offset:2px; }
|
||||
|
||||
/* ---- Botones ----
|
||||
El relleno deja los 44px de alto que pide el sitio para lo que se toca. */
|
||||
.pedir-boton, .pedir-boton-flojo, .pedir-form button{
|
||||
display:inline-flex; align-items:center; justify-content:center;
|
||||
min-height:44px; padding:0 22px;
|
||||
font-family:var(--titular); font-size:.9rem; letter-spacing:.12em;
|
||||
text-transform:uppercase; text-decoration:none; text-align:center;
|
||||
border-radius:var(--curva); cursor:pointer;
|
||||
transition:background .2s, color .2s;
|
||||
}
|
||||
.pedir-boton, .pedir-form button{
|
||||
color:var(--verde-humo); background:var(--rosa-legible);
|
||||
border:var(--pluma) solid var(--rosa-legible);
|
||||
}
|
||||
.pedir-boton:hover, .pedir-boton:active,
|
||||
.pedir-form button:hover, .pedir-form button:active{
|
||||
background:var(--rosa); color:var(--negro); border-color:var(--rosa);
|
||||
}
|
||||
.pedir-boton-flojo{
|
||||
min-height:44px; padding:0 15px; font-size:.78rem;
|
||||
color:var(--tinta); background:transparent;
|
||||
border:var(--pluma) solid var(--verde-hoja);
|
||||
}
|
||||
.pedir-boton-flojo:hover, .pedir-boton-flojo:active{
|
||||
background:var(--verde-hoja); color:var(--verde-humo);
|
||||
}
|
||||
.en-linea{ display:flex; flex-wrap:wrap; gap:6px; }
|
||||
|
||||
/* ---- Tablas ----
|
||||
El envoltorio deja deslizar la tabla a lo ancho en vez de desbordar la
|
||||
página, que es lo que mide el banco de pruebas. */
|
||||
.tabla-envoltorio{ overflow-x:auto; }
|
||||
.pedir-tabla{
|
||||
width:100%; border-collapse:collapse;
|
||||
font-family:var(--lectura); font-size:.95rem;
|
||||
}
|
||||
.pedir-tabla th[scope="col"]{
|
||||
font-family:var(--titular); font-size:.78rem; letter-spacing:.12em;
|
||||
text-transform:uppercase; text-align:left; padding:10px 12px;
|
||||
color:var(--rosa-legible);
|
||||
border-bottom:var(--pluma) solid var(--rosa-tenue);
|
||||
}
|
||||
.pedir-tabla td, .pedir-tabla th[scope="row"]{
|
||||
padding:12px; text-align:left; vertical-align:top;
|
||||
border-bottom:var(--pluma) solid var(--rosa-papel);
|
||||
}
|
||||
.pedir-tabla th[scope="row"]{ font-family:var(--titular); letter-spacing:.04em; font-weight:400; }
|
||||
|
||||
/* Modificar y Quitar, uno junto al otro en la última columna de la tabla. */
|
||||
.acciones{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
|
||||
.acciones form{ margin:0; }
|
||||
|
||||
/* ---- Estados ---- */
|
||||
.estado{
|
||||
display:inline-block; padding:4px 11px; border-radius:999px;
|
||||
font-family:var(--titular); font-size:.72rem; letter-spacing:.1em;
|
||||
text-transform:uppercase; white-space:nowrap; color:var(--tinta);
|
||||
}
|
||||
/* Solicitado en negro y confirmado en verde radiactivo: se distinguen de un
|
||||
vistazo entre sí y de los dos fondos de finde, que son verde apagado y rosa. */
|
||||
.estado-solicitado{ background:var(--negro); color:#fff; }
|
||||
.estado-confirmado{ background:#39ff14; color:#000; box-shadow:inset 0 0 0 1.4px #000; }
|
||||
.finde-tranqui{ background:#a3d1b0; box-shadow:inset 0 0 0 1.4px var(--verde-hoja); }
|
||||
.finde-ruido{ background:#fbdcef; box-shadow:inset 0 0 0 1.4px var(--rosa); }
|
||||
|
||||
/* ---- Solicitudes pendientes ---- */
|
||||
.solicitud{
|
||||
border:var(--pluma) solid var(--verde-vivo);
|
||||
border-left:7px solid var(--rosa);
|
||||
border-radius:var(--curva);
|
||||
padding:18px 20px; margin:0 0 20px; max-width:60rem;
|
||||
}
|
||||
.solicitud h3{
|
||||
font-family:var(--titular); font-size:1.15rem; letter-spacing:.04em;
|
||||
margin:0 0 12px; color:var(--tinta);
|
||||
}
|
||||
.solicitud-datos{ margin:0 0 16px; font-family:var(--lectura); }
|
||||
.solicitud-datos dt{
|
||||
font-family:var(--titular); font-size:.74rem; letter-spacing:.12em;
|
||||
text-transform:uppercase; color:var(--verde-hoja); margin-top:10px;
|
||||
}
|
||||
.solicitud-datos dd{ margin:2px 0 0; line-height:1.6; }
|
||||
.solicitud-resolver{
|
||||
display:flex; flex-wrap:wrap; align-items:center; gap:10px;
|
||||
padding-top:14px; border-top:var(--pluma) dashed var(--rosa-tenue);
|
||||
}
|
||||
.solicitud-resolver label{
|
||||
font-family:var(--titular); font-size:.74rem; letter-spacing:.12em;
|
||||
text-transform:uppercase; color:var(--tinta);
|
||||
}
|
||||
.solicitud-resolver input[type="text"]{ flex:1 1 15rem; min-height:44px; }
|
||||
|
||||
/* ---- La clave temporal, que sólo se enseña una vez ---- */
|
||||
.clave-nueva{
|
||||
font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size:1.5rem; letter-spacing:.12em; overflow-wrap:anywhere;
|
||||
padding:16px 18px; margin:0 0 14px; color:var(--tinta);
|
||||
background:var(--verde-hondo);
|
||||
border:var(--pluma) dashed var(--verde-hoja); border-radius:var(--curva);
|
||||
}
|
||||
|
||||
/* ---- Leyenda del calendario de fechas ---- */
|
||||
.leyenda-pedir{ display:flex; flex-wrap:wrap; gap:10px 16px; margin:0 0 26px; }
|
||||
/* Las muestras de estado miden lo mismo que las de finde, para que la
|
||||
leyenda sea una sola fila pareja. Va con .leyenda-pedir delante porque
|
||||
.cal-ev, más abajo, les pondría su propio relleno y su esquina. */
|
||||
.leyenda-pedir .leyenda-muestra{
|
||||
display:inline-flex; align-items:center; padding:6px 14px;
|
||||
border-radius:999px; font-size:.85rem;
|
||||
}
|
||||
.leyenda-finde{
|
||||
display:inline-flex; align-items:center; padding:6px 14px;
|
||||
border:var(--pluma) solid var(--verde-hoja); border-radius:999px;
|
||||
font-family:var(--lectura); font-size:.85rem; color:var(--tinta);
|
||||
}
|
||||
.leyenda-finde.cal-tranqui{ background:#a3d1b0; }
|
||||
.leyenda-finde.cal-ruido{ background:#fbdff0; border-color:var(--rosa); }
|
||||
|
||||
/* ---- El calendario de fechas ----
|
||||
Reaprovecha la rejilla del calendario semanal (.cal, .cal-row, .cal-cell), y
|
||||
con ella el paso a lista de días en el móvil. Lo que cambia es lo que va
|
||||
dentro de la celda: aquí un evento necesita tres líneas —hora y estado,
|
||||
nombre, y quién lo pide—, así que no puede ser una .cal-pill de una línea. */
|
||||
.cal-fechas .cal-cell:not(.cal-head-cell){ min-height:clamp(74px,10vw,132px); }
|
||||
.cal-mes{
|
||||
font-family:var(--titular); font-size:clamp(1rem,.85rem + .7vw,1.35rem);
|
||||
text-transform:uppercase; letter-spacing:.08em;
|
||||
color:var(--rosa-legible); margin:26px 0 10px;
|
||||
}
|
||||
.cal-fechas + .cal-mes, .cal + .cal-mes{ margin-top:34px; }
|
||||
|
||||
.cal-turno{
|
||||
display:inline-block; margin-top:2px; padding:1px 7px;
|
||||
font-family:var(--titular); font-size:.56rem; letter-spacing:.08em;
|
||||
text-transform:uppercase; white-space:nowrap;
|
||||
color:var(--tinta); background:var(--verde-humo);
|
||||
border:1px solid var(--verde-hoja); border-radius:999px;
|
||||
}
|
||||
|
||||
/* El fondo del finde. Va después de la regla del sábado y el domingo que pinta
|
||||
.cal-cell:nth-child(6) y (7), y con la misma especificidad, así que manda
|
||||
este por orden: en la sección de fechas el turno pesa más que «es finde». */
|
||||
.cal-row:not(.cal-head) > .cal-cell.cal-tranqui{ background:#a3d1b0; }
|
||||
.cal-row:not(.cal-head) > .cal-cell.cal-ruido{ background:#fbdff0; }
|
||||
|
||||
.cal-ev{
|
||||
display:block; padding:5px 9px; border-radius:var(--curva);
|
||||
font-family:var(--lectura); font-size:.72rem; line-height:1.35;
|
||||
color:var(--tinta); overflow-wrap:anywhere;
|
||||
}
|
||||
.cal-ev-solicitado{ background:var(--negro); color:#fff; }
|
||||
.cal-ev-confirmado{ background:#39ff14; color:#000; box-shadow:inset 0 0 0 1.4px #000; }
|
||||
.cal-ev-cab{ display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 8px; }
|
||||
.cal-ev-hora{ font-family:var(--titular); font-size:.78rem; letter-spacing:.04em; }
|
||||
.cal-ev-estado{
|
||||
font-family:var(--titular); font-size:.58rem; letter-spacing:.1em;
|
||||
text-transform:uppercase; margin-left:auto;
|
||||
}
|
||||
.cal-ev-solicitado .cal-ev-estado{ color:var(--rosa-vivo); } /* 6.7:1 sobre el negro */
|
||||
.cal-ev-confirmado .cal-ev-estado{ color:#000; }
|
||||
.cal-ev-nom{ display:block; font-weight:700; }
|
||||
.cal-ev-quien{ display:block; font-size:.66rem; color:var(--tinta-suave); }
|
||||
.cal-ev-solicitado .cal-ev-quien{ color:#d0d4c8; }
|
||||
.cal-ev-confirmado .cal-ev-quien{ color:var(--tinta); }
|
||||
.cal-pasado{ opacity:.55; }
|
||||
|
||||
/* ---- Findes o semana entera ----
|
||||
Por defecto solo se ven viernes, sábado y domingo, que es cuando se hacen
|
||||
los eventos: en el móvil la lista queda en la mitad. La casilla #ver-semana
|
||||
va antes de los meses, así que con ~ decide qué se pinta, sin JavaScript,
|
||||
igual que el #nav-toggle del menú. Todo va con :not(:checked): marcada, se
|
||||
aplican tal cual las reglas de siempre de la rejilla y de la lista. */
|
||||
.ver-semana-boton{ display:inline-flex; align-items:center; margin:0 0 18px; cursor:pointer; }
|
||||
.ver-semana-boton .si{ display:none; }
|
||||
.ver-semana:checked + .ver-semana-boton .no{ display:none; }
|
||||
.ver-semana:checked + .ver-semana-boton .si{ display:inline; }
|
||||
.ver-semana:focus-visible + .ver-semana-boton{ outline:3px solid var(--rosa); outline-offset:2px; }
|
||||
.ver-semana:not(:checked) ~ .cal-fechas .cal-row{ grid-template-columns:repeat(3,minmax(0,1fr)); }
|
||||
.ver-semana:not(:checked) ~ .cal-fechas .cal-row > .cal-cell:nth-child(-n+4){ display:none; }
|
||||
/* La última semana de un mes que acaba en jueves no tiene finde: fuera. */
|
||||
.ver-semana:not(:checked) ~ .cal-fechas .cal-row:not(.cal-head):not(:has(> .cal-cell:nth-child(n+5):not(.cal-empty))){ display:none; }
|
||||
|
||||
/* ---- Pinchar un día libre ----
|
||||
Cada día que se puede pedir lleva un enlace a /pedir/nueva?fecha=…. El
|
||||
::after lo estira sobre toda la celda, así que se pincha en cualquier parte
|
||||
del día y no solo en la palabra. Sin sesión, el gestor manda a la entrada y
|
||||
vuelve al formulario con la fecha puesta. */
|
||||
.cal-fechas .cal-cell.cal-libre{ position:relative; }
|
||||
.cal-pedir{
|
||||
align-self:flex-start; margin-top:auto; padding:2px 9px;
|
||||
font-family:var(--titular); font-size:.62rem; letter-spacing:.1em;
|
||||
text-transform:uppercase; text-decoration:none;
|
||||
color:var(--rosa-legible); border:1px solid var(--rosa-legible); border-radius:999px;
|
||||
}
|
||||
.cal-pedir::after{ content:""; position:absolute; inset:0; }
|
||||
.cal-fechas .cal-cell.cal-libre:hover, .cal-fechas .cal-cell.cal-libre:active{
|
||||
box-shadow:inset 0 0 0 2.5px var(--rosa-legible);
|
||||
}
|
||||
.cal-libre:hover .cal-pedir, .cal-libre:active .cal-pedir{
|
||||
background:var(--rosa-legible); color:#fff;
|
||||
}
|
||||
.cal-pedir:focus-visible{ outline:3px solid var(--rosa); outline-offset:2px; }
|
||||
|
||||
/* ---- Letra grande con solo tres columnas ----
|
||||
En ordenador, con solo el finde, cada columna mide unos 380px: las medidas
|
||||
de la rejilla de siete (número a .78rem, eventos a .72rem) se quedaban
|
||||
perdidas en la casilla. Con la semana entera vuelven las de siempre. */
|
||||
@media (min-width:561px){
|
||||
.ver-semana:not(:checked) ~ .cal-fechas .cal-cell:not(.cal-head-cell){
|
||||
padding:12px 14px 14px; gap:8px; min-height:clamp(110px,12vw,150px);
|
||||
}
|
||||
.ver-semana:not(:checked) ~ .cal-fechas .cal-head-cell{ padding:16px 2px; }
|
||||
/* Con tres columnas caben los nombres enteros: la letra suelta se esconde
|
||||
y el nombre lo pone el CSS según la columna, como en la lista del móvil. */
|
||||
.ver-semana:not(:checked) ~ .cal-fechas .cal-head-cell abbr{ font-size:0; text-decoration:none; }
|
||||
.ver-semana:not(:checked) ~ .cal-fechas .cal-head-cell abbr::after{ font-size:1.05rem; letter-spacing:.14em; }
|
||||
.ver-semana:not(:checked) ~ .cal-fechas .cal-head-cell:nth-child(5) abbr::after{ content:"Viernes"; }
|
||||
.ver-semana:not(:checked) ~ .cal-fechas .cal-head-cell:nth-child(6) abbr::after{ content:"Sábado"; }
|
||||
.ver-semana:not(:checked) ~ .cal-fechas .cal-head-cell:nth-child(7) abbr::after{ content:"Domingo"; }
|
||||
.ver-semana:not(:checked) ~ .cal-fechas .cal-daynum{ font-size:1.5rem; color:var(--tinta); }
|
||||
.ver-semana:not(:checked) ~ .cal-fechas .cal-turno{ font-size:.74rem; padding:3px 12px; align-self:flex-start; }
|
||||
.ver-semana:not(:checked) ~ .cal-fechas .cal-pedir{ font-size:.9rem; padding:6px 16px; }
|
||||
.ver-semana:not(:checked) ~ .cal-fechas .cal-ev{ font-size:1rem; padding:10px 14px; }
|
||||
.ver-semana:not(:checked) ~ .cal-fechas .cal-ev-hora{ font-size:1.1rem; }
|
||||
.ver-semana:not(:checked) ~ .cal-fechas .cal-ev-estado{ font-size:.74rem; }
|
||||
.ver-semana:not(:checked) ~ .cal-fechas .cal-ev-quien{ font-size:.88rem; }
|
||||
}
|
||||
|
||||
@media (max-width:560px){
|
||||
.pedir-menu{ margin:0 clamp(16px,5vw,60px) 16px; }
|
||||
.pedir-menu a, .pedir-salir button{ font-size:.74rem; padding:0 10px; }
|
||||
.pedir-salir{ margin-left:0; }
|
||||
/* En lista, la altura la pone el contenido: un finde libre es una tarjeta de
|
||||
una línea, no un hueco de 132px. */
|
||||
.cal-fechas .cal-cell:not(.cal-head-cell){ min-height:0; }
|
||||
/* La lista esconde los días vacíos, pero uno libre para pedir no está vacío:
|
||||
tiene su botón. Misma especificidad que la regla que los esconde y va
|
||||
después, así que manda esta. */
|
||||
.cal-fechas .cal-row > .cal-cell.cal-libre{ display:block; }
|
||||
.cal-pedir{ float:right; font-size:.74rem; padding:4px 12px; }
|
||||
.cal-ev{ font-size:.92rem; padding:8px 12px; }
|
||||
.cal-ev-hora{ font-size:1rem; }
|
||||
.cal-ev-estado{ font-size:.66rem; }
|
||||
.cal-ev-quien{ font-size:.82rem; }
|
||||
.cal-turno{ font-size:.66rem; margin-left:6px; }
|
||||
.clave-nueva{ font-size:1.15rem; }
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue