/* 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; line-height: 90px; font-size: 20px; text-align: center; color: #000; display: block; } .cGalleryEmbed_albumStrip_mini li a { line-height: 48px; 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(0,0,0,0.05); } .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; } 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; } .cGalleryUpdated { margin-left: 6px; } /* IMAGE VIEW */ #elGalleryImage { padding: 2px; } body[data-pageapp="gallery"][data-pagecontroller="view"] .cWidgetContainer:not( .ipsHide ) + div .elGalleryHeader { margin-top: 10px; } .ipsStreamItem_condensed.ipsStreamItem.ipsStreamItem_contentBlock.cGalleryAlbumSearchResult { padding-bottom: 40px; } .cGalleryRowsList .ipsThumb.ipsThumb_medium.ipsThumb_bg { max-width: 100%; width: 100%; margin-bottom: 7px; } html[dir="ltr"] .cGalleryRowsList .ipsDataItem_main { padding-left: 0; } html[dir="rtl"] .cGalleryRowsList .ipsDataItem_main { padding-right: 0; } html[dir="ltr"] .cGalleryRowsList .ipsDataItem_modCheck { right: 10px; left: auto; top: 150px; } html[dir="rtl"] .cGalleryRowsList .ipsDataItem_modCheck { left: 10px; right: auto; top: 150px; } html[dir="ltr"] ul.cGallerySearchAlbumThumbs.ipsList_inline { margin-left: 0px; } html[dir="rtl"] ul.cGallerySearchAlbumThumbs.ipsList_inline { margin-right: 0px; } /* 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; } 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; {prefix="transition" value="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; {prefix="transition" value="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 { position: absolute; bottom: 0; left: 0; right: 0; font-size: 13px; color: #fff; padding: 7px; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.6))); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); 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; } .cGalleryPatchwork_index .cGalleryPatchwork_item .cGalleryPatchwork_comments { position: absolute; bottom: 7px; color: #fff; font-size: 12px; } html[dir="ltr"] .cGalleryPatchwork_index .cGalleryPatchwork_item .cGalleryPatchwork_comments { right: 7px; } html[dir="rtl"] .cGalleryPatchwork_index .cGalleryPatchwork_item .cGalleryPatchwork_comments { left: 7px; } /* 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: 15px; } .cGalleryCat .cGalleryCat_info { bottom: 7px; font-size: 11px; } html[dir="ltr"] .ipsToolList.ipsToolList_horizontal.ipsPos_left.cGalleryAlbumControls > li:last-child { margin-right: 0px; } /* ALBUM LIST IN A CATEGORY */ .cGalleryAlbums > li:not( :last-child ) { margin-bottom: 7px; } .cGalleryAlbums_recent > 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: 11px; 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: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.6))); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); background-image: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); 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; } 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: {theme="selected"}; } .cGalleryImageItem_image { display: block; position: relative; max-width: 100%; height: 100%; } .cGalleryLargeList > li { margin-bottom: 15px; border: 1px solid rgba(0,0,0,0.05); } .cGalleryLargeList > li img { display: block; margin: 0 auto 10px auto; } /* IMAGE VIEW PAGE */ .cGalleryViewImage { display: inline-block; position: relative; background: #222; z-index: -3; /*width: 100% !important;*/ } .cGalleryViewImage img[data-role="theImage"] { z-index: -2; position: relative; } .cGalleryImageTitle { text-align: left; z-index: 100; pointer-events: auto; } .cGalleryImageTitle , .cGalleryImageTitle .ipsType_pageTitle, .cGalleryImageTitle .ipsType_pageTitle a, .cGalleryImageTitle .ipsType_minorHeading, .cGalleryImageTitle a { color: #fff; font-weight: 300; } .cGalleryImageTitle .ipsType_pageTitle { font-size: 20px; } .cGalleryCreditInfo { text-align: left; color: #fff; text-shadow: 2px 2px 5px #000; pointer-events: auto; } .cGalleryViewImage_controls { z-index: 100; pointer-events: auto; } [data-role="imageComments"] .ipsTabs_panels.ipsTabs_contained .ipsTabs_panel { margin: 15px 0px 0px 0px; padding: 0px 0px 0px 0px; } .cGalleryViewImage_options { margin-bottom: 5px; } .cGalleryComment_ipTools { text-align: right; } [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 #5d5d5d; background: #fff; border-radius: 3px; line-height: 19px; height: 20px; font-size: 10px; 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: #5d5d5d; color: #fff; width: 30px; font-size: 15px; 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: 11px; 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: 11px; color: #000; } .cGalleryNote_note { width: -webkit-max-content; width: -moz-max-content; width: max-content; position: absolute; top: 100%; margin-top: 5px; background: #2a2a2a; color: #fff; font-size: 12px; border-radius: 2px; pointer-events: none; } .cGalleryNote_note > div { width: 100%; max-width: 200px; padding: 4px 8px; } html[dir="ltr"] .cGalleryNote_note { left: 0px; } html[dir="rtl"] .cGalleryNote_note { right: 0px; } .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;} /* 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; } /* 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: 0; right: 0; bottom: 70px; } .cGallery_videoContainer video { position: absolute; top: 0; width: 100%; height: 100%; } html[dir="ltr"] .cGallery_videoContainer video { left: 0; } html[dir="rtl"] .cGallery_videoContainer video { right: 0; } ul.cGallerySearchAlbumThumbs.ipsList_inline, ul.cGalleryManagedAlbumThumbs.ipsList_inline { position: absolute; bottom: 10px; overflow: hidden; width: 95%; /* 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; background: #fff; overflow: auto; } .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; } .cGalleryControls { white-space: nowrap; } /* Customized styles for comments area inside lightbox */ .cGalleryLightbox_info [data-role="noComments"] { display: none; } .cGalleryLightbox_info [data-role="replyArea"] { padding: 4px; margin-top: 0; } .cGalleryLightbox_info .ipsComposeArea_dummy { padding: 7px 15px; font-size: 14px; } .cGalleryLightbox_info .ipsItemControls { border-top: 0; margin-top: 0; } .cGalleryLightbox_info .ipsComment [data-role="commentContent"] { margin-bottom: 10px; } .cGalleryLightbox_info .ipsTabs { background: {theme="area_background"}; border-top: 1px solid rgba(0,0,0,0.1); } .cGalleryLightbox_info .ipsTabs_item, .cGalleryLightbox_info .ipsTabs_item:hover { color: #333; } .cGalleryLightbox_info .cGuestTeaser .ipsGrid_span6 { float: none; width: 100%; } .cGalleryLightbox_info .cGuestTeaser_right { margin-top: 15px; } .cGalleryLightbox_info .cGuestTeaser .ipsType_pageTitle { font-size: 20px; } .cGalleryLightbox_info .ipsButtonRow { padding: 5px; } /* 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: 13px; } html[dir] .cGalleryLightbox_info .ipsToolList.ipsToolList_horizontal > li { margin-top: 2px; } html[dir] .cGalleryLightbox_info .ipsToolList.ipsToolList_horizontal > li:not( .ipsPos_left ) { margin: 0; float: none; } .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 { -webkit-transition: none; transition: none; opacity: 1; } [data-role="toggleFullscreen"]:after { font-family: FontAwesome; content: "\f065"; } #cLightbox[data-fullScreen] [data-role="toggleFullscreen"]:after { content: "\f066"; }]]> div { width: 100%; height: 100%; margin: 0 auto; border: 1px solid rgba(0,0,0,0.05); } .cProfileAlbum_image { display: block; position: relative; max-width: 100%; height: 100%; background-color: #333; background-size: cover; background-position: 50%; background-repeat: no-repeat; overflow: hidden; } .cProfileAlbum_image img { display: none; } .cProfileAlbum .ipsType_sectionHead { font-size: 14px; 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; width: 48%; } #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach:nth-child(odd) { margin-right: 4%; } #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach:first-child { margin-left: 0; } #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach:first-child, #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach:first-child + .ipsImageAttach { margin-top: 160px; } .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: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%); border: 1px solid #b3b3b3; 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: {theme="text_light"}; } .cGalleryChooseAlbum_listItem:not([data-disabled]):after { font-family: 'FontAwesome'; content: '\f105'; position: absolute; right: 10px; top: 50%; margin-top: -10px; font-size: 36px; color: #000; } .cGalleryChooseAlbum_listItem:not([data-disabled]):hover { border-color: rgba(82, 168, 236, 0.8); transform: scale(1.05); } .cGalleryChooseAlbum_listItem .ipsType_sectionHead { font-size: 16px; } .ipsDialog .cGalleryDialog_submitBar { position: absolute; bottom: 0; left: 0; right: 0; } .cGallerySubmit_albumChoice { max-width: 1100px; margin: 20px auto 0; } .cGallerySubmit_albumChoice .ipsSelectTree { margin: 0 auto; } .cGalleryDialog_formPanel { padding: 0 15px; } #elGallerySubmit_albumChooser > li > div { position: relative; border: 1px solid rgba(0,0,0,0.1); border-radius: 3px; margin-bottom: 7px; } #elGallerySubmit_albumChooser > li > div ul.ipsType_medium { line-height: 1; } #elGallerySubmit_albumChooser > li > div:hover { background: #e4eff7; cursor: pointer; } #elGallerySubmit_albumChooser > li > input[type="radio"]:checked + div { background: #5490c0; color: #fff; } #elGallerySubmit_albumChooser > li > input[type="radio"]:checked + div:before { content: '\f00c'; font-family: "FontAwesome"; font-size: 36px; position: absolute; top: 17px; opacity: 0.6; color: #fff; } 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: #fff; 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, .cGallerySubmit_details { overflow-y: auto; } .cGallerySubmit_details { padding-bottom: 20px; } .cGallerySubmit_uploadImages .ipsAttachment_dropZone { border-width: 3px; border-style: dashed; {prefix="transition" value="none"} } .cGallerySubmit_uploadImages .ipsAttachment_dropZone:not( .ipsDragging ) { background: transparent; border-color: #e0e0e0; } /* Positioning required to make the dialog full screen */ .cGalleryDialog_content { /*overflow: auto;*/ 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: 60px; overflow: auto; } #elGallerySubmit > .ipsGrid { position: absolute; top: 30px; left: 30px; bottom: 70px; right: 30px; } /* Step 3: Image info */ .cGallerySubmit_bottomBar { position: absolute; left: 0; right: 0; bottom: 0; height: 75px; border-top: 1px solid rgba(0,0,0,0.075); z-index: 100; } .ipsApp button.cGallerySubmit_button { font-size: 66px; background: transparent; color: #555; 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; } #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: {theme="primary_button"}; } #elGallerySubmit_imageUploader .fa-cloud-upload:before { content: "\f055"; } #elGallerySubmit_imageUploader .ipsAttachment_supportDrag { font-size: 12px; color: {theme="primary_button"}; } #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; } #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach { height: 190px; width: 200px; background-color: #fff; border: 1px solid #e0e0e0; margin-bottom: 30px !important; margin-right: 30px; cursor: move; } #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach .cGalleryImageAttach_info { padding-right: 30px; } #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach:hover { border-color: #b3b3b3; background-color: #fafafa; } #elGallerySubmit_imageUploader .ipsAttachment_fileList .ipsImageAttach.cGallerySubmit_activeFile { border-color: #8ec2ed #8bbee8 #84b4db #8ec2ed; box-shadow: 0 1px 1px rgba(0,0,0,0.075), 0px 1px 5px rgba(82,168,236,0.6); background: {theme="selected"}; } #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: #fff; } .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 #ebebeb; 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: {theme="area_background_dark"}; padding: 0px 4px; border-radius: 2px; font-size: 11px; } 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: #fff; font-size: 15px; } .cGalleryWidget_album .cGalleryWidget_albumInfo { bottom: 7px; font-size: 11px; }]]>