/* CSS styling examples for the Vaadin app. Visit https://vaadin.com/docs/styling/application-theme/ for more information. */ /* Example: CSS class name to center align the content . */ .centered-content { margin: 0 auto; max-width: 250px; } /* Example: the style is applied only to the textfields which have the `bordered` class name. */ vaadin-text-field.bordered::part(input-field) { box-shadow: inset 0 0 0 1px var(--lumo-contrast-30pct); background-color: var(--lumo-base-color); } /* * mis estilos * * . ambitoizacion * . cargarlos en cada vista con @CssImport no sirve para crear un ambito automatico pero * ciertamente prefiero tenerlos separados por vista, asi que los mantengo como empece, * un archivo CSS por vista, y los incluyo aqui, que es el unico archivo que la directiva * @Theme carga; la unica modificacion que he hecho ha sido anidarlos en un selector con * el nombre de la vista, que anyado en cada vista nada mas empezar init {} * . observese como el formato anidado es portador de grandes bendiciones divinas porque * funciona perfectamente en el CSS de ViewQuery2Results3.kt pero no en el de ...Results2.kt, * porque ahi cada clase de css esta declarada por libre en query2result2.css, de modo que * anidar es trabajoso (es la unica que hice de query2result2.css a query2result3.css) * pero ademas, crear un ambito via una clase global en la raiz de la vista es imposible; lo * dejo como esta, sin funcionar, para ejemplificar el problema - cuando las clases eran * globales de todo el HTML, funcionaba perfectamente * . ver abundantes comentarios de aprendizaje en los archivos CSS importados */ /* * problema bobo * * aqui se ejemplifica un problema tonto, que es que tengo que cazar los calculos * hechos en otros media queries y traerlos a cada sitio donde se debe aplicar un * valor nuevo; el problema es copiar/pegar la expresion donde sea que se usa el * valor nuevo; si mas adelante decido cambiar la operacion, tengo 15 sitios donde * reescribir la nueva expresion; la solucion es cargar estos valores en variables * solo en un sitio y poner la variable calculada en vez de la expresion repetida * ACT * no me eliminaria esto el monton de media queries, porque me basta con usar uno * arriba del todo y luego usar la variable que carga en bloques limpios, sin un * media query cada uno? creooo queee siii */ /* * media queries: que se puede pedir? * no son solo los tamanyos; es posible usar (orientation: landscape) * es posible usar operadores logicos: and/or y parentesis... ajem! */ :root { /* no se si --lumo-font-family es util o si es mejor dejar solo font-family; ambos parecen exactamente iguales */ /*--lumo-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;*/ font-family: "Segoe UI", Roboto, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 100%; /* coge del tamanyo en curso del navegador */ background-color: #f0f0f0; } /* probar url("ini.css") */ @import "ini.css"; @import "query.css"; @import "query_result.css"; /* eof */ /* * CSS de la primera pagina * * comentarios principales en query.css */ *, *::before, *::after { box-sizing: border-box; } /* * variables para pantallas de mierda * * me chapuceo un scoping poniendo v-ini- delante porque las variables deben ser * accesibles en cualquier bloque de este archivo CSS y entonces no pueden estar * definidas locales en un bloque, de modo que las meto en , pero entonces * son visibles en toda la pagina, de ahi el scoping de pobre * ACT * quito v-ini porque esto afecta a todas las paginas pero me da miedo que alguno * coincida con otras variables (no hay forma de ver que variables hay declaradas * lalala lenguajes de mierda hohoho), asi que anyado trk- a todas estas variables * ACT2 * yyy vuelvo a meter v-ini solo para --trk-hdr-height porque es diferente del * de las otras dos paginas */ body { /* base */ --trk-v-ini-hdr-height-ini: 120px; --trk-v-ini-font-size-hdr-ini: 1.6rem; --trk-hdr-height-ini: 80px; --trk-ftr-height-ini: 50px; --trk-padding-ini: 2rem; --trk-font-size-hdr-ini: 1.2rem; --trk-font-size-ftr-ini: 0.8rem; /* deriv */ --trk-v-ini-hdr-height: var(--trk-v-ini-hdr-height-ini); --trk-v-ini-font-size-hdr: var(--trk-v-ini-font-size-hdr-ini); --trk-hdr-height: var(--trk-hdr-height-ini); --trk-ftr-height: var(--trk-ftr-height-ini); --trk-padding: var(--trk-padding-ini); --trk-font-size-hdr: var(--trk-font-size-hdr-ini); --trk-font-size-ftr: var(--trk-font-size-ftr-ini); } .v-ini { @media (max-width: 400px) or (max-height: 400px) { --trk-v-ini-hdr-height: calc(var(--trk-v-ini-hdr-height-ini) / 2); --trk-v-ini-font-size-hdr: calc(var(--trk-v-ini-font-size-hdr-ini) / 2); --trk-padding: calc(var(--trk-padding-ini) / 2); --trk-ftr-height: calc(var(--trk-ftr-height-ini) / 2); --trk-font-size-ftr: calc(var(--trk-font-size-ftr-ini) / 1.5); } vaadin-vertical-layout { &.mid { /* estos dos padding no hacen nada */ /*padding-top: 120px;*/ /* altura de hdr-pod */ /*padding-bottom: 50px;*/ /* altura de ftr-pod */ /* transform lo mueve de sitio sin sacarlo del flexbox */ transform: translateY(var(--trk-v-ini-hdr-height)); /* altura de hdr-pod */ background: url("/images/belt.jpg"); background-size: cover; background-position: center; /* se ha de especificar; background no asigna tamanyo al contenedor */ height: calc(100vh - var(--trk-v-ini-hdr-height) - var(--trk-ftr-height)); justify-content: center !important; } padding: 0px; /* propiedades que vaadin inyecta en vert-layout; aqui fuerzo valores diferentes */ align-items: center !important; } vaadin-horizontal-layout { &.hdr-pod { position: fixed; top: 0; left: 0; background-color: #000000; height: var(--trk-v-ini-hdr-height); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); width: 100%; display: flex; /* propiedades que vaadin inyecta en horiz-layout; aqui fuerzo valores diferentes */ /* no hay nada mas que hacer en el programa en kotlin */ justify-content: space-between !important; align-items: center !important; } &.btns { /* * flipo de lo facil que ha sido estilar los botones; select fue una puta pesadilla */ width: 100%; justify-content: center !important; align-items: center !important; .btn { /* width: 8cm; height: 4cm; */ /* valores de vw encontrados a ojo; primero puse 8 y 4cm pero no quiero * valores fijos y estos porcentajes son los que en mi viewport se veian * bien (1700 * .18 sobre 300); alto la mitad y por el otro lado limito * el minimo con la mitad */ width: clamp(4cm, 18vw, 8cm); height: clamp(2cm, 9vw, 4cm); border-radius: .4cm; border: none; /* * degradado interno que termine en los bordes del boton * * . basicamente imposible con gradientes (CSS tiene varios pero no uno que siga la forma * de rounded rectangle; muchos trucos elaboradisimos pero ninguno rapido y elegante; * dejo comentado un background-image con gradientes para documentacion, pero queda una * puta mierda * . la sombra se puede dirigir hacia adentro, que es exactamente lo que buscaba */ /*opacity: 1;*/ /* no sirve con botones vaadin */ /*box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.9);*/ /* queda monerrimo */ /* animacion */ /* downgradeo de transform+bg-color a solo bg-color porque el transform jodia el ancho * un pixel mientras movia el contenedor - inaceptable */ /*transition: transform 0.2s ease, background-color 0.2s ease;*/ transition: background-color 0.2s ease; } .btn:hover { /*transform: translateY(-2px);*/ background-color: rgba(255, 255, 255, .9); } .btn-bg1 { background-image: url("/logos/6o-bl.png"); background-color: rgba(255, 255, 255, .7); background-size: 80%; background-repeat: no-repeat; background-position: center; } .btn-bg2 { /* * intento de gradiente interior que pare en los bordes siguiendo * la curvatura de las esquinas; no posible con los gradientes * basicos pero lo dejo aqui para documentacion - y bg-image * pueden ser multiples capas (yay?) background-image: url("logos/ap.svg"), radial-gradient( circle at 50% 50%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 0.0) 100% ); */ background-image: url("/logos/ap.svg"); background-color: rgba(255, 255, 255, .7); background-size: 80%; /* esto es como 80% de contain, para dejar margenes entre el rectangulo del boton y la imagen */ background-repeat: no-repeat; background-position: center; } } .hdr-left { gap: 0px; .cia-img { /* 120: resta 20px; 60: resta 10px; lo dejo en una formula */ height: calc(var(--trk-v-ini-hdr-height) - (var(--trk-v-ini-hdr-height) / 6)); /* (1) */ padding-left: var(--trk-padding); } .cia-txt { padding: var(--trk-padding); font-weight: light; font-size: var(--trk-v-ini-font-size-hdr); color: white; } justify-content: flex-start !important; align-items: center !important; } .hdr-right { gap: 0px; .svc-txt { padding: var(--trk-padding); font-weight: bold; font-size: var(--trk-v-ini-font-size-hdr); color: white; } /* * select (= combobox sin edit field) es extremadamente espinoso de estilar; * dejo aqui lo que me ha funcionado tras perder un dia; no meterme de nuevo * hasta que no sepa mas como hacerlo sin perder horas * * los selectores ::part no encuentro confirmacion de que puedan anidarse, * asi que los dejo fuera; funcionan bien y el problema parece ser "navegadores * viejos" o algo similar; aunque en este en particular no uso label, lo * dejo como documentacion; este es un componente complejo y las subpartes * son jodidas; he copiado el codigo kotlin de la documentacion oficial, asi * que al menos ha servido de algo (es pobre muchas veces) y afortunadamente * puede usarse un selector normal para cada item, que es un flexbox * * he buscado durante un dia como estilar el componente que contiene los * items (.cb-item) pero no he encontrado nada ni oficial ni con LLMs */ /* no uso label pero esto funciona; lo dejo como documentacion */ .cb-lang::part(label) { color: white; } .cb-lang::part(input-field) { background: white; margin: 1rem; /* esto no hace nada; no hay propiedad margin en todo el cb */ /*font-size: .2rem;*/ /* tamanyo en el cb cerrado (no muy interesante) */ /* width aqui se pone como cb-lang->width */ } .cb-lang { width: 6em; /* ni fit-content ni auto funcionan asi que fijo y atps */ .cb-item { display: flex; flex-direction: row; gap: 0 var(--vaadin-gap-s); align-items: flex-end; font-size: 1rem; /* tamanyo del texto en el cb abierto (mas interesante) */ > img { width: 16px; height: 16px; object-fit: contain; } } } @media (max-width: 400px) or (max-height: 400px) { .svc-txt { display: none; } /* no hace falta reducir mas */ /* .cb-lang { width: 4em; .cb-item { font-size: .5rem; > img { width: 8px; height: 8px; } } } */ } justify-content: flex-end !important; align-items: center !important; } &.ftr-pod { position: fixed; bottom: 0; left: 0; background-color: #000000; height: var(--trk-ftr-height); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); width: 100%; display: flex; /* propiedades que vaadin inyecta en horiz-layout; aqui fuerzo valores diferentes */ /* no hay nada mas que hacer en el programa en kotlin */ .copy { padding: var(--trk-padding); font-weight: light; font-size: var(--trk-font-size-ftr); color: white; } justify-content: center !important; align-items: center !important; } } } /* * notas * * (1) * divertidas mierdas de CSS: var(--v-ini-hdr-height) - 20px ni da error ni * calcula bien (!!??!11) WTPUTOFUCK el valor es 128 !!?? * empezando con 120px y leyendo "- 20px" luego no se como conyos puede * . no dar error en el inspector de ff * . devolver 128... sic * ya esta; tenia que decirlo dos veces */ /* eof */ /* * como vaadin no hace auto-scoping de reglas CSS por mucha directiva @CssImport o @StyleSheet que * se use en cada vista separada, la especificidad se ha de conseguir a mano; escribir mil veces * horizontal-layout. {...} es una puta tortura; afortunadamente las reglas CSS se pueden * anidar y & declara las interiores como si se hubieran escrito de la manera larga * * sintaxis estandar CSS, espacio vs junto * . vaadin-horizontal-layout .hdr-pod significa "clase hdr-pod dentro de horiz layout" * . vaadin-horizontal-layout.hdr-pod significa "clase horiz layout *AND* clase hdr-pod" * * en resumen * . para aplicar un selector solo en el ambito de otro selector, anidarlos * . la sintaxis & en un selector anidado junta sin espacios, de modo que asi puedo ahorrarme * repetir el selector exterior en cada selector interior * * ACT * creo que vaadin-vertical-layout y vaadin-horizontal-layout son demasiado generales; juntandose * todos los CSS, esto creara un pifostio; hay que diferenciar mas aun: al empezar cada vista, * pongo una clase llamada como la vista en el horiz y vert layouts principales; addClassName("") * y luego, dentro de cada layout que me interese, llamo a addClassName("") - en el archivo CSS * pongo vaadin-horizontal-layout. {...} y eso me particulariza por clase (por vista) * ACT2 * esto no funciona porque tengo que anyadir la clase especial para la vista constantemente a cada * horiz-layout que hago, lo que elimina el beneficio activar los anidados solo mencionandolos * ACT3 * finalmente funciona usando matching menos estricto; en vez de necesitar que cada horiz-layout * tenga ambas clases, me basta con que la clase discriminadora englobe a todas las demas y asi * la sintaxis CSS que me basta es un espacio (declarando inclusion) * */ *, *::before, *::after { box-sizing: border-box; } .v-qry { @media (max-width: 400px) or (max-height: 400px) { --trk-hdr-height: calc(var(--trk-hdr-height-ini) / 2); --trk-ftr-height: calc(var(--trk-ftr-height-ini) / 2); --trk-padding: calc(var(--trk-padding-ini) / 2); --trk-font-size-hdr: calc(var(--trk-font-size-hdr-ini) / 2); --trk-font-size-ftr: calc(var(--trk-font-size-ftr-ini) / 1.5); } vaadin-vertical-layout { &.mid { padding-top: var(--trk-hdr-height); padding-bottom: var(--trk-ftr-height); } /*justify-content: center !important;*/ align-items: center !important; } vaadin-horizontal-layout { &.hdr-pod { position: fixed; top: 0; left: 0; background-color: #000000; height: var(--trk-hdr-height); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); width: 100%; display: flex; z-index: 50; /* propiedades que vaadin inyecta en horiz-layout; aqui fuerzo valores diferentes */ /* no hay nada mas que hacer en el programa en kotlin */ justify-content: space-between !important; align-items: center !important; } &.flds { /*width: 100%;*/ width: auto; justify-content: center !important; align-items: center !important; @media (max-width: 650px) { & { /* flex-dir cambia los ejes, por tanto necesito align-items para cross axis */ flex-direction: column; align-items: center !important; gap: 0px; } } } &.btns { width: 100%; justify-content: center !important; } .hdr-left { gap: 0px; .cia-img { height: calc(var(--trk-hdr-height) - 10px); padding-left: var(--trk-padding); } .cia-txt { padding: var(--trk-padding); font-weight: light; font-size: var(--trk-font-size-hdr); color: white; } justify-content: flex-start !important; align-items: center !important; } .hdr-right { gap: 0px; .svc-txt { padding: var(--trk-padding); font-weight: bold; font-size: var(--trk-font-size-hdr); color: white; } justify-content: flex-end !important; align-items: center !important; } &.ftr-pod { position: fixed; bottom: 0; left: 0; background-color: #000000; height: var(--trk-ftr-height); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); width: 100%; display: flex; z-index: 50; /* propiedades que vaadin inyecta en horiz-layout; aqui fuerzo valores diferentes */ /* no hay nada mas que hacer en el programa en kotlin */ justify-content: center !important; align-items: center !important; .copy { padding: var(--trk-padding); font-weight: light; font-size: var(--trk-font-size-ftr); color: white; } } } } /* eof */ /* * hum veamos que conyos es esto * * no usar el DOM normal; ver mi obsidian "web programable", CSS, conceptos * no poner valores fijos en ningun sitio; usar valores por defecto para :root y todo lo contenido en root * es relativo a ellos o al contenedor inmediatamente antecedente * * pod = contenedor - contiene elems det (detalle de eventos) */ /* * POR HACER * . eliminar todos los box-sizing y comprobar que funciona igual con el box-sizing aplicado a * aqui */ *, *::before, *::after { box-sizing: border-box; } .v-qry-res { @media (max-width: 400px) or (max-height: 400px) { --trk-hdr-height: calc(var(--trk-hdr-height-ini) / 2); --trk-ftr-height: calc(var(--trk-ftr-height-ini) / 2); --trk-padding: calc(var(--trk-padding-ini) / 2); --trk-font-size-hdr: calc(var(--trk-font-size-hdr-ini) / 2); --trk-font-size-ftr: calc(var(--trk-font-size-ftr-ini) / 1.5); } vaadin-vertical-layout { &.mid { padding-top: var(--trk-hdr-height); padding-bottom: var(--trk-ftr-height); } &.inp { /* flex con 3 numeros significa flex-grow, flex-shrink, flex-basis (tamanyo inicial del elemento) */ flex: 0 0 15%; height: 100%; @media (max-width: 400px) { & { padding: 8px; /* mitad de 16px, que no puede leerse de ningun sitio, sic, asi que fijo */ gap: 0px; } } } box-sizing: border-box; /* propiedades que vaadin inyecta en vert-layout; aqui fuerzo valores diferentes */ align-items: center !important; } vaadin-horizontal-layout { &.hdr-pod { position: fixed; top: 0; left: 0; background-color: #000000; height: var(--trk-hdr-height); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); width: 100%; display: flex; z-index: 50; /* propiedades que vaadin inyecta en horiz-layout; aqui fuerzo valores diferentes */ /* no hay nada mas que hacer en el programa en kotlin */ justify-content: space-between !important; align-items: center !important; } &.hdr-left { gap: 0; .cia-img { height: calc(var(--trk-hdr-height) - 10px); /* esto era con 80px; con 40 es la mitad, si quiero preocuparme sss */ padding-left: var(--trk-padding); } .cia-txt { padding: var(--trk-padding); font-weight: light; font-size: var(--trk-font-size-hdr); color: white; } justify-content: flex-start !important; align-items: center !important; } &.hdr-right { padding: var(--trk-padding); font-weight: bold; font-size: var(--trk-font-size-hdr); color: white; } &.inp-pod { display: flex; background-color: #ffffff; border-radius: 10px; width: 100%; /* ancho inicial igual al ancho del elemento que contiene a este */ /*max-width: 100%;*/ /* ancho final limitado por si los elementos internos crecen demasiado */ /*padding: 0px;*/ /* de momento no ha hecho falta */ /*margin: 0px;*/ /* de momento no ha hecho falta */ outline: 2px; overflow: hidden; gap: 0px; /* propiedades que vaadin inyecta en horiz-layout; aqui fuerzo valores diferentes */ justify-content: center !important; align-items: center !important; @media (max-width: 400px) { & { flex-direction: column; } } } &.res-pod { /* * este pos: relative es para que los descendientes con pos: absolute se posicionen respecto * a el (por defecto, pos es static y los descendientes lo saltarian porque solo se situan * respecto al primer ascendiente con pos: !static mas cercano a ellos) * * los descendientes con pos: absolute siguen siendo descendientes, localizables (como aqui, * con estos selectores, o no seria posible estilarlos) pero se quitan del flujo flexbox, * de modo que en ausencia de otros elementos, res-pod tiene height 0 - poner min-height a * algo no sirve de nada porque nunca tiene la longitud exacta de los descendientes y al * escrollear hasta el final queda feo * * parece que en CSS no se puede fijar el alto con el alto de otro elemento, sic, asi que * lo unico que se puede hacer, ademas de adivinar, es medir con mierda de javascript * * pero antes que mjs (mierda de javascript), todo, asi que trato de hacerlo simple y sin * posicionamiento absoluto y lo consigo; algo he aprendido en la ultima semana; a pensar * en CSS y a no fiarme nunca de la puta mierda de modelos de lenguaje - ergo */ width: 100%; /*min-height: 120px;*/ /*min-height: auto;*/ /*height: calc(100vh - 80px - 50px);*/ align-items: flex-start !important; box-sizing: border-box; .agr { width: 25% !important; display: flex; justify-content: flex-start; align-items: center; gap: 16px; padding: 16px; background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-sizing: border-box; } .det-pod { width: 45% !important; display: flex; justify-content: center; align-items: center; gap: 16px; padding: 16px; background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-sizing: border-box; } /* pantalla estrecha */ @media (max-width: 768px) { /* & = el contenedor de @media = .res-pod */ & { flex-direction: column; } .agr { gap: 8px; /* venga mas valores fijos (el x def es 16 yay) */ width: 100% !important; order: 1; /* Ensures this one on top */ } .det-pod { width: 100% !important; order: 2; /* Ensures this one on bottom */ } } } &.det { display: inline-flex; background-color: #ffffff; border-radius: 8px; width: 100%; /* ancho inicial igual al ancho del elemento que contiene a este */ /*max-width: 100%;*/ /* ancho final limitado por si los elementos internos crecen demasiado */ padding: 8px 16px; /* vert horiz alrededor de cada elem */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); outline: 2px; justify-content: flex-start; /* justificado a la izquierda */ /*overflow-wrap: break-word;*/ /* no tiene efecto */ } &.ftr-pod { position: fixed; bottom: 0; left: 0; background-color: #000000; height: var(--trk-ftr-height); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); width: 100%; display: flex; z-index: 50; .copy { padding: var(--trk-padding); font-weight: light; font-size: var(--trk-font-size-ftr); color: white; } /* propiedades que vaadin inyecta en horiz-layout; aqui fuerzo valores diferentes */ /* no hay nada mas que hacer en el programa en kotlin */ justify-content: center !important; align-items: center !important; } } .text-xxl { font-size: 2em; } .text-xl { font-size: 1.5em; /*padding: 8px 16px;*/ /* vert horiz alrededor de cada elem */ } .text-l { font-size: 1.25rem; /*padding: 8px 8px;*/ /* vert horiz alrededor de cada elem */ /* * desactivo reducir el texto a ver como queda en un puto movil @media (max-width: 400px) { & { font-weight: bold; font-size: 1rem; } } */ } .text-n { font-size: 1rem; &.text-ddmmm { /* no hay ninguna otra unidad de longitud que se base en el ancho de un caracter y, * curiosamente, no se ha tomado el ancho de la "m", sino del 0; aunque el 0 no es * el ancho maximo ni minimo sino todo lo contrario, no hay otra unidad * ACT w3schools dice "Relative to the width of the 0", pero no dice que fraccion * del ancho usa sic */ min-width: 6ch; } /* * desactivo reducir el texto a ver como queda en un puto movil @media (max-width: 400px) { & { font-size: .75rem; } } */ } .text-nr { font-size: 1rem; /* esto funcionaria con texto normal pero cuando el elemento esta contenido en otro con display: flex, el */ /* posicionamiento no se ve afectado por text-align; margin-left si que funciona - yay flex (and glubs) */ /*text-align: right;*/ margin-left: auto; /* * desactivo reducir el texto a ver como queda en un puto movil @media (max-width: 400px) { & { font-size: .75rem; } } */ } } /* eof */