/* Embedded gallery content */ .ipsImageBlock--embed-hero .ipsImageBlock__main{ max-height: 220px; } .ipsRichEmbed--gallery-image-comment .ipsImageBlock__main, .ipsRichEmbed--gallery-image-review .ipsImageBlock__main{ max-height: 300px; } .cGalleryEmbed_albumStrip { display: flex; justify-content: center; gap: 5px; } .cGalleryEmbed_albumStrip li { flex: 0 1 25%; } .cGalleryEmbed_albumStrip:not( .cGalleryEmbed_albumStrip_mini ) { margin: 0; background: rgb(var(--theme-area_background_reset)); padding: 5px; border-radius: var(--box--radius); position: relative; } .ipsImageBlock ~ .cGalleryEmbed_albumStrip:not( .cGalleryEmbed_albumStrip_mini ){ margin: -30px 15px 0; } .ipsList_inline { margin-top: 10px; } .elGalleryImage .ipsButton.ipsButton_link, .elGalleryImage .ipsButton.ipsButton_primary { margin-inline-start: 0; } /* Follow and promote buttons */ .cGalleryControls .ipsFollow .ipsCommentCount{ position: relative; transform: none; top: auto; } .cGalleryControls .ipsFollow .ipsCommentCount{ margin-inline-end: 0 !important; } .cGalleryControls .ipsPromote.ipsButton_verySmall, .cGalleryControls .ipsFollow.ipsButton_verySmall > :first-child{ padding-left: 15px; padding-right: 15px; } /* Lightbox */ #cLightbox { overflow: auto; } .cGalleryLightbox .elGalleryImage { position: relative; top: auto; left: auto; right: auto; bottom: auto; width: 100%; } .cGalleryLightbox { top: 0; left: 0; right: 0; bottom: 0; display: block; } .cGalleryLightbox_inner { position: relative; display: block; } .cGalleryLightbox_info { width: 100%; min-width: 0; overflow: visible; } .cGalleryLightbox_info a.ipsReact_reaction:after { width: 60px; height: 60px; } /* Clear floated Follow button in Managed Content */ .ipsDataItem_size6 [data-followapp="gallery"]{ overflow: hidden; } }]]> .ipsRating { float: none; } .elGalleryImageNav { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; } .elGalleryImageNav a { color: #fff; font-size: 60px; font-size: clamp(30px, 5vw, 60px); padding: 0 15px; opacity: 0.2; transition: all 0.2s ease-in-out; z-index: 100; pointer-events: auto; } .elGalleryImage:hover .elGalleryImageNav a { opacity: 1; background: rgba(0,0,0,0.2); } /* ---------------- - Carousel ---------------- */ .cGalleryCarousel{ margin: 0; padding: 0; list-style: none; --carousel--show: 1; --carousel--scroll: var(--carousel--show); --gap: 10px; --carousel--pull: 0px; display: flex; gap: var(--gap); overflow-x: scroll; overscroll-behavior-x: contain; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; } .cGalleryCarousel::-webkit-scrollbar { -webkit-appearance: none; height: 0px; } /* Carousel items */ .cGalleryCarousel > *{ flex: 0 0 0; flex-basis: calc( (100% - (var(--gap) * (var(--carousel--show) - 1) )) / var(--carousel--show) ); scroll-snap-align: start; } .cGalleryCarousel:focus-within > *:not(:focus-within){ scroll-snap-align: none; } /* Navigation buttons */ .cGalleryCarouselNav{ display: flex; justify-content: center; gap: 6px; } .cGalleryCarouselNav[hidden]{ display: none !important; } .cGalleryCarousel + .cGalleryCarouselNav, .cGalleryCarouselNav + .cGalleryCarousel{ margin-top: var(--sp-2); } .cGalleryCarouselNav__button{ -webkit-appearance: none; appearance: none; cursor: pointer; display: flex; justify-content: center; align-items: center; min-height: 44px; min-width: 44px; border-radius: 6px; background: none; color: inherit; border: 2px solid currentColor; touch-action: manipulation; opacity: .5; } .cGalleryCarouselNav__button svg{ fill: currentColor; } @media (hover: hover){ .cGalleryCarouselNav__button:hover{ opacity: 1; } } @media (min-width: 768px){ .cGalleryCarouselNav--overlay{ color: #fff; position: absolute; top: 50%; transform: translateY(-50%); left: 1rem; right: 1rem; justify-content: space-between; pointer-events: none; margin-top: 0 !important; } .cGalleryCarouselNav--overlay button{ pointer-events: auto; } } /* ---------------- - Wallpaper carousel ---------------- */ .ipsColumns--gallery-featured-carousel{ --carousel-height: clamp(480px, 80vh, 610px); } .cGalleryCarousel--wallpaper{ --carousel--show: 1; --gap: 3px; padding-bottom: 0; max-height: 90vh; height: var(--carousel-height, auto); } .cGalleryCarousel--wallpaper .ipsImageBlock{ height: 100%; } .cGalleryCarousel--wallpaper .ipsImageBlock__footer{ padding: 1.5em; } /* ---------------- - Image view: thumbnail carousel ---------------- */ .cGalleryImageThumbs{ position: relative; background: rgb(var(--theme-area_background_dark)) linear-gradient(rgba(0,0,0,.3) 0% 100%); box-shadow: inset rgba(255,255,255,.1) 0px 1px 0px; border-radius: 0 0 var(--box--radius) var(--box--radius); padding: 20px 44px; } .cGalleryImageThumbs .cGalleryCarousel{ --gap: 15px; padding: 4px; scroll-snap-type: none; } .cGalleryImageThumbs .cGalleryCarousel__item{ flex-basis: auto; border-radius: 4px; outline: 1px solid rgb(var(--theme-area_background), .001); /* Color is needed to prevent thumbnails from jumping on hover in Safari */ outline-offset: 2px; } .cGalleryImageThumbs .cGalleryCarousel > *:first-child{ margin-inline-start: auto; } .cGalleryImageThumbs .cGalleryCarousel > *:last-child{ margin-inline-end: auto; } .cGalleryImageThumbs .ipsImageBlock__main > *{ height: 80px; } .cGalleryImageThumbs .cGalleryCarousel__item--active{ outline-color: rgb(var(--theme-area_background), 1); outline-width: 2px; } .cGalleryImageThumbs .cGalleryCarousel__item:not(.cGalleryCarousel__item--active):hover{ outline-color: rgb(var(--theme-area_background), .5); } .cGalleryImageThumbs .cGalleryCarouselNav{ color: #fff; left: 0; right: 0; } .cGalleryImageThumbs .cGalleryCarouselNav__button{ border-color: transparent; } @media (max-width: 767px){ .cGalleryImageThumbs{ padding-left: 0; padding-right: 0; } .cGalleryImageThumbs .cGalleryCarousel{ padding-left: 20px; padding-right: 20px; } /* Remove arrow buttons on touch devices */ @media (hover: none){ .cGalleryImageThumbs .cGalleryCarousel + .cGalleryCarouselNav{ display: none; } } } /* ---------------- - Masonry ---------------- */ .iGalleryMasonry{ margin: 0; padding: 0; list-style: none; --ratio: 16/9; --gap: 12px; --basis: clamp(180px, 30vw, 240px); --basis: clamp(120px, 25%, 240px); display: flex; flex-wrap: wrap; gap: var(--gap); } .iGalleryMasonry--mini{ --basis: 70px; } .iGalleryMasonry__item, .iGalleryMasonry::after{ flex-grow: calc(10 * (var(--ratio))); flex-shrink: 1; flex-basis: calc(var(--ratio) * var(--basis)); display: grid; border-radius: 7px; position: relative; } .iGalleryMasonry__item:has(:checked){ outline: 2px solid rgb(var(--theme-brand_primary)); outline-offset: 2px; } .iGalleryMasonry::after{ content: ''; flex-basis: 50%; align-self: flex-end; } .iGalleryMasonry__item > *{ grid-area: 1/-1; position: relative; } .iGalleryMasonry__item::before{ content: ''; padding-top: calc(100% / (var(--ratio))); grid-area: 1/-1; } /* Ensure media in masonry grids follow their ratio */ .iGalleryMasonry .ipsImageBlock__main img, .iGalleryMasonry .ipsImageBlock__main video, .iGalleryMasonry .ipsImageBlock__main iframe{ position: absolute; width: 100%; height: 100%; border-radius: inherit; } /* ---------------- - Latest comments sidebar ---------------- */ @media (min-width: 980px){ .ipsWidget--gallery-comments{ height: var(--carousel-height, 610px); } .cGalleryLatestComments{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; } } .cGalleryLatestComments > ul{ margin: 0; padding: 0; list-style: none; } .cGalleryLatestComments__item{ display: flex; padding: 1em; border-bottom: 1px solid rgba( var(--theme-text_light), 0.15 ); } .cGalleryLatestComments__thumb{ flex: 0 0 72px; margin-inline-end: 1em; } .cGalleryLatestComments__thumb .ipsImageBlock__main{ height: 72px; } .cGalleryLatestComments__text{ flex: 1 1 100%; align-self: center; } .cGalleryLatestComments .ipsType_richText{ display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.5em; font-weight: 450; } /* ---------------- - Categories ---------------- */ .cGalleryCats{ margin: 0; padding: 0; list-style: none; display: grid; gap: 35px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 20%, 280px), 1fr)); text-align: center; padding-bottom: 30px; } .cGalleryCat .ipsImageBlock { margin-bottom: 15px; } .cGalleryCat .ipsImageBlock__main{ aspect-ratio: 4/3; } @supports not (aspect-ratio: 1){ .cGalleryCat .ipsImageBlock__main{ height: 250px; } } .cGalleryCats__name { margin: 0; color: rgb( var(--theme-text_dark) ); font-size: {fontsize="large"}; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .cGalleryCats__name .ipsItemStatus:not( .ipsItemStatus_large ){ font-size: 10px; } .cGalleryCats__stats { margin: 0; margin-top: 5px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 20px; font-size: {fontsize="x_small"}; color: rgb(var(--theme-text_light)); } .cGalleryCats .ipsType_richText{ margin-top: .5em; } /* Align text/stats to the start instead of centered. This makes categories with descriptions more visually pleasing. */ .cGalleryCats--start{ text-align: start; } .cGalleryCats--start .cGalleryCats__stats{ justify-content: flex-start; } /* ALBUM LIST IN A CATEGORY */ .cGalleryAlbums > li:not( :last-child ) { margin-bottom: 7px; } html[dir="ltr"] .cGalleryEvents .ipsDataList .ipsDataItem, html[dir="ltr"] .cGalleryEvents .ipsDataList .ipsDataItem_icon { padding-left: 0 !important; } html[dir="rtl"] .cGalleryEvents .ipsDataList .ipsDataItem, html[dir="rtl"] .cGalleryEvents .ipsDataList .ipsDataItem_icon { padding-right: 0 !important; } .cGalleryImageItem.cGalleryImageItem_selected { background-color: rgb( var(--theme-selected) ); } .ipsDataItem.cGalleryImageItem > *{ vertical-align: middle; } /* IMAGE VIEW PAGE */ .cGalleryViewImage { display: grid; place-items: center; position: relative; } .cGalleryViewImage img[data-role="theImage"], #elGalleryVideo { position: relative; max-width: 100%; max-height: clamp(300px, 60vh, 800px); display: block; } .cGalleryViewImage [data-ipslightbox]{ cursor: zoom-in; } .cGalleryImageTitle { color: #fff; text-align: left; z-index: 100; pointer-events: auto; } .cGalleryImageTitle .ipsType_pageTitle, .cGalleryImageTitle .ipsType_pageTitle a, .cGalleryImageTitle .ipsType_minorHeading, .cGalleryImageTitle a { color: inherit; font-weight: inherit; } .cGalleryImageTitle .ipsType_pageTitle { font-size: {fontsize="x_large"}; } .cGalleryCreditInfo { text-align: left; color: #fff; text-shadow: 2px 2px 5px #000; pointer-events: auto; } .cGalleryViewImage_controls { z-index: 100; pointer-events: auto; } .cGalleryLightbox [data-role="imageComments"] .ipsTabs_panels.ipsTabs_contained .ipsTabs_panel { padding: 0px; } [data-role="imageComments"] .ipsTabs_panel .ipsRecommendedComments { margin: -15px 0px 5px 0px; } .elGalleryImage .ipsButton.ipsButton_link { background: rgba(0,0,0,0.4) !important; color: #fff; border-color: transparent !important; margin-inline-start: 3px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .elGalleryImage .ipsButton.ipsButton_primary { background: #fff !important; color: #000; border: 1px solid #fff !important; margin-inline-start: 3px; } .elGalleryImage .ipsPromote .ipsPromote_icon { background: transparent; } .cGalleryExif_data { margin: 0; padding: 0; list-style: none; } .cGalleryExif_data li { display: flex; align-items: center; flex-wrap: wrap; gap: .5em; padding: 1em 0; border-bottom: 1px solid rgba(var(--theme-area_background_dark), .1); } .cGalleryExif_data li:last-child{ border-bottom-width: 0; } .cGalleryExif_data__icon{ flex: 0 0 1.6em; color: rgb(var(--theme-text_light)); text-align: center; } .cGalleryExif_data__label{ font-weight: 500; color: rgb(var(--theme-text_dark)); } .cGalleryExif_data__value{ margin-inline-start: auto; color: rgb(var(--theme-text_light)); text-align: end; } .cGalleryExif .cGalleryExif_f { font-family: 'Palatino', 'Times New Roman'; font-style: italic; font-weight: bold; } /* NOTES */ .cGalleryViewImage_addNote { cursor: crosshair; } .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 { position: absolute; left: 1px; right: 1px; top: 1px; bottom: 1px; content: ''; 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; max-width: 220px; width: 220px; padding: 4px; pointer-events: auto; z-index: 1000; } .cGalleryNote_editing .cGalleryNote_note ul { text-align: start; margin-top: 5px; } .cGalleryNote_editing .cGalleryNote_note a { color: #fff; } .cGalleryNote_editing .cGalleryNote_note textarea { font-size: {fontsize="x_small"}; color: #000; } .cGalleryNote_note { width: -webkit-max-content; width: -moz-max-content; width: max-content; position: absolute; top: 0; inset-inline-start: 105%; margin-top: 5px; background: #2a2a2a; color: #fff; font-size: {fontsize="x_small"}; border-radius: 2px; pointer-events: none; } .cGalleryNote_note > div { width: 100%; max-width: 200px; padding: 4px 8px; } .cGalleryNote_delete { position: absolute; top: -10px; inset-inline-end: -10px; width: 24px; height: 24px; line-height: 19px; border-radius: 12px; background: #000; border: 1px solid #fff; color: #fff; font-size: 17px; text-align: center; } /* 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" app="core" location="global"}" ); } .ui-draggable { cursor: move;} .cGallerySearchAlbumThumbs, .cGalleryManagedAlbumThumbs { margin: 0; padding: 0; list-style: none; display: flex; gap: 4px; overflow: hidden; width: 100%; } .cGalleryManagedAlbumThumbs{ margin-top: 10px; } .cGallerySearchAlbumThumbs.cGallerySearchExpanded { padding-inline-start: 30px; } .cGallerySearchAlbumThumbs li, .cGalleryManagedAlbumThumbs li { max-width: 35px; max-height: 35px; display: block; } /* Lightbox */ #cLightbox {} #cLightbox .cLightboxBack { background-color: #000; opacity: 1.0; } .cLightboxClose { background-color: #000; color: #fff; font-family: Arial, sans-serif; font-size: 28px; width: 40px; height: 40px; border-radius: 40px; line-height: 40px; text-align: center; position: absolute; top: 10px; inset-inline-end: 10px; z-index: 10; cursor: pointer; } .cGalleryLightbox { position: absolute; top: 20px; left: 20px; right: 20px; bottom: 20px; display: flex; align-items: center; justify-content: center; } .cGalleryLightbox_inner { display: flex; align-items: stretch; background: rgb(var(--theme-area_background_dark)) linear-gradient(rgba(0,0,0,.6) 0% 100%); border-radius: var(--box--radius) var(--box--radius) 0 0; } @media (max-width: 767px){ .cGalleryLightbox_inner, .cGalleryImageThumbs{ margin-left: -10px; margin-right: -10px; border-radius: 0; } } .cGalleryLightbox .cGalleryLightbox_inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: 0px 5px 55px rgba(0,0,0,0.4); margin: 0; } .cGalleryLightbox_image { flex-grow: 1; } .cGalleryLightbox_info { width: 445px; min-width: 445px; overflow-y: auto; } /* Adds smaller margins to staff notes in the lightbox for a neater layout. Important is necessary to overwride utility classes */ .cGalleryLightbox_info .cContentMessage { margin: 5px !important; } .cGalleryImageTopBar, .cGalleryImageBottomBar { position: absolute; left: 0; right: 0; display: flex; flex-wrap: nowrap; justify-content: space-between; pointer-events: auto; } .cGalleryImageBottomBar .ipsList_inline{ margin-inline-start: auto; } .cGalleryImageTopBar { top: 0; align-items: flex-start; padding: 20px 20px 0 20px; } .cGalleryImageBottomBar { bottom: 0; align-items: flex-end; padding: 0 20px 20px 20px; pointer-events: none; } .cGalleryImageBottomBar > *{ pointer-events: auto; } .cGalleryControls { white-space: nowrap; margin-inline-start: auto; } /* Customized styles for comments area inside lightbox */ /* .cGalleryLightbox [data-role="imageComments"] #comments, .cGalleryLightbox [data-role="imageComments"] #reviews { padding: var(--sp-4); } .cGalleryLightbox_info [data-role="noComments"] { display: none; } .cGalleryLightbox_info .ipsComposeArea_dummy { padding: 7px 15px; font-size: {fontsize="medium"}; } .cGalleryLightbox_info .ipsTabs { background: rgb( var(--theme-area_background) ); border-top: 1px solid rgba(0,0,0,0.1); } .cGalleryLightbox_info .ipsTabs_item, .cGalleryLightbox_info .ipsTabs_item:hover { color: rgb( var(--theme-text_color) ); } .cGalleryLightbox_info .cGuestTeaser .ipsGrid_span6 { float: none; width: 100%; } .cGalleryLightbox_info .cGuestTeaser_right { margin-top: 15px; } .cGalleryLightbox_info .cGuestTeaser .ipsType_pageTitle { font-size: {fontsize="x_large"}; } */ /* Increase padding on the comments multi-mod to cater for a lack of .ipsPad */ /*[data-role="imageComments"] #comments > .ipsButtonRow{ margin: 12px; }*/ /* And lightbox comment editor stuff */ /* Todo: remove this when a 'slim' editor variant is available */ /*.cGalleryLightbox_info .ipsToolList.ipsToolList_horizontal .ipsToggle { transform: scale(0.8); } .cGalleryLightbox_info .ipsToolList.ipsToolList_horizontal label { font-size: {fontsize="small"}; } .cGalleryLightbox_info .ipsToolList_horizontal{ justify-content: center; } .cGalleryLightbox_info .ipsToolList_horizontal::after{ display: none; } .cGalleryLightbox_info .ipsToolList_horizontal > li{ margin: 6px; } .cGalleryLightbox_info .ipsToolList_horizontal > li:not(.ipsPos_left){ flex: 1 1 100%; order: 3; } .cGalleryLightbox_info button[type="submit"][accesskey="s"] { width: 100%; margin-top: 10px; } .cGalleryLightbox_info .ipsComposeArea_dropZoneSmall .ipsList_inline > li.ipsPos_right { float: none; } .cGalleryLightbox_info .ipsComposeArea_dropZoneSmall .ipsList_inline > li.ipsPos_right .ipsButton_verySmall { line-height: 22px; margin-top: 7px; padding: 0 10px; } .cGalleryLightbox_info .ipsComposeArea_dropZone .fa-paperclip { font-size: 20px; } .cGalleryLightbox_info .ipsComposeArea_dropZone > div { margin-top: -3px; margin-inline-start: 25px; }*/ .cGalleryNoThumb_full { width: 100%; height: 400px; } .cGalleryNoThumb_full:after { font-size: 50px; } /*.cGalleryLightbox_info .ipsRecommendedComments .ipsComment_recommendedFlag { z-index: 100; } .cGalleryLightbox_info .ipsRecommendedComments .ipsComment_recommendedFlag .ipsResponsive_hidePhone, .cGalleryLightbox_info .ipsRecommendedComments .ipsComment_recommended > .ipsPos_right { display: none; } .cGalleryLightbox_info .ipsRecommendedComments .ipsColumn { display: block !important; } .cGalleryLightbox_info .ipsRecommendedComments .ipsColumn.ipsColumn_narrow { float: left; width: 70px; } .cGalleryLightbox_info .ipsRecommendedComments .ipsComment_header { padding: 0; margin: 0 0 15px 0; } html[dir] .cGalleryLightbox_info .ipsRecommendedComments .ipsComment_recommendedNote { margin-left: 0; margin-right: 0; }*/ /* Full size image lightbox */ #cLightbox[data-fullScreen] .cLightboxClose, #cLightbox[data-fullScreen] .cGalleryLightbox_info { display: none !important; /* Navigating in the lightbox will call elem.show() which sets an inline display: block style we want to ignore */ } #cLightbox[data-fullScreen] .cGalleryLightbox { top: 0; bottom: 0; right: 0; left: 0; } #cLightbox[data-fullScreen] .cGalleryImageFade { transition: none; opacity: 1; } [data-role="toggleFullscreen"]:after { font-family: FontAwesome; content: "\f065"; } #cLightbox[data-fullScreen] [data-role="toggleFullscreen"]:after { content: "\f066"; } /* Comments and reviews on albums */ /* This hides the "x Comments" header since it's already mentioned in the tab */ .ipsTabs_panel .ipsType_sectionHead--galleryFeedbackCount{ display: none; } /* Change the colours of the inline title editing input, when placed inside the lightbox */ .elGalleryImage .ipsType_pageTitle [data-role="editableTitle"]:hover{ background-color: {hextorgb="#fff" opacity="0.4"}; } .elGalleryImage .ipsType_pageTitle input[type='text']{ color: rgb( var(--theme-text_color) ); } /* Space out items in vertical Image Feed widget */ [data-blockid^="app_gallery_imageFeed_"] .cGalleryWidgetList > li + li{ margin-top: 40px; } /* Chrome issue: Fix 0px height image in vertical Image Feed widget */ [data-blockid^="app_gallery_imageFeed_"] .cGalleryWidgetList .ipsImageBlock__main{ display: block; text-align: center; }]]> li { height: 100px; position: relative; } .cGalleryAlbums_recent .ipsImageBlock{ height: 100%; } .cGalleryAlbums_recent .ipsImageBlock__footer{ justify-self: end; padding: .5em; } .cGalleryAlbums_recent .ipsImageBlock__footer::before{ display: none; } .cGalleryAlbums_recent > li:first-child { width: 204px; height: 204px; overflow: hidden; position: absolute; inset-inline-start: 0; } /* Restyle the above for the sidebar */ .ipsWidget_vertical .cGalleryAlbums_recent{ padding: 0 !important; display: flex; flex-wrap: wrap; height: auto; } .ipsWidget_vertical .cGalleryAlbums_recent > li:first-child, .ipsWidget_vertical .cGalleryAlbums_recent > li:first-child a, .ipsWidget_vertical .cGalleryAlbums_recent > li, .ipsWidget_vertical .cGalleryAlbums_recent > li a{ width: auto; height: auto; position: static; } .ipsWidget_vertical .cGalleryAlbums_recent > li{ flex: 0 0 calc(33.3% - 4px); max-width: 120px; /* Used if a widget stretches to 100% of the viewport one it wraps */ } /* 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 > li a::before{ content: ''; display: block; padding-top: 100%; } /* General style which creates the square thumb container */ .cGalleryTrimmedImage { background-color: #333; background-size: cover; background-position: 50%; background-repeat: no-repeat; overflow: hidden; border: .5px solid #333; } .cGalleryTrimmedImage img { display: none; } .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 { height: 134px; padding-inline-start: 138px; grid-template-columns: repeat(auto-fill, minmax(65px, 1fr)); } .cGalleryAlbums_recent > li:first-child { width: 134px; height: 134px; } .cGalleryAlbums_recent > li { height: 65px; } .cGalleryAlbums_recent + ul.ipsList_inline { padding-inline-start: 4px; } }]]> div { width: 100%; height: 100%; margin: 0 auto; border: 1px solid rgba( var(--theme-text_color), 0.08 ); } .cProfileAlbum_image { display: block; position: relative; max-width: 100%; height: 100%; background-color: rgb( var(--theme-area_background_dark) ); background-size: cover; background-position: 50%; background-repeat: no-repeat; overflow: hidden; } .cProfileAlbum_image img { display: none; } .cProfileAlbum .ipsType_sectionHead { font-size: {fontsize="medium"}; text-align: left; display: block; padding: 7px; overflow: hidden; text-overflow: ellipsis; top: 0px; background: rgba(0,0,0,0.5); color: #fff; } ]]> i:first-child { font-size: 70px; } #elGallerySubmit_imageUploader .ipsAttachment_fileList { padding-bottom: 80px; } #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach { margin-right: 0; margin-bottom: 10px !important; height: 260px; width: 100%; } #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach:first-child { margin-left: 0; } #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach:first-child { margin-top: 160px; } #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach .ipsImageAttach_thumb { height: 200px; } .cGallerySubmit_preview { height: 120px } .cGalleryDialog_close { width: 30px; height: 30px; line-height: 30px; border-radius: 30px; font-size: 22px; top: 5px; right: 5px; } .cGalleryDialog_content { top: 65px; } /* Image details area on mobile is fixed */ .cGallerySubmit_imageDetails { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; padding: 15px; box-shadow: rgba(0,0,0,.8) 0 0 90px; } /* Step 1: Choose album */ .cGallerySubmit_albumChoice { margin-top: 0; } .cGallerySubmit_albumChoice > .ipsGrid_span6:first-child { margin-bottom: 30px; } #elGallerySubmit_albumChooser { min-height: none; } /* Step 2: Upload images */ .cGallerySubmit_bottomBar { height: auto; } .cGallerySubmit_bottomBar button[type="submit"] { width: 100%; } /* Info panel */ .cGallerySubmit_strip, .cGallerySubmit_infoForm, .cGallerySubmit_bottomBar, .cGallerySubmit_infoPanel { position: absolute; } html[dir] .cGallerySubmit_strip { top: 0; left: 0; right: 0; width: auto; height: 100px; white-space: nowrap; overflow-y: hidden; } .cGallerySubmit_strip ul { white-space: nowrap; overflow: visible; } .cGallerySubmit_strip li { white-space: nowrap; margin-bottom: 0; margin-right: 15px; display: inline-block; } .cGallerySubmit_strip .cGalleryTrimmedImage { width: 70px; height: 70px; border-width: 3px; } .cGallerySubmit_strip .cGalleryTrimmedImage a { width: 70px; height: 70px; } .cGallerySubmit_strip .cGallerySubmit_current:after { display: none; } html[dir] .cGallerySubmit_infoForm { position: absolute; top: 100px; bottom: 0; left: 0; right: 0; padding-left: 20px; padding-right: 20px; } /* Make buttons a bit smaller */ #elGallerySubmit_toolBar > ul > li .ipsButton { width: 100%; line-height: 32px; font-size: 12px; } }]]> ul { max-width: 450px; width: 100%; padding: 0 15px; } .cGalleryChooseAlbum_listItem { display: block; background: rgb( var(--theme-area_background_reset) ); border: 1px solid rgb( var(--theme-area_background) ); padding: 15px; border-radius: 6px; margin-bottom: 20px; padding-right: 40px; position: relative; transition: 0.075s all ease-in-out; } .cGalleryChooseAlbum_listItem[data-disabled] { opacity: 0.7; cursor: not-allowed; } .cGalleryChooseAlbum_listItem[data-disabled] .ipsType_sectionHead { color: rgb( var(--theme-text_light) ); } .cGalleryChooseAlbum_listItem:not([data-disabled]):after { font-family: 'FontAwesome'; content: '\f105'; position: absolute; right: 10px; top: 50%; font-size: 36px; transform: translateY(-50%); color: rgb( var(--theme-text_dark) ); } .cGalleryChooseAlbum_listItem:not([data-disabled]):hover { border-color: rgba( var(--theme-text_color), 0.3 ); transform: scale(1.05); } .cGalleryChooseAlbum_listItem .ipsType_sectionHead { font-size: {fontsize="base"}; } .ipsDialog .cGalleryDialog_submitBar { position: absolute; bottom: 0; left: 0; right: 0; border-bottom-left-radius: var(--radius-2); border-bottom-right-radius: var(--radius-2); } .cGallerySubmit_albumChoice { max-width: 1100px; margin: 20px auto 0; } .cGallerySubmit_albumChoice .ipsSelectTree { margin: 0 auto; } #elGallerySubmit_albumChooser > li > div { position: relative; border: 1px solid rgba( var(--theme-text_color), 0.1 );; border-radius: 3px; margin-bottom: 7px; } #elGallerySubmit_albumChooser > li > div ul.ipsType_medium { line-height: 1; } #elGallerySubmit_albumChooser > li > div:hover { background: rgb( var(--theme-area_background_light) ); cursor: pointer; } #elGallerySubmit_albumChooser > li > input[type="radio"]:checked + div { background: rgb( var(--theme-brand_primary) ); color: #fff; } #elGallerySubmit_albumChooser > li > input[type="radio"]:checked + div:before { content: '\f00c'; font-family: "FontAwesome"; font-size: 36px; position: absolute; top: 50%; transform: translateY(-50%); opacity: 0.6; color: inherit; } html[dir="ltr"] #elGallerySubmit_albumChooser > li > input[type="radio"]:checked + div:before { right: 17px; } html[dir="rtl"] #elGallerySubmit_albumChooser > li > input[type="radio"]:checked + div:before { left: 17px; } #elGallerySubmit_albumChooser > li > input[type="radio"]:checked + div .ipsType_light { color: inherit; opacity: 0.7; } .cGallerySubmit_albumImage { width: 40px; height: 40px; background-color: rgba(0,0,0,0.3); } html[dir="ltr"] .cGallerySubmit_albumImage { float: left; } html[dir="rtl"] .cGallerySubmit_albumImage { float: right; } html[dir="ltr"] .cGallerySubmit_albumInfo { margin-left: 47px; } html[dir="rtl"] .cGallerySubmit_albumInfo { margin-right: 47px; } .cGallerySubmit_chooseCategory { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } /* Step 2: Upload files */ .cGallerySubmit_uploadImages { overflow-y: auto; height: 100%; } .cGallerySubmit_details { padding-bottom: 20px; } .cGallerySubmit_uploadImages .ipsAttachment_dropZone { border-width: 3px; border-style: dashed; transition: none; } .cGallerySubmit_uploadImages .ipsAttachment_dropZone:not( .ipsDragging ) { background: transparent; border-color: rgb( var(--theme-area_background) ); } /* Positioning required to make the dialog full screen */ .cGalleryDialog_content { position: absolute; top: 80px; bottom: 0; right: 0; left: 0; } .ipsDialog_content .cGalleryDialog_content.cGalleryDialog_content_moderated { top: 150px; } .cGalleryDialog_imageForm { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: auto; } .cGalleryDialog_imageForm [data-role="imageForm"] { position: relative; } #elGallerySubmit { height: 100%; } #elGallerySubmit > .ipsGrid { position: absolute; top: 30px; left: 30px; bottom: 70px; right: 30px; } /* Step 3: Image info */ .cGallerySubmit_bottomBar { background: rgba( var(--theme-area_background_reset), 0.9 ); position: absolute; left: 0; right: 0; bottom: 0; height: 85px; z-index: 100; } .ipsApp button.cGallerySubmit_button { font-size: 66px; background: transparent; color: rgb( var(--theme-text_color) ); opacity: 0.4; text-align: center; position: absolute; top: 50%; margin-top: -20px; border: 0; height: 150px; /* Make the clickable area bigger for ease */ width: 60px; outline: 0; } /* Style the uploader */ #elGallerySubmit_imageUploader { position: relative; min-height: 200px; height: 100%; } .cGallerySubmit_uploadForm { height: calc( 100% - 20px ); } #elGallerySubmit_imageUploader .ipsAttachment_dropZone { position: absolute !important; top: 0; left: 0; height: 190px !important; width: 100%; padding: 10px; float: left; cursor: pointer; } .cGalleryDialog.cGalleryDialog_uploadStep #elGallerySubmit_imageUploader .ipsAttachment_dropZone { width: 200px; } #elGallerySubmit_imageUploader .ipsAttachment_dropZone:not( .ipsAttachment_dropZoneSmall ) > i:first-child { font-size: 100px; margin-top: 20px; color: rgb( var(--theme-text_light) ); } #elGallerySubmit_imageUploader .fa-cloud-upload:before { content: "\f055"; } #elGallerySubmit_imageUploader .ipsAttachment_supportDrag { font-size: {fontsize="x_small"}; color: rgb( var(--theme-text_light) ); } #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; } /* Media thumbnail upload area */ .cGalleryThumbField .ipsAttachment_dropZoneSmall_info { clear: left; margin-left: auto !important; } .cGalleryThumbField h2[data-role="title"] { width: 150px; max-width: 150px; } .cGalleryThumbField p.ipsDataItem_meta { width: 100px; } .cGalleryThumbField .ipsDataItem_generic { padding-top: 55px; } .cGalleryThumbField .ipsDataItem_size5, .cGalleryThumbField .ipsDataItem_size8 { width: 83px; min-width: 83px; padding-left: 0px !important; padding-right: 0px; } .cGalleryThumbField .ipsDataItem_size8 { text-align: left !important; padding-left: 80px; } /* This is a bit messy, but we need to overwrite styles from the uploader for this page */ #elGallerySubmit_imageUploader .ipsAttachment_fileList { margin-top: 0; } #elGallerySubmit_imageUploader .ipsAttachment_fileList .cGallerySubmit_fileList { display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: 4px; } #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach { height: 200px; width: 200px; background-color: rgb( var(--theme-area_background_reset) ); border: 1px solid rgb( var(--theme-area_background) ); margin-bottom: 30px !important; margin-right: 30px; cursor: move; border-radius: var(--radius-1); } #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach .cGalleryImageAttach_info { padding-right: 30px; } #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach:hover { border-color: rgb( var(--theme-area_background_dark) ); background-color: rgb( var(--theme-area_background_light) ); } #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach.cGallerySubmit_activeFile { border-color: rgb( var(--theme-brand_primary) ); box-shadow: 0px 0px 0px 1px #8ec2ed, 0px 0px 0px 5px {hextorgb="#8ec2ed" opacity="0.3"}; background: rgb( var(--theme-selected) ) !important; } #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach.cGallerySubmit_imageSaved:before, #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach.cGallerySubmit_imageError:before { width: 28px; height: 28px; border-radius: 28px; line-height: 28px; color: #fff; font-family: 'FontAwesome'; font-size: 14px; position: absolute; bottom: 8px; right: 8px; text-align: center; } #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach.cGallerySubmit_imageSaved:before { content: '\f00c'; background: #558B2F; } #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach.cGallerySubmit_imageError:not( .cGallerySubmit_activeFile ) { border-color: #a72f35; box-shadow: 0 1px 1px rgba(0,0,0,0.075), 0px 1px 5px rgba(167,47,53,0.6); } #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach.cGallerySubmit_imageError:before { content: '\f071'; background: #a72f35; } #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach:first-child { margin-left: 230px; } #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach .ipsImageAttach_thumb { height: 135px; } #elGallerySubmit_imageUploader .ipsAttach.ipsAttach_done [data-action="insertFile"] { cursor: move; } #elInput_image_copyright, #elInput_image_tags_wrapper { max-width: 100%; }]]> .cGalleryCarouselWidget .ipsCarousel_item{ flex: 0 0 240px; min-width: 0; } .cGalleryCarouselWidget .ipsImageBlock__main{ aspect-ratio: 4/3; } @supports not (aspect-ratio: 4/3){ .cGalleryCarouselWidget .ipsImageBlock__main{ height: 150px; }