/* this file is being included for viewing as well as editing modes */ html, body { /* Mobile-first content type. Authored text-font-size values still win; this is only the inherited default for text that has no explicit size. */ font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 16px; line-height: 1.5; } /* Shared semantic heading scale. reset.css removes browser defaults so this one hierarchy is identical in published pages and every Hotglue utility. */ h1, h2, h3, h4, h5, h6 { font-weight: bold; line-height: 1.2; } h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.17em; } h4 { font-size: 1em; } h5 { font-size: 0.83em; } h6 { font-size: 0.67em; } @media (max-width: 768px) { html, body { font-size: 18px; } } a, a:link, a:visited, a:active, a:hover { /* this removes the blue color from links on Chrome 7.0.517.41 */ color: inherit; text-decoration: inherit; } #hg-centered-wrapper { /* Centered layout mode's container (module_page.inc.php). pointer-events:none is load bearing, not decoration: the container spans the canvas, so without it every click meant for the page background hits the container instead of body - and the editor decides what is a background click by testing e.target == document.body. That silently breaks opening the page menu and deselecting objects. Events pass through the container and are picked up by the objects themselves. */ pointer-events: none; } #hg-centered-wrapper > .object { pointer-events: auto; } html.hg-centered-fit, html.hg-centered-fit body { /* Content beyond the authored guide lines is bonus real estate. It must not create a sideways scroll escape on a screen narrower than the base area; centered_layout_init() reveals it naturally on wider screens. */ overflow-x: clip; } .object > img, .object > video, .object > iframe { /* Rounded corners (object-border-radius) apply to the OBJECT, and border-radius does not clip children - so a text object rounds correctly, because it paints its own background, while an image or a video keeps square corners inside the rounded box. Inheriting the radius rounds the media with the object without reaching for overflow:hidden, which is the author's own separate decision (the clip/show toggle). */ border-radius: inherit; } /* Object-wide visual filters. Blur is native CSS; pixelation's per-object SVG filter URL is supplied by modules/object/object-effects.js once the actual rendered dimensions are known. Keeping both selectors explicit prevents one effect from overwriting the other. */ .glue-object-blur { filter: blur(var(--glue-blur)); } .glue-object-pixelate { /* WebKit clips userSpaceOnUse filters on positioned HTML in the parent's coordinates unless the object establishes its own transform space. Identity translate preserves the editor's independent rotate/scale. */ translate: 0 0; filter: var(--glue-pixelate-filter); } .glue-object-blur.glue-object-pixelate { filter: blur(var(--glue-blur)) var(--glue-pixelate-filter); } /* A committed crop changes the outer object's geometry. Its media keeps the pre-crop dimensions and is shifted behind the now smaller viewport. */ .glue-content-crop { overflow: hidden !important; } .glue-content-crop > img, .glue-content-crop > video, .glue-content-crop > .glue-video-media-mask > video, .glue-content-crop > iframe { position: absolute !important; left: var(--glue-crop-content-left, 0px) !important; top: var(--glue-crop-content-top, 0px) !important; width: var(--glue-crop-content-width) !important; height: var(--glue-crop-content-height) !important; max-width: none !important; max-height: none !important; } .image.glue-content-crop { background-position: var(--glue-crop-content-left, 0px) var(--glue-crop-content-top, 0px) !important; background-size: var(--glue-crop-content-width) var(--glue-crop-content-height) !important; } .glue-edge-fade { /* edge-fade.js supplies one blurred rounded-rectangle alpha mask whose contour follows the object's current radius. Unlike intersecting horizontal and vertical gradients, this has one continuous distance field around sides AND corners, so no rectangular seams are visible. */ --glue-fade: 0px; -webkit-mask-image: var(--glue-edge-mask); mask-image: var(--glue-edge-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .glue-glow { /* The whole box-shadow family behind an object, composed here, once: the soft halo (the glow) and a directional drop shadow. That is the difference between this and the edge fade below - the fade is a mask, so it takes the text with it; shadows paint outside (or inside) the box and never touch the content. Only ingredients are stored, never a shadow: colours, the halo's reach and strength, and the drop's distance, angle, blur and spread. The class is on the element whenever any member is, and the members nobody set stay invisible (a zero size, a transparent colour, or an alpha that color-mix multiplies to nothing), so adding one shadow never invents another. Everything composes into this one box-shadow, so no member can ever become a second declaration that overwrites the others. The glow is three concentric layers (reach, twice reach, four times reach) at falling alphas - one layer reads as a hard edge, the stack as a soft halo. An optional second colour (--glue-glow-color2) puts the halo's side layers into a duotone, and --glue-glow-inner gates the inside layers (by alpha, not by size: a zero-sized layer is not invisible, it is a solid box). The drop shadow is a distance in a direction, resolved to x/y offsets HERE via cos()/sin() of the stored angle - the angle keeps its unit, so the trig sees an angle rather than a number. Every variable used below has a default here, and every one must: a single undefined variable makes the whole box-shadow invalid at computed-value time and every layer vanishes at once. color-mix is what lets a stored colour take an alpha without splitting it into channels first (Chrome 111+, Firefox 113+); cos()/sin() are Chrome 111+/Firefox 108+. */ --glue-glow-color: transparent; --glue-glow-spread: 0; --glue-glow-alpha: 80; --glue-glow-inner: 0; --glue-glow-color2: transparent; --glue-drop-color: transparent; --glue-drop-distance: 0; --glue-drop-angle: 0deg; --glue-drop-blur: 0; --glue-drop-spread: 0; box-shadow: 0 0 calc(var(--glue-glow-spread) * 1px) color-mix(in srgb, var(--glue-glow-color) calc(var(--glue-glow-alpha) * 1%), transparent), 0 0 calc(var(--glue-glow-spread) * 2px) color-mix(in srgb, var(--glue-glow-color) calc(var(--glue-glow-alpha) * 0.6%), transparent), 0 0 calc(var(--glue-glow-spread) * 4px) color-mix(in srgb, var(--glue-glow-color) calc(var(--glue-glow-alpha) * 0.35%), transparent), inset 0 0 calc(var(--glue-glow-spread) * 1px) color-mix(in srgb, var(--glue-glow-color) calc(var(--glue-glow-alpha) * var(--glue-glow-inner) * 1%), transparent), inset 0 0 calc(var(--glue-glow-spread) * 2px) color-mix(in srgb, var(--glue-glow-color) calc(var(--glue-glow-alpha) * var(--glue-glow-inner) * 0.6%), transparent), inset 0 0 calc(var(--glue-glow-spread) * 4px) color-mix(in srgb, var(--glue-glow-color) calc(var(--glue-glow-alpha) * var(--glue-glow-inner) * 0.35%), transparent), inset calc(var(--glue-glow-spread) * 0.4px) 0 calc(var(--glue-glow-spread) * 1.6px) color-mix(in srgb, var(--glue-glow-color2) calc(100% * var(--glue-glow-inner)), transparent), inset calc(var(--glue-glow-spread) * -0.4px) 0 calc(var(--glue-glow-spread) * 6px) color-mix(in srgb, var(--glue-glow-color2) calc(100% * var(--glue-glow-inner)), transparent), calc(var(--glue-glow-spread) * -0.2px) 0 calc(var(--glue-glow-spread) * 1.6px) var(--glue-glow-color2), calc(var(--glue-glow-spread) * 0.2px) 0 calc(var(--glue-glow-spread) * 6px) var(--glue-glow-color2), calc(var(--glue-drop-distance) * cos(var(--glue-drop-angle)) * 1px) calc(var(--glue-drop-distance) * sin(var(--glue-drop-angle)) * 1px) calc(var(--glue-drop-blur) * 1px) calc(var(--glue-drop-spread) * 1px) var(--glue-drop-color); } .glue-text-shadow { /* A halo behind the text itself. Like the glow above it, what is stored is the ingredients - a radius, a strength and a colour - and the value is composed here, once. text-shadow has no spread of its own, so the radius is the blur and the strength is the colour's alpha. */ --glue-shadow-radius: 6; --glue-shadow-alpha: 80; --glue-shadow-color: #000; text-shadow: 0 0 calc(var(--glue-shadow-radius) * 1px) color-mix(in srgb, var(--glue-shadow-color) calc(var(--glue-shadow-alpha) * 1%), transparent); }