/* ========================================================================== One Folder Gallery for OneDrive — front-end styles Every visual decision below is a CSS custom property with a neutral default, written as var(--token, default) at the place it is used. No defaults are declared on a selector, so a theme can set any token on :root, on body, or on a wrapper around one gallery, and it wins without having to out-specify this file. Scoping: the shortcode accepts class="my-gallery", which lands on the gallery wrapper. Set tokens on .my-gallery to restyle one gallery only. The lightbox is an exception: the script attaches it to , outside every wrapper, so its tokens must be set globally (:root or body). Tokens ------ Album tiles --onefg-album-min 200px minimum tile width --onefg-album-gap 16px gap between tiles --onefg-album-ratio 1 / 1 aspect ratio of the cover image --onefg-album-radius 8px corner radius of the cover image --onefg-album-cover-bg #f0f0f0 behind a cover that is loading --onefg-album-cover-fit cover cover | contain --onefg-album-empty-bg (stripes) album without a cover photo --onefg-album-hover-opacity .85 cover opacity on hover/focus --onefg-album-card-bg transparent tile background --onefg-album-card-border 0 tile border, e.g. 1px solid #ddd --onefg-album-card-radius 0 tile corner radius --onefg-album-card-padding 0 space inside the tile --onefg-album-card-shadow none tile shadow --onefg-album-text-align left text alignment inside the tile --onefg-album-name-gap .5rem space between cover and name --onefg-album-name-size inherit name font size --onefg-album-name-weight 600 name font weight --onefg-album-name-family inherit name font family --onefg-album-name-color inherit name colour --onefg-album-count-size .85em photo count font size --onefg-album-count-color inherit photo count colour --onefg-album-count-opacity .7 photo count opacity --onefg-album-grid-margin 0 0 1.5rem space below the album grid Photo grid --onefg-cols 3 columns (set by the shortcode) --onefg-cols-mobile 2 columns below the breakpoint --onefg-gap 8px gap between photos --onefg-photo-radius 4px photo corner radius --onefg-photo-ratio 1 photo aspect ratio, grid layout --onefg-photo-fit cover cover | contain --onefg-photo-bg (shimmer) behind a photo that is loading --onefg-photo-hover-scale 1.06 zoom factor on hover --onefg-row-height 220px row height, justified layout --onefg-row-height-mobile 150px row height below the breakpoint Layouts The grid carries the class onefg-layout-: grid, justified or masonry, or one a plugin added through the onefg_gallery_layouts filter. Each photo carries its own shape in --onefg-ratio, set from the pixel size Microsoft reported, which is what lets justified and masonry work without any JavaScript. Style a layout of your own on its class; there is no need to touch the rules below. Shared --onefg-transition .2s ease duration/easing of transitions --onefg-focus-color currentColor keyboard focus ring colour --onefg-focus-width 2px focus ring thickness --onefg-focus-offset 3px focus ring distance Messages and loader --onefg-notice-color #555 "no albums" / "not connected" --onefg-notice-style italic font style of those notices --onefg-error-color #c42b1c error text and border --onefg-error-bg #fde7e9 error background --onefg-error-radius 4px error corner radius --onefg-spinner-size 40px loading spinner size --onefg-spinner-color #0078d4 spinner arc colour --onefg-spinner-track #ddd spinner track colour Lightbox (set globally, not per gallery) --onefg-lightbox-bg rgba(0,0,0,.92) backdrop --onefg-lightbox-z 99999 stacking order --onefg-lightbox-max-width 92vw photo max width --onefg-lightbox-max-height 84vh photo max height --onefg-lightbox-radius 4px photo corner radius --onefg-lightbox-shadow 0 4px 32px ... photo shadow --onefg-lightbox-control-color #fff arrow/close colour --onefg-lightbox-control-bg rgba(0,0,0,.4) arrow background --onefg-lightbox-control-bg-hover rgba(0,0,0,.7) arrow background, hover --onefg-lightbox-caption-color #ccc caption colour ========================================================================== */ .onefg-notice { color: var(--onefg-notice-color, #555); font-style: var(--onefg-notice-style, italic); } .onefg-hint { margin-top: .75rem; font-size: .9em; } .onefg-error { color: var(--onefg-error-color, #c42b1c); background: var(--onefg-error-bg, #fde7e9); border-left: 4px solid var(--onefg-error-color, #c42b1c); padding: .75rem 1rem; border-radius: var(--onefg-error-radius, 4px); } /* ========================================================================== Album tiles ========================================================================== */ .onefg-album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--onefg-album-min, 200px), 1fr)); gap: var(--onefg-album-gap, 16px); list-style: none; margin: var(--onefg-album-grid-margin, 0 0 1.5rem); padding: 0; } .onefg-album-item { margin: 0; } .onefg-album-btn { display: flex; flex-direction: column; width: 100%; height: 100%; padding: var(--onefg-album-card-padding, 0); border: var(--onefg-album-card-border, 0); border-radius: var(--onefg-album-card-radius, 0); background: var(--onefg-album-card-bg, transparent); box-shadow: var(--onefg-album-card-shadow, none); text-align: var(--onefg-album-text-align, left); cursor: pointer; font: inherit; color: inherit; } .onefg-album-cover { display: block; width: 100%; aspect-ratio: var(--onefg-album-ratio, 1 / 1); object-fit: var(--onefg-album-cover-fit, cover); border-radius: var(--onefg-album-radius, 8px); background: var(--onefg-album-cover-bg, #f0f0f0); transition: opacity var(--onefg-transition, .2s ease); } .onefg-album-cover--empty { background: var( --onefg-album-empty-bg, repeating-linear-gradient(45deg, #f2f2f2, #f2f2f2 10px, #e9e9e9 10px, #e9e9e9 20px) ); } .onefg-album-btn:hover .onefg-album-cover, .onefg-album-btn:focus-visible .onefg-album-cover { opacity: var(--onefg-album-hover-opacity, .85); } .onefg-album-btn:focus-visible { outline: var(--onefg-focus-width, 2px) solid var(--onefg-focus-color, currentColor); outline-offset: var(--onefg-focus-offset, 3px); } .onefg-album-name { margin-top: var(--onefg-album-name-gap, .5rem); font-family: var(--onefg-album-name-family, inherit); font-size: var(--onefg-album-name-size, inherit); font-weight: var(--onefg-album-name-weight, 600); color: var(--onefg-album-name-color, inherit); line-height: 1.3; word-break: break-word; } .onefg-album-count { font-size: var(--onefg-album-count-size, .85em); color: var(--onefg-album-count-color, inherit); opacity: var(--onefg-album-count-opacity, .7); } .onefg-album-btn--active .onefg-album-name { text-decoration: underline; } /* ========================================================================== Loader ========================================================================== */ .onefg-ajax-loader { display: flex; justify-content: center; padding: 2rem 0; } .onefg-spinner { width: var(--onefg-spinner-size, 40px); height: var(--onefg-spinner-size, 40px); border: 4px solid var(--onefg-spinner-track, #ddd); border-top-color: var(--onefg-spinner-color, #0078d4); border-radius: 50%; animation: onefg-spin .7s linear infinite; } @keyframes onefg-spin { to { transform: rotate(360deg); } } /* ========================================================================== Photo grid ========================================================================== */ .onefg-gallery { display: grid; grid-template-columns: repeat(var(--onefg-cols, 3), 1fr); gap: var(--onefg-gap, 8px); } .onefg-photo-item { aspect-ratio: var(--onefg-photo-ratio, 1); overflow: hidden; border-radius: var(--onefg-photo-radius, 4px); cursor: pointer; background: var( --onefg-photo-bg, linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%) ); background-size: 200% 100%; animation: onefg-shimmer 1.4s infinite; } @keyframes onefg-shimmer { to { background-position: -200% 0; } } .onefg-photo-item img { width: 100%; height: 100%; object-fit: var(--onefg-photo-fit, cover); display: block; transition: transform var(--onefg-transition, .2s ease); } .onefg-photo-item:hover img { transform: scale(var(--onefg-photo-hover-scale, 1.06)); } /* -------------------------------------------------------------------------- Layout: justified rows Rows of equal height whose photos keep their own proportions, the way a contact sheet reads. Each photo asks for a width proportional to its shape and then flexbox stretches the row to the full width, so the crop is a few pixels rather than a square. The ::after rule stops a short last row from blowing its photos up to full width. -------------------------------------------------------------------------- */ .onefg-gallery.onefg-layout-justified { display: flex; flex-wrap: wrap; gap: var(--onefg-gap, 8px); } .onefg-gallery.onefg-layout-justified .onefg-photo-item { aspect-ratio: auto; height: var(--onefg-row-height, 220px); flex-grow: var(--onefg-ratio, 1); flex-basis: calc(var(--onefg-row-height, 220px) * var(--onefg-ratio, 1)); } .onefg-gallery.onefg-layout-justified::after { content: ""; flex-grow: 999999; } /* -------------------------------------------------------------------------- Layout: masonry CSS columns, so nothing is measured in the browser and nothing jumps after the images load. Note that columns fill top to bottom: photos read down each column, not across the row. -------------------------------------------------------------------------- */ .onefg-gallery.onefg-layout-masonry { display: block; column-count: var(--onefg-cols, 3); column-gap: var(--onefg-gap, 8px); } .onefg-gallery.onefg-layout-masonry .onefg-photo-item { aspect-ratio: var(--onefg-ratio, 1); break-inside: avoid; margin-bottom: var(--onefg-gap, 8px); } /* Responsive */ @media (max-width: 600px) { .onefg-gallery { grid-template-columns: repeat(var(--onefg-cols-mobile, 2), 1fr); } .onefg-gallery.onefg-layout-masonry { column-count: var(--onefg-cols-mobile, 2); } .onefg-gallery.onefg-layout-justified .onefg-photo-item { height: var(--onefg-row-height-mobile, 150px); flex-basis: calc(var(--onefg-row-height-mobile, 150px) * var(--onefg-ratio, 1)); } } /* ========================================================================== Lightbox ========================================================================== */ .onefg-lightbox { position: fixed; inset: 0; background: var(--onefg-lightbox-bg, rgba(0, 0, 0, .92)); z-index: var(--onefg-lightbox-z, 99999); display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 1rem; } .onefg-lightbox[hidden] { display: none; } .onefg-lightbox img { max-width: var(--onefg-lightbox-max-width, 92vw); max-height: var(--onefg-lightbox-max-height, 84vh); object-fit: contain; border-radius: var(--onefg-lightbox-radius, 4px); box-shadow: var(--onefg-lightbox-shadow, 0 4px 32px rgba(0, 0, 0, .6)); } .onefg-lightbox-close { position: absolute; top: 1rem; right: 1.5rem; background: none; border: none; color: var(--onefg-lightbox-control-color, #fff); font-size: 2.25rem; line-height: 1; cursor: pointer; opacity: .8; transition: opacity var(--onefg-transition, .2s ease); } .onefg-lightbox-close:hover { opacity: 1; } .onefg-lightbox-prev, .onefg-lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: var(--onefg-lightbox-control-bg, rgba(0, 0, 0, .4)); border: none; color: var(--onefg-lightbox-control-color, #fff); font-size: 2.5rem; line-height: 1; padding: .5rem .9rem; cursor: pointer; border-radius: var(--onefg-lightbox-radius, 4px); transition: background var(--onefg-transition, .2s ease); } .onefg-lightbox-prev { left: 1rem; } .onefg-lightbox-next { right: 1rem; } .onefg-lightbox-prev:hover, .onefg-lightbox-next:hover { background: var(--onefg-lightbox-control-bg-hover, rgba(0, 0, 0, .7)); } .onefg-lightbox-close:focus-visible, .onefg-lightbox-prev:focus-visible, .onefg-lightbox-next:focus-visible { outline: var(--onefg-focus-width, 2px) solid var(--onefg-lightbox-control-color, #fff); outline-offset: var(--onefg-focus-offset, 3px); } #onefg-lightbox-caption { color: var(--onefg-lightbox-caption-color, #ccc); margin-top: .75rem; font-size: .9rem; max-width: 600px; text-align: center; } /* ========================================================================== Motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { .onefg-photo-item { animation: none; } .onefg-spinner { animation-duration: 1.8s; } .onefg-album-cover, .onefg-photo-item img, .onefg-lightbox-close, .onefg-lightbox-prev, .onefg-lightbox-next { transition: none; } .onefg-photo-item:hover img { transform: none; } }