/* Embedded gallery content */ .ipsFigure--embed-hero .ipsFigure__main{ max-height: 220px; } :is(.ipsRichEmbed--gallery-image, .ipsRichEmbed--gallery-image-comment, .ipsRichEmbed--gallery-image-review) .ipsFigure__main{ max-height: 400px; } .cGalleryEmbed_albumStrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 5px; margin-top: .6em; } .cGalleryEmbed_albumStrip .ipsFigure{ margin: 0; } .cGalleryEmbed_albumStrip:not(.cGalleryEmbed_albumStrip_mini) { margin: 0; background: var(--i-background_1); padding: 5px; border-radius: var(--i-box--bo-ra); position: relative; } .ipsFigure ~ .cGalleryEmbed_albumStrip:not(.cGalleryEmbed_albumStrip_mini){ margin: -30px 15px 0; } li:not( :last-child ) { margin-bottom: 7px; } /* IMAGE VIEW PAGE */ .cGalleryViewImage { /* display: grid; place-items: center; */ position: relative; } .cGalleryViewImage img[data-role="theImage"], #elGalleryVideo { margin: auto; position: relative; width: auto; height: auto; max-width: 100%; max-height: 100%; } .cGalleryViewImage [data-ipslightbox]{ display: grid; /* place-items: center; */ cursor: zoom-in; height: clamp(300px, 60vh, 800px); } .cGalleryViewImage_controls { margin-inline-start: auto; } /* NOTES */ .cGalleryViewImage:hover .cGalleryNote { opacity: 1; } .cGalleryNote { position: absolute; opacity: 0; } .cGalleryNote_border { border: 1px solid #000; height: 100%; background: rgba(255,255,255,0.0001); } .cGalleryNote_border::after { content: ''; position: absolute; inset: 1px; display: block; border: 1px solid #ccc; } .cGalleryNote_editing .cGalleryNote_border, .cGalleryNote_editing .cGalleryNote_border::after { border-style: dashed; opacity: 1; } .cGalleryNote_editing { opacity: 1 !important; } .cGalleryNote_editing .cGalleryNote_note { opacity: 1 !important; display: block !important; width: 280px; padding: 12px; pointer-events: auto; z-index: 1000; } .cGalleryNote_editing .cGalleryNote_note a { color: #fff; } .cGalleryNote_editing .cGalleryNote_note textarea { outline: 1px solid currentColor; outline-offset: 0px; padding: 1em; } .cGalleryNote_note { width: max-content; max-width: 250px; position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); background: hsl(0 0% 0% / .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-weight: 600; font-size: .9em; border-radius: 5px; pointer-events: none; padding: 10px; } .cGalleryNote_delete { position: absolute; top: -10px; inset-inline-end: -10px; width: 1.5em; height: 1.5em; display: grid; place-content: center; border-radius: 50%; background: #000; border: 1px solid currentColor; color: #fff; font-size: 17px; } /* jQuery resizable styles */ .ui-resizable-handle { position: absolute; font-size: 0.1px; display: block; } .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px; } .ui-icon-gripsmall-diagonal-se { background: url( "{resource="resizable.png" inCss="true" app="core" location="global" inCss="true"}" ); } .ui-draggable { cursor: move;} .cGallerySearchAlbumThumbs, .cGalleryManagedAlbumThumbs { display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); } /* Restrict thumbs in Activity Stream to 20 */ .cGallerySearchAlbumThumbs li:nth-child(20) ~ *{ display: none; } .cGalleryManagedAlbumThumbs{ margin-top: 10px; } .cGalleryAlbums_recent { --_thumb: 100px; --_gap: 4px; padding-inline-start: calc(var(--_thumb) * 2 + var(--_gap)); display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--_thumb), 1fr)); gap: var(--_gap); height: calc(var(--_thumb) * 2 + var(--_gap)); position: relative; overflow: hidden; } .cGalleryAlbums_recent > li { height: var(--_thumb); position: relative; } .cGalleryAlbums_recent .ipsFigure{ height: 100%; } .cGalleryAlbums_recent .ipsFigure__footer{ justify-self: end; padding: .5em; } .cGalleryAlbums_recent .ipsFigure__footer::before{ display: none; } .cGalleryAlbums_recent > li:first-child { width: calc(var(--_thumb) * 2); height: calc(var(--_thumb) * 2); overflow: hidden; position: absolute; inset-inline-start: 0; } .cGalleryAlbums_recent--small { --_thumb: 40px; } /* Restyle the above for the sidebar */ .ipsWidget--vertical .cGalleryAlbums_recent{ padding: 0; height: auto; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); } .ipsWidget--vertical .cGalleryAlbums_recent > li:first-child{ width: auto; height: auto; position: static; } .ipsWidget--vertical .cGalleryAlbums_recent > li{ height: auto; } /* Since results are unlimited, display a maximum of 12 using css */ .ipsWidget--vertical .cGalleryAlbums_recent > li:nth-child(12) ~ li{ display: none; } .ipsWidget--vertical .cGalleryAlbums_recent .ipsFigure__main { aspect-ratio: 1; } /* General style which creates the square thumb container */ .cGalleryThumb { max-width: 170px; max-height: 170px; } .cGalleryAlbumThumb { width: 280px; height: 235px; } @media screen and (max-width: 767px) { .ipsApp .cGalleryAlbums_recent { margin-bottom: 3px; } .cGalleryAlbums_recent { --_thumb: 40px; } .cGalleryAlbums_recent + .ipsList { padding-inline-start: 4px; } } /* v5 code */ /* Feature image on index */ .ipsCarousel--gallery-featured{ height: clamp(480px, 80vh, 610px); } /* Larger icons for album list view */ .ipsData--gallery-row-list{ --i-data--icon-width: 80px; } /* Faded masonry for Album listing */ .ipsMasonry--album-summary{ max-height: 300px; overflow: hidden; mask-image: linear-gradient(to bottom, hsl(0 0% 0%) 200px, hsl(0 0% 0% / 0)); } /* Image view */ .elGalleryHeader { position: relative; z-index: 1; /* Ensure notes overlap the navigation strip */ background-color: oklch(25% calc(clamp(0, 100 - var(--i-base-c), 1) * 5%) var(--i-base-h)); border-radius: var(--i-box--bo-ra) var(--i-box--bo-ra) 0 0; color: hsl(0 0% 100%); } .ipsCarousel--gallery-image-thumbs{ --i-carousel--pa: 2em 1.5em; --_height: 100px; gap: 1.5em; } .ipsCarousel--gallery-image-thumbs > :first-child{ margin-inline-start: auto; } .ipsCarousel--gallery-image-thumbs > :last-child{ margin-inline-end: auto; } .ipsCarousel--gallery-image-thumbs [data-active] .ipsFigure{ outline: 1px solid currentColor; outline-offset: 3px; }]]> div { width: 100%; height: 100%; margin: 0 auto; border: 1px solid var(--i-background_3); } .cProfileAlbum_image { display: block; position: relative; max-width: 100%; height: 100%; background-color: var(--i-background_dark); background-size: cover; background-position: 50%; background-repeat: no-repeat; overflow: hidden; } .cProfileAlbum_image img { display: none; } .cProfileAlbum .ipsTitle { font-size: var(--i-font-size_1); text-align: start; display: block; padding: 7px; overflow: hidden; text-overflow: ellipsis; top: 0px; background: rgba(0,0,0,0.5); color: #fff; } ]]> ul { width: min(100% - 30px, 450px); } .cGalleryChooseAlbum_listItem { display: block; background: var(--i-background_2); padding: 1.4em; padding-inline-end: 40px; margin-bottom: 1em; border-radius: 6px; position: relative; } .cGalleryChooseAlbum_listItem[data-disabled] { opacity: .7; cursor: not-allowed; } .cGalleryChooseAlbum_listItem[data-disabled] .ipsTitle { color: var(--i-color_soft); } .cGalleryChooseAlbum_listItem:not([data-disabled])::after { font-family: var(--i-font-awesome); -webkit-font-smoothing: antialiased; text-rendering: auto; font-weight: 900; content: '\f061'; position: absolute; inset-inline-end: 1.2em; top: 50%; font-size: 1.4em; transform: translateY(-50%); color: var(--i-color_soft); } .cGalleryChooseAlbum_listItem:not([data-disabled]):hover { background: var(--i-background_3); } .cGalleryChooseAlbum_listItem .ipsTitle { font-size: var(--i-font-size_2); } /* Dialog: Choose Category */ .cGallerySubmit_albumChoice { padding: 5em 1em; } .cGallerySubmit_albumChoice .ipsSelectTree { margin: auto; } /* Dialog: Choose Existing Album */ #elGallerySubmit_albumChooser{ max-height: 60vh; display: flex; flex-direction: column; gap: 1em; padding: 0 2em 2em 2em; } #elGallerySubmit_albumChooser > li{ position: relative; flex: 0 0 auto; } #elGallerySubmit_albumChooser [type="radio"]{ position: absolute; opacity: 0; } #elGallerySubmit_albumChooser > li > div { background: var(--i-background_2); padding: 1.4em; border-radius: min(var(--i-design-radius), 6px); } #elGallerySubmit_albumChooser > li > div:hover { background: var(--i-background_3); } #elGallerySubmit_albumChooser label{ position: absolute; inset: 0; cursor: pointer; } #elGallerySubmit_albumChooser > li > [type="radio"]:checked + div { background: var(--i-primary); color: var(--i-primary-contrast); } #elGallerySubmit_albumChooser > li > [type="radio"]:checked + div .i-color_soft { color: inherit; opacity: 0.7; } /* Choose Existing Album */ [data-role="existingAlbumForm"]{ display: contents; } .cGalleryChooseAlbum{ flex: 1 1 100%; display: flex; flex-direction: column; } .cGalleryDialog_container { display: contents; } .cGalleryDialog_imageForm { flex: 1 1 auto; overflow: auto; } .cGallerySubmit_uploadImages .ipsAttachment_dropZone:not(.ipsDragging) { background: var(--i-background_2); border-color: var(--i-background_3); } /* Style the uploader */ .cGallerySubmit_uploadImages .ipsAttachment_dropZone{ display: grid; place-content: center; text-align: center; gap: 0; } .cGallerySubmit_uploadImages .ipsUploader__icon { font-size: 3em; margin-bottom: 15px; } .cGallerySubmit_uploadImages .fa-cloud-upload::before { content: "\f055"; } #elGallerySubmit_imageUploader .ipsAttachment_dropZone { cursor: pointer; } .cGalleryDialog_uploadStep .ipsUploader[style*="block"]{ display: flex !important; gap: var(--i-sp_3); } .cGalleryDialog_uploadStep #elGallerySubmit_imageUploader .ipsAttachment_dropZone { flex: 1 1 200px; align-self: start; height: 200px; margin-bottom: 2em; } #elGallerySubmit_imageUploader a[data-action="uploadFile"] { display: none; } #elGallerySubmit_imageUploader .moxie-shim.moxie-shim-html5, #elGallerySubmit_imageUploader .moxie-shim.moxie-shim-html5 > input[type="file"] { top: 0 !important; left: 0 !important; width: 0.1px !important; height: 0.1px !important; } .cGallerySubmit_uploadImages .ipsAttachment_fileList{ flex: 999 1 50%; } /* Media thumbnail upload area */ .cGalleryThumbField .ipsAttachment_dropZoneSmall_info { margin-inline-start: auto !important; } .cGalleryThumbField [data-role="title"] { width: 150px; max-width: 150px; } .cGallerySubmit_fileList:empty{ display: none !important; } .cGallerySubmit_fileList { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1em; padding-bottom: 2em; } .cGallerySubmit_fileList .ipsImageAttach { border: 1px solid var(--i-background_4); background: var(--i-background_2); cursor: move; } .cGallerySubmit_fileList .ipsImageAttach:hover { border-color: var(--i-background_6); } .cGallerySubmit_fileList .ipsImageAttach_thumb{ aspect-ratio: 1; } /* Add move cursor to thumbnail */ .cGallerySubmit_fileList .ipsImageAttach_thumb :is(img, video){ cursor: inherit; } .cGallerySubmit_fileList .ipsImageAttach.cGallerySubmit_activeFile { border-color: var(--i-primary); background: var(--i-primary); } .cGallerySubmit_fileList .ipsImageAttach.cGallerySubmit_activeFile :is(.ipsAttach_title, .cGalleryImageAttach_info){ color: var(--i-primary-contrast); } .cGalleryImageAttach_info { padding-inline-end: 30px; } .cGallerySubmit_fileList .ipsImageAttach.cGallerySubmit_imageSaved::before, .cGallerySubmit_fileList .ipsImageAttach.cGallerySubmit_imageError::before { width: 28px; height: 28px; border-radius: 28px; line-height: 28px; color: #fff; font-family: var(--i-font-awesome); -webkit-font-smoothing: antialiased; text-rendering: auto; font-weight: 900; font-size: 14px; position: absolute; bottom: 1em; inset-inline-end: 1em; text-align: center; } .cGallerySubmit_fileList .ipsImageAttach.cGallerySubmit_imageSaved::before { content: '\f00c'; background: #558B2F; } .cGallerySubmit_fileList .ipsImageAttach.cGallerySubmit_imageError:not(.cGallerySubmit_activeFile) { border-color: #a72f35; } .cGallerySubmit_fileList .ipsImageAttach.cGallerySubmit_imageError::before { content: '\f071'; background: #a72f35; } @media screen and (max-width: 767px) { /* Image details area on mobile is fixed */ .cGallerySubmit_imageDetails { position: fixed; inset: 0; z-index: 10; } }]]> .ipsCarousel--gallery-widget-image-feed .ipsFigure__main{ aspect-ratio: 4/3; }