diff --git a/css/enhancedsteam.css b/css/enhancedsteam.css index 5d215beb2..8b1adae70 100644 --- a/css/enhancedsteam.css +++ b/css/enhancedsteam.css @@ -1280,6 +1280,98 @@ input[type=checkbox].es_dlc_selection:checked + label { opacity: 0.4; } +/*************************************** + * App pages + * addFullscreenScreenshotView() + **************************************/ +.es_screenshot_fullscreen_toggle { + position: absolute; + right: 18%; + bottom: 0; +} +.es_screenshot_fullscreen_toggle i { + display: block; + background-image: url('data:image/gif;base64,R0lGODlhEAAgAIABAP///////yH5BAEAAAEALAAAAAAQACAAAAJAjH+gC+jB1HNxpmqjnHVz31iQOIoh5D0Spmom+y0kypDaOWf2hVMNjLi9asNUTFZECpO9FjIDDLqOvyYvscsVAAA7'); + background-position: top left; + width: 16px; + height: 16px; + margin: 5px; +} +.es_screenshot_download_btn { + position: absolute; + right: 24%; + bottom: 0; +} +.es_screenshot_download_btn i { + display: block; + background-image: url(https://steamcommunity-a.akamaihd.net/public/shared/images/header/btn_header_installsteam_download.png?v=1); + background-position: center; + background-repeat: no-repeat; + width: 16px; + height: 16px; + margin: 5px; +} +.screenshot_popup_modal_content:fullscreen .es_screenshot_fullscreen_toggle i { + background-position: bottom left; +} +.screenshot_popup_modal_content:fullscreen { + padding: 0; + background: none; +} +.screenshot_popup_modal_content .screenshot_popup_modal_title { + display: none; +} +.screenshot_popup_modal_content:fullscreen .screenshot_img_ctn { + width: 100%; + height: 100%; +} +.screenshot_popup_modal_content:fullscreen .screenshot_img_ctn > img { + max-width: 100% !important; + max-height: 100% !important; + object-fit: scale-down; + width: 100%; + height: 100%; +} +.screenshot_popup_modal_content:fullscreen .screenshot_popup_modal_footer { + position: absolute; + width: 100%; + bottom: 0; + overflow: visible; +} +.screenshot_popup_modal_content:fullscreen .screenshot_popup_modal_footer > .btn_medium { + opacity: 0; + transition: opacity 0.25s ease-in-out; +} +.screenshot_popup_modal_content:fullscreen .screenshot_popup_modal_footer:hover > .btn_medium { + opacity: 1; +} +.screenshot_popup_modal_content:fullscreen .screenshot_popup_modal_footer > div:first-child { + display: inline-block; + background: rgba(103, 193, 245, 0.2); + border-radius: 100px; + padding: 0 1em; +} +.screenshot_popup_modal_content:fullscreen .screenshot_popup_modal_footer > .previous::before { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 40vw; + height: 100vh; +} +@keyframes es_screenshot_popup_modal_hook { + from { + opacity: 0.99; + } + to { + opacity: 1; + } +} +.screenshot_popup_modal { + animation-duration: 0.001s; + animation-name: es_screenshot_popup_modal_hook; +} + /*************************************** * Store and Community * add_language_warning(), diff --git a/js/content/store.js b/js/content/store.js index 6fc88ae64..60b671a32 100644 --- a/js/content/store.js +++ b/js/content/store.js @@ -566,6 +566,7 @@ class AppPageClass extends StorePageClass { this.addWishlistRemove(); this.addUserNote(); this.addNewQueueButton(); + this.addFullscreenScreenshotView(); this.addCoupon(); this.addPrices(); @@ -912,6 +913,44 @@ class AppPageClass extends StorePageClass { }); } + addFullscreenScreenshotView() { + function toggleFullScreen(event) { + if (!document.fullscreenElement) { + let element = event.target.closest(".screenshot_popup_modal_content"); + element.requestFullscreen(); + } else { + document.exitFullscreen(); + } + } + + function initFSVButtons(event) { + if (event.animationName !== "es_screenshot_popup_modal_hook") return; + + let modalFooter = document.querySelector(".screenshot_popup_modal_footer"); + let nextButton = modalFooter.querySelector(".next"); + let nextButtonOffsetWidth = nextButton.offsetWidth; + if (nextButton.style.display === "none") { + nextButton.style.display = ""; + nextButtonOffsetWidth = nextButton.offsetWidth; + nextButton.style.display = "none"; + } + HTML.beforeEnd(modalFooter, + `