/* ------------------------------------------------------------------------ * ccx-dotfield.css * * Two things only: where the canvas of assets/ccx-dotfield.js sits inside a * band, and the one rule that takes the printed dot pattern out of the way * once that canvas is really there. * * Everything the field looks like is drawn in the script. There is nothing * to style here, which is the point: a stylesheet cannot make a dot lean out * of the way of a pointer. * --------------------------------------------------------------------- */ /* -------------------------------------------------------------------- * THE LAYER * * The canvas is the first child of the band and has to end up behind * everything the band holds, without any element inside the band knowing * about it. A negative z-index does exactly that: it is painted after the * background of the band and before its content. * * For that to stay inside the band, the band has to be a stacking context * of its own, otherwise a layer at -1 escapes upwards and lands next to * the two fixed background canvases of inc/ccx-stickybg.php, which also * sit at -1 and -2 on the body. isolation is the quietest way to say it: * unlike a z-index of its own it changes neither the order in which the * band itself is painted nor its layout. It was checked first that no * element inside these bands uses a blend mode, because those are the only * thing a new stacking context would change. * * position: relative is written out although both bands already carry it. * The rule has to hold for whatever band the module is pointed at next. * -------------------------------------------------------------------- */ .ccdf-host { position: relative; isolation: isolate; } .ccdf-host > .ccdf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; } /* -------------------------------------------------------------------- * THE PATTERN IT REPLACES * * assets/ccx-ideas.css prints a texture into the lower left corner of * every idea card: dots on a 16px grid on the first card, the same drawing * as ruled lines on the second, as a full lattice on the third. The cards * are glass, their own background is white at two percent, so the field * that now runs behind them shows through almost unchanged. A printed grid * on top of a drawn grid one pixel apart in pitch is what moire is made * of, so the printed one goes. * * Only the picture is taken away. The layer, its mask and its hover state * stay where they are, so nothing in ccx-ideas.css has to know about this. * * The hook is the class the script writes on after a canvas has * really been built. No script, no canvas, no 2d context, no band on the * page: the class is never written and the card keeps the texture it has * today. That is the whole fallback. * * Specificity: the rules in ccx-ideas.css are one class and one element * each, this one is two classes and one element, so it wins on weight and * does not depend on the order the two files are queued in. * -------------------------------------------------------------------- */ html.ccx-dotfield-on .ccidea-card::after, html.ccx-dotfield-on .ccidea-card.ccidea-n1::after, html.ccx-dotfield-on .ccidea-card.ccidea-n2::after, html.ccx-dotfield-on .ccidea-card.ccidea-n3::after { background-image: none; } /* On paper the field is a grey haze over the whole band and says nothing. * The printed pattern is already gone by the rule above, so the page prints * on a clean ground. */ @media print { .ccdf-host > .ccdf-canvas { display: none; } }