/* NEW EMBED */ .cGalleryEmbed a { display: block; } .cGalleryEmbed_albumStrip { white-space: nowrap; } .cGalleryEmbed_albumStrip li { width: 20%; min-width: 40px; float: left; position: relative; } .cGalleryEmbed_albumStrip_mini li { width: 10%; min-width: 40px; } .cGalleryEmbed_albumStrip li:after { content: ''; display: block; padding-bottom: 100%; } .cGalleryEmbed_albumStrip li a { background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; top: 0; left: 0; right: 1px; bottom: 1px; font-size: 20px; text-align: center; color: #000; display: block; } .cGalleryEmbed_albumStrip li a span { padding-top: 40%; display: block; } .cGalleryEmbed_albumStrip_mini li a { font-size: 15px; } .cGalleryEmbed_albumStrip li a span { opacity: 0.3; } .cGalleryEmbed_albumStrip:not( .cGalleryEmbed_albumStrip_mini ) { margin: -30px 15px 0; border: 1px solid rgba( var(--theme-text_color), 0.1 ); } .ipsRichEmbed_mastheadBg.cGalleryEmbed_imageComment a { height: 220px; } /* OLD EMBED */ .ipsEmbedded .cGalleryTrimmedImage { background-color: #333; background-size: cover; background-position: 50%; background-repeat: no-repeat; overflow: hidden; } .ipsEmbedded .cGalleryTrimmedImage img { display: none; } .ipsEmbedded .cGalleryTrimmedImage a { width: 120px; height: 120px; display: block; } .ipsEmbedded .cGallery_albumImages { margin-top: 5px; } .ipsEmbedded .cGallery_albumImage a { width: 40px; height: 40px; border: 2px solid #fff; } .ipsEmbedded .cGallery_albumStats { color: #fff; font-weight: bold; position: absolute; bottom: 5px; text-shadow: 0px 1px 0px rgba(0,0,0,0.5); } html[dir="ltr"] .ipsEmbedded .cGallery_albumStats { right: 5px; } html[dir="rtl"] .ipsEmbedded .cGallery_albumStats { left: 5px; } .ipsList_inline, .cGalleryImageBottomBar > .ipsList_inline { margin-top: 10px; } html[dir="ltr"] .elGalleryImage .ipsButton.ipsButton_link, html[dir="ltr"] .elGalleryImage .ipsButton.ipsButton_primary { margin-left: 0px; } html[dir="rtl"] .elGalleryImage .ipsButton.ipsButton_link, html[dir="rtl"] .elGalleryImage .ipsButton.ipsButton_primary { margin-right: 0px; } /* Follow and promote buttons */ .cGalleryControls .ipsFollow .ipsCommentCount{ position: relative; transform: none; top: auto; } [dir='ltr'] .cGalleryControls .ipsFollow .ipsCommentCount{ margin-right: 0 !important; } [dir='rtl'] .cGalleryControls .ipsFollow .ipsCommentCount{ margin-left: 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; } .cGalleryImageTitle { top: 11px; width: 100%; } html[dir="ltr"] .cGalleryImageTitle { left: 15px; } html[dir="rtl"] .cGalleryImageTitle { right: 15px; } html[dir="ltr"] .elGalleryImage .elGalleryImageNav_prev, html[dir="rtl"] .elGalleryImage .elGalleryImageNav_next, html[dir="rtl"] .elGalleryImage .elGalleryImageNav_prev, html[dir="ltr"] .elGalleryImage .elGalleryImageNav_next { transform: translateX(0); } .cGalleryLightbox_info a.ipsReact_reaction:after { width: 60px; height: 60px; } }]]> .ipsRating { float: none; } .elGalleryImageNav { overflow: hidden !important; } .elGalleryImageNav a { position: absolute; color: #fff; font-size: 60px; top: 50%; margin-top: -30px; padding: 0 15px; opacity: 0.2; transition: all 0.2s ease-in-out; z-index: 100; } .elGalleryImage:hover .elGalleryImageNav a { opacity: 1; background: rgba(0,0,0,0.2); } .elGalleryImage:hover .elGalleryImageNav a:after { content: ""; top: -70%; bottom: -10px; position: absolute; left: -150px; right: -150px; } html[dir="ltr"] .elGalleryImageNav_prev, html[dir="rtl"] .elGalleryImageNav_next { left: 0px; } html[dir="ltr"] .cGalleryLightbox .elGalleryImageNav_prev, html[dir="rtl"] .cGalleryLightbox .elGalleryImageNav_next { transform: translateX(-80px); } html[dir="ltr"] .elGalleryImageNav_next, html[dir="rtl"] .elGalleryImageNav_prev { right: 0px; } html[dir="ltr"] .cGalleryLightbox .elGalleryImageNav_next, html[dir="rtl"] .cGalleryLightbox .elGalleryImageNav_prev { transform: translateX(80px); } html[dir="ltr"] .elGalleryImage:hover .elGalleryImageNav_prev, html[dir="rtl"] .elGalleryImage:hover .elGalleryImageNav_next, html[dir="rtl"] .elGalleryImage:hover .elGalleryImageNav_prev, html[dir="ltr"] .elGalleryImage:hover .elGalleryImageNav_next { transform: translateX(0); } /* PATCHWORK */ .cGalleryPatchwork_item { display: block; float: left; background-size: cover; background-color: #333; position: relative; overflow: hidden; text-shadow: 1px 1px 0px rgba(0,0,0,0.8); text-align: left; transition: 0.1s transform ease-in-out; } html[dir="rtl"] .cGalleryPatchwork_item { float: right; text-align: right; } .cGalleryPatchwork_item > a { position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; } .cGalleryPatchwork_item [data-role='moderation'] { position: absolute; top: 5px; } html[dir="ltr"] .cGalleryPatchwork_item [data-role='moderation'] { right: 5px; } html[dir="rtl"] .cGalleryPatchwork_item [data-role='moderation'] { left: 5px; } .cGalleryPatchwork_item [data-commentCount='0'] { opacity: 0.3; } .cGalleryPatchwork_item.ipsNoThumb { text-shadow: none; } .cGalleryPatchwork_image { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; } html[dir="ltr"] .cGalleryPatchwork_image { left: 0; } html[dir="rtl"] .cGalleryPatchwork_image { right: 0; } .cGalleryPatchwork_item .ipsPhotoPanel { position: absolute; background: rgba(0,0,0,0.8); width: 100%; top: 0; line-height: 1.2; height: 42px; color: #fff; transition: opacity 0.1s linear; } html[dir="ltr"] .cGalleryPatchwork_item .ipsPhotoPanel { left: 0; padding: 7px 7px 0 7px; } html[dir="rtl"] .cGalleryPatchwork_item .ipsPhotoPanel { right: 0; padding: 7px 7px 0 7px; } .cGalleryPatchwork_item .ipsPhotoPanel span { line-height: inherit; display: block; width: 100%; white-space: nowrap; text-overflow: ellipsis; } .cGalleryPatchwork_item .ipsPhotoPanel span + span { opacity: 0.7; } .cGalleryPatchwork_item:hover { transform: scale(1.05); z-index: 2000; } /* Image list patchwork */ .cGalleryPatchwork_list .cGalleryPatchwork_stats, .cGalleryPatchwork_index .cGalleryPatchwork_stats { position: absolute; bottom: 0; left: 0; right: 0; font-size: {fontsize="small"}; color: #fff; padding: 7px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); } /* Featured/New patchwork */ ol.cGalleryPatchwork_index.ipsPad, ol.cGalleryPatchwork_list.ipsPad { padding-top: 11px; padding-bottom: 11px; } /* CATEGORIES */ .cGalleryCats > .ipsGrid { margin-bottom: -15px; } .cGalleryCat > a { display: block; height: 150px; position: relative; color: #fff; } .cGalleryCat > a:before { content: ''; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 53px; background: rgba(0,0,0,0.8); } .cGalleryCat .ipsType_sectionHead, .cGalleryCat .cGalleryCat_info { position: absolute; left: 7px; right: 7px; text-shadow: 1px 1px 1px rgba(0,0,0,1); } .cGalleryCat .cGalleryCat_info > li:first-child { position: absolute; top: 0; } .cGalleryCat .ipsType_sectionHead { bottom: 23px; color: #fff; font-size: {fontsize="medium"}; } .cGalleryCat .cGalleryCat_info { bottom: 7px; font-size: {fontsize="x_small"}; } /* 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; } .cGalleryImageList > li { padding: 7px; border: 1px solid rgba(0,0,0,0.05); } .cGalleryImageList > li > div { width: 100%; margin-bottom: 5px; } /* For non-js, we need a fixed height because the JS won't be handling it */ .ipsJS_none .cGalleryImageList > li > div { height: 180px; } .cGalleryImageList > li > div + ul { height: 26px; line-height: 24px; } .cGalleryImageItem.cGalleryImageItem_selected { background-color: rgb( var(--theme-selected) ); } .cGalleryImageItem_image { display: block; position: relative; max-width: 100%; height: 100%; } .cGalleryLargeList > li { margin-bottom: 15px; border: 1px solid rgba( var(--theme-text_color), 0.8 ); } .cGalleryLargeList > li img { display: block; margin: 0 auto 10px auto; } /* IMAGE VIEW PAGE */ .cGalleryViewImage { display: inline-block; position: relative; background: #222; z-index: -3; } .cGalleryViewImage img[data-role="theImage"] { z-index: -2; position: relative; } .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; } .cGalleryViewImage_options { margin-bottom: 5px; } [data-role="imageComments"] .ipsTabs_panel .ipsRecommendedComments { margin: -15px 0px 5px 0px; } .elGalleryImage .ipsButton.ipsButton_link { background: rgba(0,0,0,0.1) !important; color: #d0d0d0; border: 1px solid #d0d0d0 !important; } .elGalleryImage .ipsButton.ipsButton_primary { background: #fff !important; color: #000; border: 1px solid #fff !important; } html[dir="ltr"] .elGalleryImage .ipsButton.ipsButton_link, html[dir="ltr"] .elGalleryImage .ipsButton.ipsButton_primary { margin-left: 3px; } html[dir="rtl"] .elGalleryImage .ipsButton.ipsButton_link, html[dir="rtl"] .elGalleryImage .ipsButton.ipsButton_primary { margin-right: 3px; } .elGalleryImage .ipsPromote .ipsPromote_icon { background: transparent; } .cGalleryExif .fa-camera { font-size: 42px; line-height: 58px; } .cGalleryExif_data {} .cGalleryExif_data li { border: 1px solid rgb( var(--theme-area_background_dark) ); background: rgb( var(--theme-area_background_reset) ); border-radius: 3px; line-height: 19px; height: 20px; font-size: {fontsize="10"}; font-weight: bold; margin: 2px 2px; } html[dir="ltr"] .cGalleryExif_data li { padding-right: 6px; margin-right: 0px; } html[dir="rtl"] .cGalleryExif_data li { padding-left: 6px; margin-left: 0px; } .cGalleryExif_data li span { background: rgb( var(--theme-area_background_dark) ); color: #fff; width: 30px; font-size: {fontsize="medium"}; display: inline-block; text-align: center; } html[dir="ltr"] .cGalleryExif_data li span { float: left; padding: 0 8px 0 6px; margin-right: 6px; border-radius: 2px 0 0 2px; } html[dir="rtl"] .cGalleryExif_data li span { float: right; padding: 0 6px 0 8px; margin-left: 6px; border-radius: 0 3px 3px 0; } .cGalleryExif .cGalleryExif_f { font-family: 'Palatino', 'Times New Roman'; font-style: italic; font-weight: bold; } .cGalleryExif .cGalleryExif_iso { font-size: {fontsize="x_small"}; padding: 0; } /* 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: left; margin-top: 5px; } html[dir="rtl"] .cGalleryNote_editing .cGalleryNote_note ul { text-align: right; } .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; margin-top: 5px; background: #2a2a2a; color: #fff; font-size: {fontsize="x_small"}; border-radius: 2px; pointer-events: none; } html[dir="ltr"] .cGalleryNote_note { left: 105%; } html[dir="rtl"] .cGalleryNote_note { right: 105%; } .cGalleryNote_note > div { width: 100%; max-width: 200px; padding: 4px 8px; } .cGalleryNote_delete { position: absolute; top: -10px; width: 24px; height: 24px; line-height: 19px; border-radius: 12px; background: #000; border: 1px solid #fff; color: #fff; font-size: 17px; } html[dir="ltr"] .cGalleryNote_delete { right: -10px; } html[dir="rtl"] .cGalleryNote_delete { left: -10px; } /* 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;} /* This is to make the video responsive in size See: http://3strandsmarketing.com/video-fluid-2.php */ /* top/bottom adjusted to avoid the 'fade' area */ .cGallery_videoContainer { position: absolute; top: 50px; left: 10%; right: 10%; width: 80%; z-index: 1000; bottom: 70px; } .cGallery_videoContainer video { position: absolute; top: 0; left: 0px; width: 100%; height: 100%; } ul.cGallerySearchAlbumThumbs.ipsList_inline, ul.cGalleryManagedAlbumThumbs.ipsList_inline { position: absolute; bottom: 10px; overflow: hidden; width: calc(100% - 150px); /* Needs to account for margins added */ } ul.cGallerySearchAlbumThumbs.cGallerySearchExpanded.ipsList_inline, ul.cGalleryManagedAlbumThumbs.cGallerySearchExpanded.ipsList_inline { position: inherit; } html[dir="ltr"] ul.cGallerySearchAlbumThumbs.ipsList_inline { margin-left: 85px; } html[dir="rtl"] ul.cGallerySearchAlbumThumbs.ipsList_inline { margin-right: 85px; } html[dir="ltr"] ul.cGallerySearchAlbumThumbs.cGallerySearchExpanded.ipsList_inline { margin-left: 30px; } html[dir="rtl"] ul.cGallerySearchAlbumThumbs.cGallerySearchExpanded.ipsList_inline { margin-right: 30px; } html[dir="ltr"] ul.cGallerySearchAlbumThumbs.ipsList_inline > li, html[dir="ltr"] ul.cGalleryManagedAlbumThumbs.ipsList_inline > li { margin-right: 4px; } html[dir="rtl"] ul.cGallerySearchAlbumThumbs.ipsList_inline > li, html[dir="rtl"] ul.cGalleryManagedAlbumThumbs.ipsList_inline > li { margin-left: 4px; } ul.cGallerySearchAlbumThumbs li span, ul.cGalleryManagedAlbumThumbs li span { max-width: 25px; max-height: 25px; } /* 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; z-index: 10; cursor: pointer; } html[dir="ltr"] .cLightboxClose { right: 10px; } html[dir="rtl"] .cLightboxClose { left: 10px; } .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: #111; } .cGalleryLightbox .cGalleryLightbox_inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: 0px 5px 55px rgba(0,0,0,0.4); } .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; } .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; } /* 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; } html[dir="ltr"] .cGalleryLightbox_info .ipsComposeArea_dropZone > div { margin-left: 25px; } html[dir="rtl"] .cGalleryLightbox_info .ipsComposeArea_dropZone > div { margin-right: 25px; } .cGalleryLightbox_info .ipsComposeArea_dropZone > div { margin-top: -3px; } .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) ); }]]> ul { height: 204px; position: relative; overflow: hidden; } html[dir="ltr"] .cGalleryAlbums_recent > ul { padding-left: 208px; } html[dir="rtl"] .cGalleryAlbums_recent > ul { padding-right: 208px; } .cGalleryAlbums_recent > ul > li { width: 100px; height: 100px; float: left; position: relative; margin: 0 0 4px 4px; } html[dir="rtl"] .cGalleryAlbums_recent > ul > li { float: right; margin: 0 4px 4px 0; } .cGalleryAlbums_recent > ul > li a { display: block; width: 100px; height: 100px; } .cGalleryAlbums_recent > ul > li span { padding-right: 7px; text-align: right; font-size: {fontsize="x_small"}; font-weight: bold; color: #fff; position: absolute; left: 0; right: 0; bottom: 0; line-height: 26px; text-shadow: 1px 1px 0px rgba(0,0,0,0.8); background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); } html[dir="rtl"] .cGalleryAlbums_recent > ul > li span { text-align: left; } .cGalleryAlbums_recent > ul > li img { display: none; } .cGalleryAlbums_recent > ul > li:first-child { width: 204px; height: 204px; overflow: hidden; position: absolute; } html[dir="ltr"] .cGalleryAlbums_recent > ul > li:first-child { left: 0; } html[dir="rtl"] .cGalleryAlbums_recent > ul > li:first-child { right: 0; } .cGalleryAlbums_recent > ul > li:first-child a { width: 204px; height: 204px; } /* Restyle the above for the sidebar */ .ipsWidget_vertical .cGalleryAlbums_recent > ul{ padding: 0 !important; display: flex; flex-wrap: wrap; height: auto; } .ipsWidget_vertical .cGalleryAlbums_recent > ul > li:first-child, .ipsWidget_vertical .cGalleryAlbums_recent > ul > li:first-child a, .ipsWidget_vertical .cGalleryAlbums_recent > ul > li, .ipsWidget_vertical .cGalleryAlbums_recent > ul > li a{ width: auto; height: auto; position: static; } .ipsWidget_vertical .cGalleryAlbums_recent > ul > 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 > ul > li:nth-child(12) ~ li{ display: none; } .ipsWidget_vertical .cGalleryAlbums_recent > ul > 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 { padding: 0; margin-bottom: 3px; } .cGalleryAlbums_recent > ul { height: 134px; } html[dir="ltr"] .cGalleryAlbums_recent > ul { padding-left: 138px; } html[dir="rtl"] .cGalleryAlbums_recent > ul { padding-right: 138px; } .cGalleryAlbums_recent > ul > li:first-child, .cGalleryAlbums_recent > ul > li:first-child a { width: 134px; height: 134px; } .cGalleryAlbums_recent > ul > li, .cGalleryAlbums_recent > ul > li a { width: 65px; height: 65px; } .cGalleryAlbums_recent + ul.ipsList_inline { padding-left: 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; } .cGalleryDialog_imageForm [data-role="imageForm"] { top: 105px; } /* Image details area on mobile is fixed */ .cGallerySubmit_imageDetails { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; padding: 15px; } /* 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; } #elGallerySubmit_toolBar > ul { display: block; } /* Reset all items so they're blocks */ #elGallerySubmit_toolBar > ul > li { display: block; margin: 0; } /* Make buttons a bit smaller */ #elGallerySubmit_toolBar > ul > li .ipsButton { width: 100%; line-height: 32px; font-size: 12px; } /* Copyright/credit buttons - half-width so they share a line */ #elGallerySubmit_toolBar > ul > li { width: 48%; } #elGallerySubmit_toolBar > ul > li:nth-child(odd) { float: left; /* Copyright - move left */ } #elGallerySubmit_toolBar > ul > li:nth-child(even) { float: right; /* Credit - move right */ } #elGallerySubmit_toolBar > ul > li:nth-child(3), #elGallerySubmit_toolBar > ul > li:nth-child(4) { margin-top: 7px; /* Tags and notify */ } /* Notify option - make toggle a bit smaller (and the text) */ #elGallerySubmit_toolBar > ul > li:first-child + li + li .ipsToggle { zoom: 0.8; } #elGallerySubmit_toolBar > ul > li:first-child + li + li label { 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; } .cGalleryDialog_imageForm [data-role="imageForm"] { position: absolute; top: 80px; left: 0; right: 0; bottom: 85px; overflow: auto; } #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%; }]]> div:first-child { margin-bottom: 5px; background: rgb( var(--theme-area_background_reset) ); } .ipsWidget.ipsWidget_vertical .cGalleryWidget .ipsImage { max-height: 175px; } .ipsWidget.ipsWidget_horizontal .cGalleryWidget .ipsImage { max-height: 145px; margin-bottom: 5px; } .cGalleryWidget .ipsNoThumb { display: block; } .cGalleryWidget_verticalThumb { height: 150px; } .cGalleryWidgetList > li { border-bottom: 1px solid rgb( var(--theme-area_background) ); padding-bottom: 10px; margin-bottom: 10px; } .cGalleryWidgetList > li:last-child { padding-bottom: 0; margin-bottom: 0; border: 0; } .cGalleryWidget_comments { position: absolute; top: 122px; color: #fff; background: rgb( var(--theme-area_background_dark) ); padding: 0px 4px; border-radius: 2px; font-size: {fontsize="x_small"}; } html[dir="ltr"] .cGalleryWidget_comments { right: 7px; } html[dir="rtl"] .cGalleryWidget_comments { left: 7px; } #elGalleryStatsLatest .cGalleryWidget_comments { top: 140px; } .cGalleryWidget_comments.ipsFaded { opacity: 0.7; } .ipsCarousel_item .cGalleryWidget_comments { top: 150px; } .cGalleryWidget_album > a { display: block; height: 235px; position: relative; color: #fff; } .cGalleryWidget_album > a:before { content: ''; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 53px; background: rgba(0,0,0,0.8); } .cGalleryWidget_album .ipsType_sectionHead, .cGalleryWidget_album .cGalleryWidget_albumInfo { position: absolute; left: 7px; right: 7px; text-shadow: 1px 1px 1px rgba(0,0,0,1); } .cGalleryWidget_album .cGalleryWidget_albumInfo > li:first-child { position: absolute; top: 0; } .cGalleryWidget_album .ipsType_sectionHead { bottom: 23px; color: inherit; font-size: {fontsize="medium"}; } .cGalleryWidget_album .cGalleryWidget_albumInfo { bottom: 7px; font-size: {fontsize="x_small"}; }]]>