/* * tinygallery - styles for the gallery block and its fullscreen viewer. * * Loaded twice on purpose: once by the page that shows a published gallery, and * once into the editor as content_css, so the block in the editor is the same * block the reader gets. Everything is namespaced under .tinygallery / .tg-. * * Colours come from the custom properties below, so a host theme can restyle * the viewer without touching this file. */ /* on :root, not on .tinygallery: the viewer is appended to and so is never a descendant of the block it was opened from. Declared there it would inherit nothing and every override below would be ignored. */ :root { --tg-gap: 8px; --tg-radius: 6px; --tg-backdrop: rgba(9, 11, 14, .96); --tg-fg: #f2f4f8; --tg-dim: #9aa3b2; --tg-control: rgba(255, 255, 255, .1); --tg-control-hover: rgba(255, 255, 255, .2); } /* The mosaic is fixed, not configurable: one lead picture at half the block wide and the full height, then half-size pictures stacked to its right, two columns of them at most. Five fit; the bottom right cell reports the rest. */ .tinygallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tg-gap); margin: 20px 0; /* a dragged width is an inline style; this keeps it from ever overflowing a column narrower than the one it was sized in */ max-width: 100%; } /* set beside the text rather than across it. The width comes from the inline style the resize handle writes, so these only deal with the flow. */ .tinygallery.tg-left { float: left; margin: 6px 22px 14px 0; } .tinygallery.tg-right { float: right; margin: 6px 0 14px 22px; } /* every following cell is square, so the lead spanning two of them is square too */ .tinygallery .tg-item { aspect-ratio: 1; } .tinygallery .tg-item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } /* past five the rest leave the layout; the badge says how many */ .tinygallery .tg-item:nth-child(n + 6) { display: none; } .tinygallery .tg-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(9, 11, 14, .62); color: var(--tg-fg, #f2f4f8); font-size: 17px; font-weight: 600; text-align: center; padding: 6px; } .tinygallery .tg-item:hover .tg-more { background: rgba(9, 11, 14, .5); } /* Small galleries have nothing to build a mosaic around, so they lay out on their own terms rather than leaving holes in the corner. */ /* One picture is not a mosaic, it is a picture: its own proportions, nothing cropped. Everything else about the block still applies, so it resizes, floats, drags and opens in the viewer like any other. */ .tinygallery:has(.tg-item:only-child) { grid-template-columns: minmax(0, 1fr); } .tinygallery:has(.tg-item:only-child) .tg-item:first-child { grid-column: auto; grid-row: auto; aspect-ratio: auto; background: none; } .tinygallery:has(.tg-item:only-child) .tg-item img { height: auto; object-fit: fill; } /* two, as equal halves */ .tinygallery:has(.tg-item:first-child:nth-last-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tinygallery:has(.tg-item:first-child:nth-last-child(2)) .tg-item:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 1; } /* three: the lead and a single stack beside it, so two columns rather than three */ .tinygallery:has(.tg-item:first-child:nth-last-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* four: the odd one out spans the bottom two cells, which beats leaving the corner empty. Spanning a row instead would open a third one and squash everything above it. */ .tinygallery:has(.tg-item:first-child:nth-last-child(4)) .tg-item:last-child { grid-column: span 2; /* two cells wide by one tall. auto would leave it with no intrinsic height and collapse the row it is the only occupant of. */ aspect-ratio: 2; } .tinygallery .tg-item { position: relative; margin: 0; padding: 0; overflow: hidden; border-radius: var(--tg-radius); background: rgba(127, 127, 127, .12); cursor: pointer; } /* two classes so a host rule like "article img { display:block; margin:16px 0 }" cannot win on specificity and blow the grid apart */ .tinygallery .tg-item img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; transition: transform .18s ease-out; } .tinygallery .tg-item:hover img, .tinygallery .tg-item:focus-visible img { transform: scale(1.04); } .tinygallery .tg-item:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* the caption belongs to the viewer, but it stays in the document for screen readers and for anyone who gets the html with no css */ .tinygallery .tg-item figcaption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- the fullscreen viewer, built by tinygallery.js --- */ .tg-viewer { position: fixed; inset: 0; z-index: 2147483000; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--tg-backdrop, rgba(9, 11, 14, .94)); color: var(--tg-fg, #f2f4f8); font: inherit; opacity: 0; transition: opacity .16s ease-out; } .tg-viewer.tg-open { opacity: 1; } /* The display above outranks the browser's own [hidden] rule, so a closed viewer would still be laid out: invisible at opacity 0, but full screen and still taking the pointer, swallowing every click on the page behind it. Restate it here, more specific than the rule it has to beat. */ .tg-viewer[hidden] { display: none; } .tg-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; } .tg-count { font-size: 13px; color: var(--tg-dim, #9aa3b2); font-variant-numeric: tabular-nums; } /* The picture is laid out against the stage box rather than sized by its own dimensions, so it grows and shrinks to whatever the viewport allows. It is absolutely positioned because a percentage height does not resolve against an fr row: the image falls back to its intrinsic ratio and runs off the screen. */ .tg-stage { position: relative; min-height: 0; margin: 0 16px; } .tg-stage img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; border-radius: var(--tg-radius, 6px); object-fit: contain; } .tg-cap { min-height: 1.5em; padding: 14px 16px 22px; margin: 0; text-align: center; font-size: 14px; line-height: 1.5; color: var(--tg-dim, #9aa3b2); } .tg-cap:empty { visibility: hidden; } .tg-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: inherit; background: var(--tg-control, rgba(255, 255, 255, .1)); border: 0; border-radius: 50%; cursor: pointer; transition: background .14s ease-out; } .tg-btn:hover { background: var(--tg-control-hover, rgba(255, 255, 255, .2)); } .tg-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .tg-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .tg-btn[disabled] { opacity: .3; cursor: default; } .tg-btn[disabled]:hover { background: var(--tg-control, rgba(255, 255, 255, .1)); } .tg-prev, .tg-next { position: absolute; top: 50%; transform: translateY(-50%); } .tg-prev { left: 10px; } .tg-next { right: 10px; } /* no scrolling the page behind the viewer */ body.tg-locked { overflow: hidden; } /* narrow: two columns with the lead across the top, since a mosaic four cells wide leaves the small pictures too small to be worth tapping */ @media (max-width: 620px) { .tinygallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tinygallery .tg-item:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; } .tinygallery:has(.tg-item:first-child:nth-last-child(3)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* the four-picture rule needs no override: span 2 is the full width here */ .tg-prev { left: 4px; } .tg-next { right: 4px; } .tg-stage { margin: 0 8px; } } @media (prefers-reduced-motion: reduce) { .tg-viewer, .tinygallery .tg-item img { transition: none; } .tinygallery .tg-item:hover img { transform: none; } } /* --- editor only: the block is atomic, so say so --- */ .tinygallery[contenteditable="false"] { position: relative; } .tinygallery[contenteditable="false"] .tg-item { cursor: default; } .mce-content-body .tinygallery[data-mce-selected] { outline: 2px solid #5aa9e6; outline-offset: 3px; } /* Drag the block to move it. Native html5 dragging inside contenteditable is inconsistent, and tinymce's own block drag reinserts the block through mceInsertContent, which rebuilds it and loses its width, so the gesture is driven by the plugin. These are the only styles it needs. */ .tinygallery[contenteditable="false"] { cursor: grab; } .tg-dropline { position: absolute; height: 2px; background: #5aa9e6; pointer-events: none; z-index: 9; } .tg-dragging, .tg-dragging .tinygallery { cursor: grabbing; } .tg-dragging .tinygallery[data-tg-moving] { opacity: .55; } /* The resize grips: all four corners, because a block floated against an edge can put any one of them somewhere awkward to reach. One pseudo element covering the block, painting four marks as background layers, rather than four real nodes. The layout rules above count children to decide how to lay the mosaic out, so adding any would quietly change what every gallery looks like. It never takes the pointer - the plugin hit-tests the corners itself and sets the cursor from the body. */ .tinygallery[contenteditable="false"]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#5aa9e6, #5aa9e6), linear-gradient(#5aa9e6, #5aa9e6), linear-gradient(#5aa9e6, #5aa9e6), linear-gradient(#5aa9e6, #5aa9e6); background-size: 12px 12px; background-position: left top, right top, left bottom, right bottom; background-repeat: no-repeat; opacity: 0; transition: opacity .12s ease-out; } .tinygallery[contenteditable="false"]:hover::after, .mce-content-body .tinygallery[data-mce-selected]::after { opacity: 1; } /* no transitions mid-drag, the width is already following the pointer */ .tg-resizing .tinygallery::after { opacity: 1; transition: none; } .tg-resizing .tinygallery .tg-item img { transition: none; } /* which way the corner under the pointer pulls. On the body, so nothing is written to the block itself and nothing can reach the stored html. */ .tg-nwse .tinygallery[contenteditable="false"] { cursor: nwse-resize; } .tg-nesw .tinygallery[contenteditable="false"] { cursor: nesw-resize; }