v1.0

LICENSE

@@ -0,0 +1,7 @@
+Copyright 2023 WorldFS <fsworld009@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,52 @@
+# Steam Deck - View Media in Fullscreen
+
+A Steam Deck Gaming Mode custom CSS theme to display the selected image in
+fullscreen when viewing them in Media page.
+
+**Default Media view**
+![before](./img/before.jpg)
+
+**With this Theme**
+![after](./img/after.jpg)
+
+
+## Prerequisite
+
+1. [Decky Loader](https://github.com/SteamDeckHomebrew/decky-loader#installation)
+2. [CSS Loader](https://github.com/suchmememanyskill/SDH-CssLoader#installation)
+
+## Installation
+
+### Manual
+
+1. Clone the repo or download the code from [Release](https://github.com/fsworld009/steam-deck-theme-view-media-in-fullscreen/releases)
+2. Copy `View Media in Fullscreen` folder to `/home/deck/homebrew/themes/`
+3. Open Quick Access Menu -> Decky -> CSS Loader -> Reload themes
+4. Turn on `View Media in Fullscreen`
+
+![menu](./img/menu.jpg)
+
+### via CSS Loader
+
+Coming soon...
+
+## Note
+
+If enabling `Delay Effective Time` option, the theme won't apply until about 10
+seconds after user enters Media page. See the comment in [source code](./View%20Media%20in%20Fullscreen\patch_global_div.css)
+for explanation.
+
+## Development Notes
+
+1. [Minimal theme template](https://github.com/suchmememanyskill/Steam-Deck-Theme-Template/tree/main/Sample%20Simple%20Theme)
+   1. There are other templates in the repo
+2. [thene.json schema](https://docs.deckthemes.com/#/CSSLoader/README?id=%f0%9f%8e%a8-creating-a-theme)
+   1. Or use [Theme Visualizer](https://docs.deckthemes.com/#/CSSLoader/Visualizer?id=visualizer)
+3. On PC, open Steam client with `-dev -gamepadui`
+5. Hit F12 to open Dev console to inspect HTML and test CSS overrides
+5. Note that each dev console targets different views, which you need to set
+   in `inject` section in theme.json:
+   1. SP: Main window
+   2. MainMenu: Pop up menu on the left
+   3. QuickAccess: Pop up menu on the right
+6. Use Manual installation step to test the theme on Steamdeck

View Media in Fullscreen/immediately_apply_theme.css

@@ -0,0 +1,18 @@
+
+/* Without this patch, the theme won't work until about 10 seconds after user
+ * enters Media page.
+ *
+ * The reason being this particular div has
+ * `topleveltransitionswitch_EnterActive_Cpk9b` class. This class sets
+ * `transform: scale(1)`, which breaks the patch.
+ * 
+ * This div would eventually loses topleveltransitionswitch_Enter_d8bGj
+ * and topleveltransitionswitch_EnterActive_Cpk9b classes after about 10
+ * seconds, so this patch isn't necessary.
+ *
+ * Making this patch optional since this applies to a global div and I'm not
+ * sure if this would break other pages.
+ */
+ .overlappingtransition_ContentWrapper_1knAs.topleveltransitionswitch_AbsoluteDiv_2RXNR.topleveltransitionswitch_TopLevelTransition_2vPeX.topleveltransitionswitch_Enter_d8bGj.topleveltransitionswitch_EnterActive_Cpk9b {
+  transform: none;
+}

View Media in Fullscreen/shared.css

@@ -0,0 +1,19 @@
+/* Main patch */
+.mediapage_Screenshot_3Qh8h.mediapage_Fullscreen_un2hc .mediapage_Image_dmMTv {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 10000;
+}
+
+/* Patch images with Spoiler alert */
+.mediapage_FullscreenScreenshot_35IHD .mediapage_Screenshot_3Qh8h .mediapage_ImageContainer_120HU .mediapage_Image_dmMTv.mediapage_Spoiler_QIvhs {
+  position: fixed;
+}
+
+/* Make sure popup Menus are still visible */
+.FullModalOverlay {
+  z-index: 10001;
+}

View Media in Fullscreen/theme.json

@@ -0,0 +1,26 @@
+{
+	"name": "View Media in Fullscreen",
+	"author": "WorldFS",
+	"target": "Media",
+	"version": "v1.0",
+	"description": "Display the selected image in fullscreen when viewing them in Media page",
+	"manifest_version": 5,
+	"inject": {
+		"shared.css": [
+			"SP"
+		]
+	},
+	"dependencies": {},
+  "patches": {
+    "Delay Effective Time (Turn this on if the theme breaks other pages)": {
+        "default": "No",
+        "type": "checkbox",
+        "values": {
+            "No": {
+              "immediately_apply_theme.css": ["SP"]
+            },
+            "Yes": {}
+        }
+    }
+  }
+}

submission/template.md

@@ -0,0 +1,3 @@
+| Default Media view  | With this theme |
+| ------------- | ------------- |
+| <img src="../img/before.jpg" width="600" height="400">  | <img src="../img/after.jpg" width="600" height="400">  |