├── ATOMS.zip ├── README.md ├── config.css ├── config.js ├── css ├── bigpicture.css ├── configDefaults.css ├── controller.css ├── friends.css ├── img │ ├── 404.png │ └── RewardsSeason1Hero-grey.png ├── library.css ├── menus.css ├── scrollbars.css ├── shiinaLib │ └── webkit.css ├── utilities │ └── hideWhatsNew.css └── webkit.css ├── customs.py ├── data └── translations.json ├── js ├── navigation.js ├── steam.js ├── utilities │ ├── combineTopMeuns.js │ ├── greyscaleBackground.js │ ├── launchGameKeyHandler.js │ ├── moveButtons.js │ ├── queBlacklist.js │ ├── queueKeyHandler.js │ ├── removeProfileBrand.js │ ├── rootMenus │ │ ├── addMenu.js │ │ ├── addMenuItem.js │ │ ├── addSeperator.js │ │ ├── modifySteamRootMenu.js │ │ ├── removeMenuItems.js │ │ └── rootMenuDropown.js │ ├── systemAccentColors.js │ ├── translate.js │ ├── transparentGames.js │ ├── utility.js │ ├── waitForElement.js │ └── wideGameIcons.js └── webkit.js ├── millennium.md └── skin.json /ATOMS.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Plaer1/ATOMS/f10804362b342b139776085dd9a84c73872beab8/ATOMS.zip -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Another Take On Metro Steam: 2 | [![Thanks for all the fish!](https://img.shields.io/badge/Donate-ko--fi-pink?style=flat-square&logo=kofi&logoColor=%23c381ff&color=%23c381ff)](https://ko-fi.com/plaer1) [![My Discord](https://img.shields.io/discord/493527438928642059?style=flat&logo=discord&logoColor=%23c381ff&color=%23c381ff 3 | )](https://discord.gg/EHMjbeEf82) [![Size of skin](https://img.shields.io/github/repo-size/Plaer1/ATOMS?style=flat&logo=github&logoColor=%23c381ff&color=%23c381ff)](https://github.com/Plaer1/ATOMS/) 4 | 5 | A theme for Steam, based on: 6 | [The Unofficial Metro for Steam](https://steamcommunity.com/groups/metroskin/discussions/0/141136086931804907/) and [Steam Dark mode by AikoMidori.](https://github.com/AikoMidori/steam-dark-mode) 7 | 8 | If you need support: you can find me as Plær1’ in [The Unofficial Metro for Steam Discord](https://discord.gg/UZvkvkh). 9 | 10 | | Library | 11 | | ------------------- | 12 | | ![ATOMS Steam Library](https://github.com/Plaer1/ATOMS-Media/blob/d2844f744c5d28ffb571731a1eb7d43f4f9a2da5/steamLibrary.png) | 13 | 14 | | Store Page | 15 | | ------------------------------ | 16 | | ![ATOMS Store Page](https://github.com/Plaer1/ATOMS-Media/blob/d2844f744c5d28ffb571731a1eb7d43f4f9a2da5/steamStore.png) | 17 | 18 | ## Install: 19 | 20 | ### [Download and install SFP](https://github.com/PhantomGamers/SFP) to a folder on your pc* 21 | 22 | *you're going to need this app forever so put it somewhere you'll remember... or else. 23 | ‎ ‎ 24 | 25 | ‎ 26 | ### Download and extract the skin folder (``ATOMS``) to: 27 | ``%steamdata%/steamui/skins`` 28 | 29 | (this is easily accessed from the "open file" menu in the bottom right of SFP) 30 | 31 | ‎ 32 | ### These SFP settings must be configured for a normal experience: 33 | ``` 34 | ✓ Inject on Steam start 35 | ✓ Inject CSS 36 | ✓ Inject Javascript 37 | ✓ Make sure ATOMS is selected from the "Steam skin" dropdown. 38 | ``` 39 | 40 | 41 | ‎ 42 | ### It's not required, but for maximum convenience, I recommend applying the following settings: 43 | ``` 44 | ✓ Show Tray Icon 45 | ✓ Minimize to Tray 46 | ✓ Close to Tray 47 | ✓ Start Minimized 48 | ✓ Inject on app start 49 | ✓ Run Steam on start 50 | ✓ Run on boot 51 | ``` 52 | (please note that you should now DISABLE Steam opening on boot in the *Steam* settings) 53 | 54 | 55 | ## Features: 56 | * Built from the ground up to be highly configurable, there are already plenty of settings in the ``config.css`` with more to come! 57 | 58 | * Theme'd basically every page in Steam, *if you see* **anything** *that doesn't look theme'd at all*, ***please*** fill out a bug report or contact me on discord! 59 | 60 | * Skip the age gate on store pages (***make sure to fill out your real birthday in the file***: ``utility.js``**!!**). 61 | 62 | * Is there any deal integration: 63 | ![ATOMS ITAD](https://raw.githubusercontent.com/Plaer1/ATOMS-Media/main/steamitad.png) 64 | 65 | * Removed bottom menu and moved buttons to top right: 66 | ![ATOMS Bar Buttons](https://raw.githubusercontent.com/Plaer1/ATOMS-Media/main/steamTopRightBar.png) 67 | 68 | * Moved "Root" menu to it's own hidden menu: 69 | ![ATOMS Root Menu](https://raw.githubusercontent.com/Plaer1/ATOMS-Media/main/steamRootMenu.png) 70 | 71 | * added Reload/Restart steam buttons: 72 | ![ATOMS Root Menu](https://raw.githubusercontent.com/Plaer1/ATOMS-Media/main/restartaloadMenu.png) 73 | 74 | * Dim the artwork of uninstalled games in the library: 75 | ![ATOMS Root Menu](https://raw.githubusercontent.com/Plaer1/ATOMS-Media/main/transparentGames.png) 76 | 77 | * Hides any personal ickyness. from your steam profile (only works for you, the world still knows what you did). 78 | 79 | * You can use the arrow keys to navigate the steam discovery que. 80 | 81 | * You can use ``'Control' + '+'`` and ``'Control' + '-'`` to zoom in and out on the non-library pages. 82 | 83 | ## Known bugs/to-do's 84 | If you find **any bugs** not listed here, please don't hesitate to contact me in the place(s) listed above to report new issues. 85 | * The ITAD integration doesn't show any bundles, etc, just the main game on the page. 86 | * ***Big picture mode is not done**, this is however a very high priority, as I have a steam deck and would like to get that part of the skin on the CSS loader repo. 87 | * Skin is not tested on MacOS please let me know what's not working and I'll add it to the to-do list! 88 | * Most of the web pages are still running a hacky version of "[webkit.css](https://github.com/AikoMidori/steam-dark-mode/blob/master/webkit.css)" and as such there are tons of accents that are still the vanilla steam blue, (hopefully all the backgrounds at least are dark-mode however). I will be updating this file myself eventually, however I'm waiting on an anticipated big update from Valve first (so we'll see when it happens if ever 😴😴😴). 89 | * The "translations" for the "Reload Steam", and "Restart Steam" buttons are google translate and as-such are most likely **all wrong** if anyone who is multilingual could help out here that would be quite appreciated! 90 | * On that same note, I will be implementing the correct regional pricing for the ITAD support, *before* I fix all the translations, it's just easier to start there. I am very sorry for any inconvienance this causes. 91 | 92 | ## Credits: 93 | * [PhantomGamers](https://ko-fi.com/phantomgamers) for SFP, and being generally a cool guy. 94 | * [Shiina](https://shiinaskins.com) for the Steam Dark Mode skin, which many pages in this project still use. 95 | * [ShadowMonster99](https://ko-fi.com/shadowmonster) for Millennium, and being generally a cool guy. 96 | 97 | 98 | -------------------------------------------------------------------------------- /config.css: -------------------------------------------------------------------------------- 1 | 2 | /* ##################################### 3 | /* #################### 4 | /* Config.CSS */ 5 | 6 | 7 | /* 8 | 9 | put any edits you want to make in the :root{} tag below 10 | you can find the variables in the /css/configDefaults.css file 11 | 12 | */ 13 | 14 | :root { 15 | 16 | /* ##################################### 17 | /* #################### 18 | /* Settings */ 19 | 20 | 21 | } 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | 2 | /*zoom in/out keys: -must be 1 char 3 | /*Key to zoom in*/ 4 | export const zoomInKey = "="; 5 | //Key to zoom out 6 | export const zoomOutKey = "-"; 7 | 8 | /*birthday for age gate: 9 | /*year*/ 10 | export const year = "1969"; 11 | //month 12 | export const month = "April"; 13 | //day 14 | export const day = "20"; 15 | 16 | export const filePathPrefix ="skins/ATOMS-main"; 17 | 18 | 19 | // Banned game tags 20 | export const staticKeywords = []; 21 | 22 | // Banned game name strings: 23 | export const staticAppNames = []; 24 | -------------------------------------------------------------------------------- /css/bigpicture.css: -------------------------------------------------------------------------------- 1 | @import url('configDefaults.css'); 2 | @import url('../config.css'); 3 | *{ font-family: var(--font) !important; } 4 | -------------------------------------------------------------------------------- /css/configDefaults.css: -------------------------------------------------------------------------------- 1 | /* Makes a funny "fire" effect around games with a negative review score. 2 | @import url('webkitNegativeText.css'); 3 | */ 4 | 5 | /* ##################################### 6 | /* #################### 7 | /* configDefaults.CSS */ 8 | /* 9 | hello and welcome to the default config file for the skin! 10 | ( if you want to change any of these variables instead copy this file too 11 | 12 | the config is broken down into a few main sections: 13 | Colors: 14 | pretty self explanitory, it has the main color definitions, 15 | as well as the variables used in the main skin files. 16 | Settings: 17 | Has various settings used around the skin, including font(s), 18 | visibilty settings for the "What's new" section + recents, 19 | a place to add a custom library title. 20 | and settings to change a few of the gradients to some fun alternates. 21 | 22 | Extra definitions: 23 | This is where you will find the values that you can change the other gradients too, 24 | as well as some miscillanious hard-coded values, unless you're customizing the skin, 25 | you probably wont ever even need to look at these! 26 | 27 | "old stuff: will be deleted": 28 | It's the first public beta, what can I say? These are vestigial values that are either 29 | used in the webkit file, or retained purely out of supersticion on my part, 30 | regardless; they are on the way out. 31 | Please do not reference any of these values for non-educational purposes! 32 | 33 | */ 34 | 35 | :root { 36 | 37 | /* ##################################### 38 | /* #################### 39 | /* COLORS 40 | 41 | in order for a color to be compatable with the skin; 42 | you have to put it in "r, g, b" format, 43 | without the normal "rgba()" formating. 44 | 45 | /*greys*/ 46 | --grey: 30, 30, 30; /*#1e1e1e*/ 47 | --greyDarkish: 28, 28, 28; /*#262626*/ 48 | --greyLightish: 38, 38, 38; /*#3d3d3d*/ 49 | --greyLight: 61, 61, 61; 50 | --greyLightest: 234, 234, 234; 51 | --greyDark: 25, 25, 25; /*#1b1b1b*/ 52 | --greyDarkest: 22, 22, 22; /*#161616*/ 53 | --white: 255, 255, 255; 54 | 55 | /*reds*/ 56 | --red: 255, 0, 0; 57 | 58 | /*oranges*/ 59 | --orange: 255, 102, 0; 60 | 61 | /*yellows*/ 62 | --yellow: 255, 255, 0; 63 | 64 | /*greens*/ 65 | --green: 51, 255, 0; 66 | 67 | /*purples*/ 68 | --purple: 102, 36, 226; 69 | 70 | /*blues*/ 71 | --blue: 66, 177, 249; /*0, 102, 255;*/ 72 | --blueLightish: 0, 0, 0; 73 | --blueLight: 127, 174, 196; /*#d7adff*/ 74 | --blueLightest: 97, 197, 237; 75 | --darkishblue: 0, 0, 0; 76 | --darkblue: 30, 37, 47; /*#ab37a7*/ 77 | --darkestblue: 33, 41, 52; 78 | 79 | /* Pinks */ 80 | --pink: 222, 123, 255; /*#c381ff*/ 81 | 82 | --pinkLightish: 205, 151, 255; 83 | --pinkLight: 215, 173, 255; /*#d7adff*/ 84 | --pinkLightest: 252, 106, 247; 85 | 86 | --darkishPink: 170, 106, 207; 87 | --darkPink: 171, 55, 167; /*#ab37a7*/ 88 | --darkestPink: 104, 54, 104; 89 | 90 | --pinkWhiteish: 174, 159, 174; /*#cbbcb*/ 91 | --pinkWhite: 203, 187, 203; /*#cbbcb*/ 92 | --pinkWhiteest: 229, 221, 229; 93 | 94 | --pinkWhiteDark: 131, 103, 131; 95 | --pinkWhiteDarkish: 188, 113, 188; 96 | 97 | /* ATOM'S COLORS */ 98 | /*change a bunch of accent colors at once*/ 99 | 100 | /*static accents*/ 101 | --accent: var(--pink); 102 | --accentLightish: var(--pinkLightish); 103 | --accentLight: var(--pinkLight); 104 | --accentLightest: var(--pinkLightest); 105 | --accentDarkish: var(--darkishPink); 106 | --accentDark: var(--darkPink); 107 | --accentDarkest: var(--darkestPink); 108 | 109 | /*static backgrounds*/ 110 | --backgroundLightish: var(--greyLightish); 111 | --backgroundLight: var(--greyLight); 112 | --backgroundLightest: var(--greyLightest); 113 | --background: var(--grey); 114 | --backgroundDarkish: var(--greyDarkish); 115 | --backgroundDark: var(--greyDark); 116 | --backgroundDarkest: var(--greyDarkest); 117 | 118 | --textAccented: var(--accent); 119 | --textLightish: var(--pinkWhiteish); 120 | --textLight: var(--pinkWhite); 121 | --textLightest: var(--pinkWhiteest); 122 | --textWhite: var(--white); 123 | --textDarkish: var(--pinkWhiteDarkish); 124 | --textDark: var(--pinkWhiteDark); 125 | 126 | 127 | /* some static steam color definitons*/ 128 | --ingame: #92be38; 129 | --steamNearWhite: #ccc; 130 | --steamIconWhite: #67707b; 131 | 132 | /* ##################################### 133 | /* #################### 134 | /* Settings */ 135 | 136 | /* #################### 137 | /* Global Settings */ 138 | --font: "Motiva Sans",Arial,Helvetica,sans-serif; /* changes font*/ 139 | --accentFilter: var(--filterBlueToPink); /*turns blues pink, must only be used when nessicary*/ 140 | /* #################### 141 | /* Library Settings */ 142 | --libraryText: "Home"; /* changes the home text in the library*/ 143 | --transparentGameOpacity: var(--opacity333); /* changes how transparent the uninstalled games in the library are*/ 144 | --gameShine: var(--accentGameShine); /*chages highlight game tile hover, see below for other options)*/ 145 | --achievementGlow: var(--accentAchievementGlow); /*chages rare achievement glow, see below for other options)*/ 146 | 147 | 148 | 149 | /* #################### 150 | /* Display Settings */ 151 | --WhatsNew: block; /* Set to "none" to hide the what's new section. */ 152 | --Recent: block; /* Set to [ none | block ] */ 153 | --highlightNegativeGames: none; /* Set to [ none | inline-block ] */ 154 | 155 | 156 | /* ##################################### 157 | /* #################### 158 | /* Extra definitons: 159 | 160 | This section is for hard-coded values that aren't, 161 | commonly referenced or meant to be changed. 162 | you probably don't want to change any of these. 163 | 164 | /* ######################## 165 | /* Game Shine Gradients: */ 166 | /*accent color*/ 167 | --accentGameShine: linear-gradient( to bottom, transparent 0%, rgba(var(--accent), var(--opacity85)) 12px, rgba(var(--accent), var(--opacity75)) 20%, transparent 60%, transparent 85%, rgba(var(--backgroundDarkest), var(--opacity8)) 100%); 168 | 169 | /*rainbow*/ 170 | --rainbowPrideGameShine: linear-gradient( to bottom, transparent 9%, rgba(var(--red), var(--opacity75)) 19%, rgba(var(--orange), var(--opacity75)) 25%, rgba(var(--yellow), var(--opacity75)) 36%, rgba(var(--green), var(--opacity75)) 45%, rgba(var(--blue), var(--opacity75)) 54%, rgba(var(--purple), var(--opacity75)) 63%, transparent 100%); 171 | 172 | /*trans pride*/ 173 | --transPrideGameShine: linear-gradient( to bottom, transparent 15%, rgba(var(--blue), var(--opacity75)) 22%, rgba(var(--pink), var(--opacity75)) 35%, rgba(var(--white), var(--opacity75)) 49%, rgba(var(--pink), var(--opacity75)) 68%, rgba(var(--blue), var(--opacity75)) 69%, transparent 100%); 174 | 175 | /*bisexual pride*/ 176 | --bisexualPrideGameShine: linear-gradient( to bottom, transparent 0%, rgba(var(--darkerPink)) 40%, rgba(var(--Purple), var(--opacity75)) 60%, rgba(var(--Blue), var(--opacity75)) 100%); 177 | 178 | /* ############################### 179 | /* Achievement Shine Gradients: */ 180 | /*accent*/ 181 | --accentAchievementGlow: repeating-conic-gradient( rgba(var(--accent), 0.178) 0%, rgba(var(--accent), 0) 6%, rgba(var(--accent), 0.178) 10%, rgba(var(--accent)) 26%, rgba(var(--accent), 0.178) 35%, rgba(var(--accent)) 40%, rgba(var(--accent), 0.178) 60%, rgba(var(--accent)) 82%, rgba(var(--accent), 0.178) 100% ); 182 | 183 | /*rainbow*/ 184 | --rainbowPrideAchievementGlow: linear-gradient( to bottom, rgba(var(--red), var(--opacity2)) 0%, rgba(var(--red), var(--opacity2)) 2%, rgba(var(--red), var(--opacity666)) 5%, rgba(var(--red), var(--opacity2)) 8%, transparent 11%, rgba(var(--orange), var(--opacity2)) 13%, rgba(var(--orange), var(--opacity666)) 15%, rgba(var(--orange), var(--opacity2)) 18%, transparent 20%, rgba(var(--yellow), var(--opacity2)) 22%, rgba(var(--yellow), var(--opacity666)) 25%, rgba(var(--yellow), var(--opacity2)) 28%, transparent 30%, rgba(var(--green), var(--opacity2)) 32%, rgba(var(--green), var(--opacity666)) 35%, rgba(var(--green), var(--opacity2)) 38%, transparent 40%, rgba(var(--blue), var(--opacity2)) 42%, rgba(var(--blue), var(--opacity666)) 45%, rgba(var(--blue), var(--opacity2)) 48%, transparent 50%, rgba(var(--purple), var(--opacity2)) 52%, rgba(var(--purple), var(--opacity666)) 57%, rgba(var(--purple), var(--opacity2)) 62%, transparent 100% ); 185 | 186 | /*trans pride*/ 187 | --transPrideAchievementGlow: linear-gradient( to bottom, rgba(var(--blue), var(--opacity666)) 0%, rgba(var(--blue), var(--opacity2)) 10%, transparent 10%, rgba(var(--pink), var(--opacity666)) 13%, rgba(var(--pink), var(--opacity2)) 20%, transparent 20%, rgba(var(--white), var(--opacity666)) 23%, rgba(var(--white), var(--opacity2)) 40%, transparent 40%, rgba(var(--pink), var(--opacity666)) 43%, rgba(var(--pink), var(--opacity2)) 50%, transparent 50%, rgba(var(--blue), var(--opacity666)) 53%, rgba(var(--blue), var(--opacity2)) 60%, transparent 60% ); 188 | 189 | /*############################# 190 | /* hardcoded opacity values*/ 191 | --opacity0: 0.0; 192 | --opacity1: 0.1; 193 | --opacity2: 0.2; 194 | --opacity3: 0.3; 195 | --opacity333: 0.3; 196 | --opacity4: 0.4; 197 | --opacity5: 0.5; 198 | --opacity6: 0.6; 199 | --opacity666: 0.666; 200 | --opacity7: 0.7; 201 | --opacity75: 0.75; 202 | --opacity8: 0.8; 203 | --opacity85: 0.85; 204 | --opacity9: 0.9; 205 | --opacity100: 1.0; 206 | 207 | --filterBlueToPink: hue-rotate(79deg); 208 | --filterBlueToPurple: hue-rotate(0deg); 209 | --filterBlueToBlue: hue-rotate(0deg); 210 | --filterBlueToRed: hue-rotate(146deg); 211 | --filterBlueToGreen: hue-rotate(282deg); 212 | --filterBlueToYellow: hue-rotate(221deg); 213 | --filterBlueToOrange: hue-rotate(192deg); 214 | 215 | 216 | 217 | /* ##################################### 218 | /* #################### 219 | /* old stuff: will be deleted, 220 | 221 | 222 | 223 | don't use any of this.... 224 | 225 | 226 | 227 | ...in fact forget you were even here at all. */ 228 | 229 | /*fixme*/ 230 | 231 | --black: #000000; 232 | --black-ish: #2a3f5a00; 233 | --realblack: #101010; 234 | --blacker: #1c1c1c; 235 | --darkergrey: #151515; 236 | --bedarkgrey: #161616; 237 | --begrey: #262627; 238 | --thegrey: #181818; 239 | --littlegrey: #282828; 240 | --darkgreyLightlyTransparent: #1e1e1ed4; 241 | --darkgreySlightlyTransparent: #1e1e1ebb; 242 | --lightgrey: #020209; 243 | --lightergrey: #353535; 244 | --dakerwhite: #b8b6b4; 245 | --trans: transparent; 246 | --invisiblegrey: #3e3e3e3d; 247 | --invisibleblack: #00000000; 248 | --halfvisibleblack: #00000077; 249 | 250 | --lessTransparentPink: #c281ffc3; 251 | --transparentPink: #c281ff7f; 252 | --moreTransparentPink: #c281ff3d; 253 | --transparenterAccentPink: #c281ff2c; 254 | --transparentbrightPink: #fc6af7ff; 255 | --transparentdarkPink: #ab37a7ff; 256 | --transparentdarkerPink: rgba(154, 70, 151, 0.815); 257 | --transparentaccyPink: #fc6af787; 258 | --transparenterPink: #fc69f737; 259 | --barelyVisiblePink: #fc6af71a; 260 | --hotpink: #ff00ff; 261 | 262 | --airblue: #2e3340; 263 | --gold: #ffcc6a; 264 | --bronze: #695833; 265 | 266 | --ingamegreen: #90ba3c; /* #90ba3c */ 267 | --darkgreen: #5c7e10; 268 | 269 | --offlinegrey: #919191; /* #919191 */ 270 | --onlineblue: #5db2fe; /* #5db2fe */ 271 | --online: #57cbde; 272 | --offline: #898989; 273 | 274 | --darkblue: #0e5984; 275 | --blu: #67c1f5; 276 | --blue-ish: #7cbef8; 277 | --blue-er: #a4d7f5; 278 | --lightblue: #c4e4f2; 279 | 280 | --brightpurple: #7d3cf5; 281 | --transpurple: #6624e2b3; 282 | 283 | --backgroundDarkTransparent:var(--halfvisibleblack); 284 | --accentLessTransparent: var(--lessTransparentPink); 285 | --accentTransparent: var(--transparentPink); 286 | --accentLightTransparentest:var(--transparenterAccentPink); 287 | --accentLessTransparent: var(--lessTransparentPink); 288 | --accentMoreTransparent: var(--transparenterPink); 289 | --accentDarkTransparent: var(--transparentdarkPink); 290 | --accentDarkerTransparent: var(--transparentdarkerPink); 291 | } 292 | 293 | 294 | -------------------------------------------------------------------------------- /css/controller.css: -------------------------------------------------------------------------------- 1 | @import url('../config.css'); 2 | *{ font-family: var(--font) !important; } 3 | 4 | 5 | /*header/footer bg*/ 6 | #Header, #Footer { 7 | background: rgba(var(--backgroundDarkest)) !important; 8 | } 9 | 10 | ._20sN9G_C5kZ9GO_mVUuWTD._2nCPl_RHHzapds8JFSJCat, 11 | ._3TvBVwaH8eIBabTdki35oe, 12 | ._2FqpD91Xarb7f0uIOuXFOR._15Ymb1OOfFUP4fAvwoG7Mc, 13 | ._34o03-8cUc3fQX1u650c0L, 14 | ._34EufgHrrmvt164EDrO1LB .ModalOverlayBackground, 15 | .APY6jDS50MNUPuX38IgC0 /* main controller settings bottom stripe */ 16 | { 17 | background: rgba(var(--background)) !important; 18 | } 19 | 20 | ._3RsRfCOW7Do0JNHcEs2nqX, 21 | ._20sN9G_C5kZ9GO_mVUuWTD, 22 | .KFGEkx9yKpW3Mu7w_6vzn, 23 | ._3A5ujtARm6atH4phJ5i1i6>._16sYNwqxz6giarbVaRUl7R, 24 | .IbaDJeXoUV46mwyWeP42O._3BeKk1O8jsZ3W8XtvhB-ci, 25 | ._2luCNihqvaHXeE1nGg0AXj /* background for tiles in the layouts menu*/ 26 | { 27 | border: none !important; 28 | background: rgba(var(--backgroundDarkish)) !important; 29 | } 30 | /* highlighted tab in various menus */ 31 | ._3Gp1bACHx__POxmy6Gd3kG { 32 | background: rgba(var(--backgroundLight)) !important; 33 | } 34 | 35 | /* slider color */ 36 | .SliderTrack, .SliderTrack::before { 37 | --left-track-color: rgba(var(--accent)) !important; 38 | } 39 | 40 | /* toggle color */ 41 | ._2bl0iQ9xigbq4Zd1NI6NZl::before { 42 | background: rgba(var(--accent)) !important; 43 | } 44 | /* hover on view layout button on main config page*/ 45 | button.cXzBZxhPBl7fZs9LODEnc.DialogButton.Primary:hover, button.cXzBZxhPBl7fZs9LODEnc.DialogButton:enabled.Primary:hover, button.cXzBZxhPBl7fZs9LODEnc.DialogButton:active.Primary:hover, button.cXzBZxhPBl7fZs9LODEnc.DialogButton:enabled:active:hover.Primary:hover{ 46 | background: rgba(var(--accent)) !important; 47 | } 48 | 49 | ._2MjBd1kKOEyVfqBN5OQOb1, ._2swvcAycL4d0UoHFDoe6-d, ._3i-XV362MvNEX3j_oWQDmQ, ._3s28A0XlOXUOAWRIuBKHuH, /* normal buttons on configurator page*/ 50 | ._19SMSHLlXqSLnXM3NjDNBS, /* normal buttons on mouse page*/ 51 | .NoRFSLSfwRijJQt7R51OT, /* normal buttons on keyboard + numpad page*/ 52 | ._3yP_pf4vx1Q4W0mt2DR32P /* normal buttons on system page*/ 53 | { 54 | border-color: rgba(var(--backgroundLight)) !important; 55 | background: rgba(var(--backgroundLight)) !important; 56 | } 57 | 58 | ._2MjBd1kKOEyVfqBN5OQOb1.CX4Dp8XyHswkGEEnWeUpq, ._2swvcAycL4d0UoHFDoe6-d.CX4Dp8XyHswkGEEnWeUpq, /* highlighted button on gamepad page */ 59 | ._3i-XV362MvNEX3j_oWQDmQ.CX4Dp8XyHswkGEEnWeUpq, ._3s28A0XlOXUOAWRIuBKHuH.CX4Dp8XyHswkGEEnWeUpq, /* highlighted button on gamepad page */ 60 | ._19SMSHLlXqSLnXM3NjDNBS.CX4Dp8XyHswkGEEnWeUpq, /* highlighted button on mouse page */ 61 | .NoRFSLSfwRijJQt7R51OT.CX4Dp8XyHswkGEEnWeUpq, /*highlighted button on keyboard + numpad page*/ 62 | ._3yP_pf4vx1Q4W0mt2DR32P.CX4Dp8XyHswkGEEnWeUpq /* action sets + system? page*/ 63 | { 64 | background-color: rgba(var(--accent)) !important; 65 | border-color: rgba(var(--accentLight)) !important; 66 | } 67 | /* highlighted controller button on configurator page */ 68 | .CX4Dp8XyHswkGEEnWeUpq>div>svg>path{ 69 | fill: rgba(var(--accent)) !important; 70 | } 71 | /* remove box shadow from controller configurator page */ 72 | ._3IBLc81yyL08OJ7rfKtF00._31ZleDJpmmVr6YwR5VLHiu ._2JobstxtZVYF3078DblN2M::before, ._2JobstxtZVYF3078DblN2M._1jNhbFODJy7sNdcnEeZkz4::before { 73 | box-shadow: none !important; 74 | } 75 | .GENH-QVzuWLVWg3zzR2Jh>path, /* controller in the middle*/ 76 | ._2e9_GS_zLi4uwjJP8ioCur>svg>path /* mouse outline*/ 77 | { 78 | stroke: rgba(var(--accent), var(--opacity2)) !important; 79 | } 80 | rect{ 81 | stroke: rgba(var(--accent)) !important; 82 | fill: rgba(var(--accent)) !important; 83 | } 84 | /* outlines on the controller page*/ 85 | ._3-2qPlSL8zwX9qNG6uOwd0._32vdogZvpModD0rwv2fbhE::before, 86 | ._3-2qPlSL8zwX9qNG6uOwd0.XDwwwI5FN_vpj5tzfKM-8::before { 87 | border: solid 2px rgba(var(--accent), var(--opacity2)) !important; 88 | } 89 | /* controller image in overview */ 90 | .rlz-U2wn9ktH5Z9trfpZa{ 91 | filter: grayscale(100%); 92 | } -------------------------------------------------------------------------------- /css/friends.css: -------------------------------------------------------------------------------- 1 | @import url('configDefaults.css'); 2 | @import url('../config.css');@import url('scrollbars.css'); 3 | 4 | * 5 | { 6 | font-family: var(--font) !important; 7 | box-shadow: none !important; 8 | border-top: none !important; 9 | border-bottom: none !important; 10 | } 11 | 12 | html,body{ 13 | background: rgb(var(--background)) !important; 14 | } 15 | 16 | /*hide scrollbar when unfocused*/ 17 | div::-webkit-scrollbar-thumb:window-inactive { 18 | background-clip: padding-box !important; 19 | -webkit-box-shadow: none !important; 20 | background: transparent !important; 21 | } 22 | ::selection { 23 | background: rgba(var(--accent)) !important; 24 | } 25 | /*all the pages*/ 26 | /*icon stroke*/ 27 | .SVGIcon_X_Line>line, 28 | .SVGIcon_Maximize>line, 29 | .SVGIcon_Maximize rect, 30 | .SVGIcon_Minimize>line, 31 | .SVGIcon_MagnifyingGlass path, 32 | .SVGIcon_PlusCircle line, 33 | ._10OzYaCdn7cgVMec9ozEJG ellipse, 34 | ._10OzYaCdn7cgVMec9ozEJG path 35 | { 36 | stroke: rgba(var(--accent)) !important; 37 | } 38 | /*icon fill*/ 39 | .SVGIcon_MagnifyingGlass path, 40 | .friendArm, 41 | .friendBody, 42 | .friendBodyFull, 43 | .friendHead>circle, 44 | .plusCircle, 45 | .Bubble, 46 | ._2ovvDFSsxzUoYuqzJsxecQ circle 47 | { 48 | fill: rgba(var(--accent)) !important; 49 | } 50 | 51 | /* fix create chatroom button */ 52 | .createChatRoomButton line { 53 | stroke: rgba(var(--backgroundLightish)) !important; 54 | } 55 | .createChatRoomButton { 56 | background: transparent !important; 57 | } 58 | /*disable top gradient*/ 59 | .statusHeaderGlow ellipse, 60 | ._1osHa9KHOmdCDNrA232z4N, 61 | ._2OoTJwlWvzvAysWOOEQaXS, 62 | .singleWindowFocusBar /* disable "focus" gradient*/ 63 | { 64 | display: none !important; 65 | } 66 | .focused:not(.singlewindow) .title-area-highlight { 67 | opacity: 0 !important; 68 | } 69 | /*context menu bottom stuff*/ 70 | .contextMenuGameTitle, .contextMenuSectionContent { 71 | background: rgba(var(--backgroundLightish)) !important; 72 | } 73 | /*context menu top stuff*/ 74 | .friendsContextMenu{ 75 | background: rgba(var(--background)) !important; 76 | } 77 | /*############################################## 78 | /*############################################## 79 | /*############################################## 80 | /*############################################## 81 | /* friends list 82 | /*light grey headers*/ 83 | .socialListTab, .groupHeaderContainer, .groupName, .friendsListSectionTitle { 84 | background: rgba(var(--backgroundLightish)) !important; 85 | } 86 | /*friends list bg*/ 87 | .quickAccessFriends, .friendlistListContainer, .friendListHeaderContainer, .ChatRoomList { 88 | background: rgba(var(--background)) !important; 89 | } 90 | 91 | /*dark grey bars*/ 92 | .friendListFooter{ 93 | background: rgba(var(--backgroundDarkish)) !important; 94 | } 95 | 96 | /* title bar + footer*/ 97 | .TitleBar { 98 | background: rgba(var(--backgroundDarkest)) !important; 99 | } 100 | /* player online status ordering fix*/ 101 | .labelHolder { 102 | z-index: 999 !important; 103 | } 104 | /* fix unread messages gradient for group chats*/ 105 | .ChatUnreadMessageIndicator{ 106 | background: radial-gradient(ellipse farthest-corner at 0% 50%, rgba(var(--accent), var(--opacity3)) 0%, rgba(var(--accent), var(--opacity2)) 40%, transparent 70%) !important; 107 | } 108 | /* fix fill for arrows on expand group chats w/ unread messages */ 109 | .Collapsed.HasUnreadChats .chatSectionTitle .SVGIcon_DoubleArrow .Arrow1, .Collapsed.HasUnreadChats .chatSectionTitle .SVGIcon_DoubleArrow .Arrow2 { 110 | stroke: var(--ingame) !important; 111 | } 112 | /* color circle for unread chat blibs*/ 113 | .chatUnreadCircle { 114 | background: var(--ingame) !important; 115 | } 116 | 117 | /*############################################## 118 | /*############################################## 119 | /*############################################## 120 | /*############################################## 121 | /*############################################## 122 | /* Chat Windows 123 | 124 | /*tabs + tab seperator line*/ 125 | ._2XZq-_f6npaQdAgeRzKIkz.Yd-DsWkYiFiYwpci--Yk_, .chatHeader { 126 | background: rgba(var(--backgroundLightish)) !important; 127 | } 128 | /*chat bg*/ 129 | .ChatHistoryContainer { 130 | background: rgba(var(--background)) !important; 131 | } 132 | /*bg for msg on hover*/ 133 | .msg:hover{ 134 | background: rgba(var(--backgroundLightish)) !important; 135 | } 136 | /*emoji picker in message*/ 137 | ._10OzYaCdn7cgVMec9ozEJG{ 138 | border: none !important; 139 | background: rgba(var(--backgroundDarkish)) !important; 140 | } 141 | /* typing notification*/ 142 | .FriendChatTypingNotification{ 143 | background: linear-gradient(to top, var(--darkgreyLightlyTransparent) 0%, var(--darkgreySlightlyTransparent) 12px, var(--accentInvisible) 80%); 144 | } 145 | /* input area container*/ 146 | html.client_chat_frame .chatWindow .chatEntry { 147 | background: rgba(var(--backgroundDarkish)) !important; 148 | } 149 | /* text input area & buttons*/ 150 | ._113iuw_HlE_qSgt9cGWCSv, button, .DialogInput_Wrapper>input.DialogInput { 151 | background: rgba(var(--backgroundDark)) !important; 152 | } 153 | /* file upload popup */ 154 | .chatFileUploadPreviewContainer{ 155 | background: rgba(var(--backgroundDarkish)) !important; 156 | } 157 | /* emoji picker background */ 158 | .PP7LM0Ow1K5qkR8WElLpt { 159 | background: rgba(var(--backgroundDarkish)) !important; 160 | } 161 | .chatRoomGroupNavColumn, /* chat rooms left side */ 162 | .MemberListColumn { 163 | background: rgba(var(--backgroundDarkish)) !important; 164 | } 165 | /* highlight for active channel in group chat */ 166 | .ActiveTextChannel { 167 | background: rgba(var(--backgroundLightish)) !important; 168 | } 169 | .friendSearchInput { 170 | background: rgba(var(--backgroundLightish)) !important; 171 | } 172 | -------------------------------------------------------------------------------- /css/img/404.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Plaer1/ATOMS/f10804362b342b139776085dd9a84c73872beab8/css/img/404.png -------------------------------------------------------------------------------- /css/img/RewardsSeason1Hero-grey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Plaer1/ATOMS/f10804362b342b139776085dd9a84c73872beab8/css/img/RewardsSeason1Hero-grey.png -------------------------------------------------------------------------------- /css/library.css: -------------------------------------------------------------------------------- 1 | @import url('configDefaults.css'); 2 | @import url('../config.css'); 3 | @import url('scrollbars.css'); 4 | 5 | /* stuff for testing small mode 6 | .WideWindow, 7 | .resize-triggers, 8 | ._3xRRJfD2xy95i9NhJxLTp0, 9 | ._1rDh5rXSFZJOqCa4UpnI4z ._3x1HklzyDs4TEjACrRO2tB, 10 | div.RGNMWtyj73_-WdhflrmuY._3WJCt_OkjPA6npxOtguSt5 > div._3xRRJfD2xy95i9NhJxLTp0.LibraryDisplaySizeMedium.WideWindow { 11 | opacity: 0.5; 12 | } 13 | 14 | 15 | /* Uncomment if you want to change the font */ 16 | *{ 17 | font-family: var(--font) !important; 18 | box-shadow: none !important; 19 | } 20 | 21 | html,body{ 22 | background: rgb(var(--background)) !important; 23 | } 24 | 25 | /* Uncomment if you to test stuff 26 | *:hover{ 27 | background: pink !important; 28 | } 29 | */ 30 | 31 | /*scrollbar stuff*/ 32 | div::-webkit-scrollbar-thumb:window-inactive { 33 | background-clip: padding-box !important; 34 | -webkit-box-shadow: none !important; 35 | background: transparent !important; 36 | } 37 | 38 | ::selection , 39 | ._5wILZhsLODVwGfcJ0hKmJ._1oEwirQksXfZ-3RWWslbAR, 40 | .RtSv39ZoBOySnb8XQ5hJf._3L1c8C0o_xXzPy26aoLBFd, 41 | ._7AlhCx3XGzBeIrQaCneUD._1gqEjB5QsKT_NftD1dEsdZ:not(._2cO0HdvLEGAdhosLekWsmo) ._19axKcqYRuaJ8vdYKYmtTQ::after, 42 | ._3OSZu24hLN7YKjqGi7I2Xp, 43 | ._3Sl0QHQ69uK7ZMQo5vBfrA ._3IWp5BnnsY_aMKCxhCjShP._317lekDG36odwSaDLtFQgd, 44 | .nC-pL16iUnIRcaj1UVnwq ._2tyaVs9BpqcW068aaOrO56, 45 | ._1FnJ6dPuknQFQ2RTpKTI16 >._2AzIX5kl9k6JnxLfR5H4kX, 46 | ._3cI5TXsFX3bvpR-7EBOtxq>._2AzIX5kl9k6JnxLfR5H4kX, 47 | ._1WdC0YUP8FT0dYWZ-QIVZL, 48 | ._3Rm36_oeAhvIg6ZYP9l1Jj, ._1FnTqlsi2_-TJf1d5apoS6, 49 | ._2_0JonK7eKEvh8IoOvq0-B, 50 | .SEmVpmXrYVl3OxL1sDFTg, 51 | ._3oavRVhIS9tC3vBsFT4Ggi, 52 | .mA39Hqv8LacDppegb_Q_Z, 53 | ._2DpXjzK3WWsOtUWUrcuOG7, 54 | ._3QVsc21O3y-P2jJiD5t6-s._11Gq_4A3cMXdDfUnoeM14v, 55 | ._2bl0iQ9xigbq4Zd1NI6NZl::before, 56 | ._3-_jME_xsuvgT3Dvq4bw_q /* highlighted button for backgrounds in multi select on library screen */ 57 | 58 | { 59 | background: rgb(var(--accent)) !important; 60 | } 61 | 62 | /*make blue stuff accented*/ 63 | img[src="/images/defaultappimage.png"], /* award ribbon in reviews*/ 64 | .gWDyh18yme_n7VmrYhmid._2oPMu032IJnXb5-21W07V-._3AXaY4djCODzJ6On5MRKno, /*thumbs up in game page*/ 65 | ._2BlTqJQonHkEpBSpiC1NEA, /*thumbs up bg color*/ 66 | .bGfjajFo4DI-ULSQxw1KY, /* blue "post" button*/ 67 | img[src="https://steamcommunity-a.akamaihd.net/economy/emoticon/steamthumbsup"], /*steam thumbs up icon*/ 68 | ._2lVtDi3eSjGcLfXVsRgoUy, /* bubble effect when you like posts on game pages */ 69 | ._2lNdDLgjQdeBXmMlPO8lvq, /* community load header in library game pages */ 70 | ._3KDkLoCR8OM8xfdQysKn9t ._30N3oYMkrAbxU-Vxc_1l6C, /*weird line on downloads page*/ 71 | ._2_FomluqqgQ2Hx8ON3AVep .wi0pDywRgOCxhG7OqQNaA, /*download bar in library preview download button thing*/ 72 | img[src="/images/steam_spinner.png"] /*loading spinner*/ 73 | { 74 | filter: var(--accentFilter); 75 | } 76 | img[src^="data:image/png;base64"] /*missing game images in download menu*/ 77 | { 78 | filter: var(--accentFilter) !important; 79 | } 80 | 81 | /*########################################## 82 | /* Various backgrounds */ 83 | html, 84 | ._27m9Qbg4ShilOgwvYZWV8l, 85 | ._3JV6-V6z0SKmNu6TlI1Bdr, 86 | ._2sNr7PFYcJZWNkEMCDVVPR, 87 | ._23zCI_59RJTWRvY-_YCFb9, 88 | .u1xD3KJEgksF_J_5TLZzO , 89 | .DialogContent_InnerWidth, .DialogContent._DialogLayout, 90 | .DialogContent._DialogLayout._31Kkeb6BIUOVu8QL-dgtY-, 91 | ._1mfQu39T7gxcr0KSHso6_A , 92 | ._20sN9G_C5kZ9GO_mVUuWTD._2nCPl_RHHzapds8JFSJCat, 93 | ._32mHvRSmD7AVK9OIOPlaFu, ._2ilpH-HpvuSm6s5MWX5bA-, 94 | .LclHwcOfHFpwObYMD1HLa, 95 | .OhSdLYuggDtBcWjYP0j_9 , 96 | ._1_cYNJSvS6IXs9vLTEYjy5, 97 | ._2r4TK4BAuU-J4FuF_O7v_5, ._31ptFGGMZrSQc5BCX1e5lm, ._3-V8vjmrwuJM6Ws3tsjFJj>div, 98 | ._2PF_m-I5yte3WnQhpcz8RC, 99 | ._20QAC4WMXm8qFE8waUT5oo ._12vo5L1hsNGdao6_ssuirS .DialogInput_Wrapper, 100 | ._3pSPluBgf0NeR1kkCLWMhR, 101 | ._2FxbHJzYoH024ko7zqcJOf, 102 | .DesktopUI .DialogMenuPosition>._30wJO3MC4x-I1OWpy1TAeE._DialogInputContainer , 103 | ._1LJqx_qFOC8199RBQO5kU8, 104 | ._3Sb2o_mQ30IDRh0C72QUUu, 105 | .GTdO0X-5EOwChz3fc2iLU, ._2SdqX9SccD_TtDat-bNo5-, 106 | ._2JKpGzeAiwmBdY73bfRXz-, 107 | ._2gSXCB6PbOlMxslr8hm6dm, 108 | ._2Nq6ov7A1hGcHXVOXNt_OE, 109 | ._3FmxxjyWNHU1PrBGnBe6tm._2l416KfEtI4CL0mCUEmOBw, 110 | ._3f3VJUtyLXUf_JDFE-BaQ6, /* interior bg color */ 111 | ._37mmOlZM_8n5yJAG5CHiW7, /*info section background color*/ 112 | ._1ENHEsrSLcTRtPQFl1F-wL._1DvwQt0JN-Ogp_4tVZdkzX, /*some loading screens*/ 113 | ._1xLWmfPlWGV47FujycPN_c, /*main background in find popup*/ 114 | ._3Mbhnlk1Go2j8yCdjthzc7.IbePLaw-vSvhG1GTenYFg._2KB3yVOsiRCK9qK6mwKl9c, /*top right in downloads*/ 115 | .RGNMWtyj73_-WdhflrmuY ._2CmrnGY-Amtd83ScJkFvx2, /*random loading screen bg*/ 116 | .Rp8QOGJ2DypeDniMnRBhr, /*root HTML bg*/ 117 | ._27qasW5wLU4h4nUgawpo1q /*more rando bgs*/ 118 | 119 | { 120 | background: rgb(var(--background)) !important; 121 | } 122 | 123 | /*############################ 124 | /*lightish backgrounds*/ 125 | .Oo5JPcEk_erKEYAzYp2nY.Panel, 126 | ._1Lfu7heMNRsXXo1Yfzsp17, 127 | ._2ilpH-HpvuSm6s5MWX5bA-, 128 | ._3wtPUBfilFITcl1s4u6A7T, 129 | .wgbDI6To-SKawn9wQwVaw /* post-game-summary */ 130 | { 131 | background: rgba(var(--backgroundLightish)); 132 | } 133 | /*########################################################### 134 | /*########################################################### 135 | /* top bar */ 136 | 137 | 138 | /*top bar height(s)*/ 139 | ._39oUCO1OuizVPwcnnv88no, ._3Z7VQ1IMk4E3HsHvrkLNgo, ._3Z3ohQ8-1NKnCZkbS6fvy { 140 | min-height: 40px !important; 141 | } 142 | 143 | 144 | 145 | /*top bar nav alignment */ 146 | ._2D64jIEK7wpUR_NlObDW76{ 147 | padding-top: 10px !important; 148 | align-items: flex-start !important; 149 | min-height: 24px !important; 150 | } 151 | /* back forward buttons*/ 152 | ._25lBLzuVeYAUG279up4xP8._1LYTHQzcI1u6tcxbbcc5V3, /*back */ 153 | ._25lBLzuVeYAUG279up4xP8._2cO0HdvLEGAdhosLekWsmo /* forward */ 154 | { 155 | padding-top: 3px !important; 156 | } 157 | /*top bar text-dropdowns fix*/ 158 | ._2Lu3d-5qLmW4i19ysTt2jT, 159 | ._3yD46y5pd3zOGR7CzKs0mC /*account container top right*/ { 160 | max-height: 30px !important; 161 | height: 30px !important; 162 | } 163 | /*account container top right*/ 164 | ._3yD46y5pd3zOGR7CzKs0mC { 165 | margin-top: -4px !important; 166 | } 167 | 168 | /*back/forward arrows*/ 169 | ._25lBLzuVeYAUG279up4xP8 ._2cO0HdvLEGAdhosLekWsmo{ 170 | padding-bottom: 0 !important; 171 | } 172 | 173 | /* JS cheater class for the downloads button */ 174 | .Focusable-downloads { 175 | display: flex; 176 | flex-grow: 1; 177 | flex-direction: row-reverse; 178 | align-items: center; 179 | height: 40px; 180 | -webkit-app-region: drag; 181 | } 182 | /* downloads / friends container */ 183 | ._3vCzSrrXZzZjVJFZNg9SGu{ 184 | background: none !important; 185 | height: 40px !important; 186 | flex-basis: unset !important; 187 | padding-right: 6px !important; 188 | } 189 | /*############################################################ 190 | /*text accents*/ 191 | ._1Ve4VFO2EEkeNZdel_Asky a, 192 | ._117rQTHH1RIewY7sSlvg3Z:hover ._34F9wkevkmNM4yJfpPQ0GL, 193 | ._117rQTHH1RIewY7sSlvg3Z:hover.Sil68-ocRzI8Xeloq3d7R, 194 | .ErrorBoundary>h1, 195 | .ErrorBoundary>h1 a, 196 | ._1sCy-pm412Smb0wJx0W-4._1-TLiuTZBQNz2fvBGj6aq-, 197 | ._2rjVTGz8aLvqOdz5v2gq5C, 198 | ._2mZ8LlvoUiyeEUtIWuTri, 199 | ._16dREqlIrGflPfbNtLGdJh, 200 | ._2iEkqauHWZiCAOo0cWqnPP, 201 | ._2u9RZJXJSDg3e-J_EX1exE, 202 | .KId8dCUFbYh_bz-jozERD, 203 | .QQy4BCjcpjCfAvTKAqBq3, 204 | ._3csl-MPe-hKuT8hQpOqEG5, 205 | .Udzrpqr8534T5DvVZveNP, 206 | .A_A2B6fTn_MPLlGCmsLtd a:not(.LinkButton), 207 | ._3kXEpnxa2qb5znYMSbKT0p, 208 | ._3PLc4OJQTCKFtmy81QMYv5._33jqEbo2sBXJZ08w9BkdEM>svg>path, 209 | ._2ns4wnmgr4XBzARpwn2NZ1, 210 | ._23Pup1qLf91kwjALd-jFGc, 211 | ._2g3Gley034M1ZGhcq005s, 212 | ._1vIlyxb5BAwKPUkOfO94qZ, 213 | ._2hfibYuzyMOQ0sj2egsHh0, 214 | ._3yD46y5pd3zOGR7CzKs0mC.online, 215 | ._3i0kopAostOz2IDi9HqmeN, 216 | .H4JE-8OU0E7AeMZY3bEeM, /* Family library name in settings */ 217 | .BRmrC-jnwpXqye4oYB21C button.DialogButton, /*double down arrows in settings*/ 218 | .qX4kNo6O0M-mYntdErKSJ, 219 | .online .nOdcT-MoOaXGePXLyPe0H, /*online player text*/ 220 | ._1ujzuoxGhLunHZQqHAqRgg div /* 'major update' text in library*/ 221 | { 222 | color: rgb(var(--textAccented)) !important; 223 | } 224 | 225 | /* root menu */ 226 | ._3s0lkohH8wU2do0K1il28Y { 227 | margin-top: 0px !important; 228 | border-radius: 6px !important; 229 | min-width: 242px !important; 230 | height: 30px !important; 231 | z-index: 3 !important; 232 | } 233 | /*root menu toggle button bg*/ 234 | .rootToggleButtonWrapperDiv{ 235 | background: rgba(var(--backgroundLightish)) !important; 236 | border-radius: 6px !important; 237 | } 238 | /* top bar button formatting*/ 239 | ._2Szzh5sKyGgnLUR870zbDE, 240 | ._1TdaAqMFadi0UTqilrkelR, 241 | ._2EQ7ghgqIdjKv9jsQC0Zq9 242 | { 243 | padding: 0 0 0 0 !important; 244 | height: 30px !important; 245 | width: 30px !important; 246 | } 247 | /*extended download button fix*/ 248 | ._2EQ7ghgqIdjKv9jsQC0Zq9{ 249 | flex-direction: row-reverse !important; 250 | } 251 | /* Base styles for the elements */ 252 | ._2VtAqT03BpBsVdmxwptn9D, 253 | ._2EQ7ghgqIdjKv9jsQC0Zq9 { 254 | /* Apply transition to width changes */ 255 | transition: max-width 0.2s ease-in-out, min-width 0.5s ease-in-out, width 0.5s ease-in-out !important; 256 | } 257 | 258 | /*handlebar section of titlebar*/ 259 | ._30vB9DdsPK7VrZAbb5Q1Av{ 260 | flex-shrink: 2 !important; 261 | } 262 | 263 | /*root menu when open*/ 264 | ._1Ky59qmywxOUtNcI1cgmkX._3s0lkohH8wU2do0K1il28Y{ 265 | z-index: 999 !important; 266 | } 267 | /*1963*/ 268 | @media (max-width: 1919px) { 269 | /*downloads fix:*/ 270 | ._2VtAqT03BpBsVdmxwptn9D, 271 | ._1sCy-pm412Smb0wJx0W-4 { 272 | max-width: 16vw !important; 273 | min-width: 2vw !important; 274 | } 275 | .ip-YZhijAMZcuRoXBGiye 276 | { 277 | margin-right: 6px !important; 278 | } 279 | /*downloads fix:* 280 | ._2VtAqT03BpBsVdmxwptn9D, 281 | ._2EQ7ghgqIdjKv9jsQC0Zq9 { 282 | max-width: 15vw; 283 | min-width: 15vw; 284 | } 285 | @media (max-width: 1499px) { 286 | /*hide "downloading" text*/ 287 | ._1xCcFYWIrJ7W8WRDmGvR3y>div:nth-child(1){ 288 | display: none !important; 289 | } 290 | /*downloads fix:*/ 291 | ._2VtAqT03BpBsVdmxwptn9D, 292 | ._1sCy-pm412Smb0wJx0W-4 { 293 | max-width: 11vw !important; 294 | min-width: 2vw !important; 295 | } 296 | 297 | @media (max-width: 1401px) { 298 | /* Base styles for the elements */ 299 | ._2VtAqT03BpBsVdmxwptn9D, 300 | ._2EQ7ghgqIdjKv9jsQC0Zq9 { 301 | /* Apply transition to width changes */ 302 | transition: max-width 0.1s ease-in-out, min-width 0.2s ease-in-out !important; 303 | } 304 | ._2VtAqT03BpBsVdmxwptn9D{ 305 | max-width: 6vw !important; 306 | min-width: 2vw !important; 307 | } 308 | @media (max-width: 1324px) { 309 | /* Base styles for the elements */ 310 | ._2VtAqT03BpBsVdmxwptn9D, 311 | ._2EQ7ghgqIdjKv9jsQC0Zq9 { 312 | /* Apply transition to width changes */ 313 | transition: max-width 0.1s ease-in-out, min-width 0.2s ease-in-out !important; 314 | } 315 | ._2VtAqT03BpBsVdmxwptn9D{ 316 | max-width: 4.20vw !important; 317 | } 318 | } 319 | } 320 | } 321 | 322 | 323 | 324 | 325 | /*############################################### 326 | /* various darker grey elements*/ 327 | /* top bar buttons BGs, size, etc */ 328 | ._2EQ7ghgqIdjKv9jsQC0Zq9, 329 | ._1TdaAqMFadi0UTqilrkelR, 330 | ._3qhGkQ5qLVNQQ-J2-uPoHt, 331 | ._3yD46y5pd3zOGR7CzKs0mC, 332 | ._5wILZhsLODVwGfcJ0hKmJ, 333 | ._3LLH_F43MTu6UtG4Z3kudv, 334 | ._1vG-vFfwpDeNStVbyo1Qy6.P46KVvNDqOUONCIHBwKgU, 335 | ._2OwqXw1nhBL430bsYTeEr-, 336 | .DialogButton._DialogLayout.Secondary.Focusable, 337 | ._3ebCJiEl-ybizhZ4avcFw5, ._1VNuYHM6BPBOJspC6zPf5r.IbePLaw-vSvhG1GTenYFg, 338 | ._2lNdDLgjQdeBXmMlPO8lvq 339 | .cvw8DHMUBKuZs5DeLJOQ2, 340 | ._316Uo4SBrQ_beBdSYn2HNO, 341 | ._3qDWQGB0rtwM3qpXTb11Q-, 342 | ._1-H7tKj_QcGHLUbx5wVsGg, 343 | ._1JlC29Ic6L-QvL-39X_d-X, ._1HZy7BvOZuPT8feUwadL4W, .NEMXhMlqXOCJwfgWlHXhT, 344 | ._2sYIghGVXJr6tsQVvcryy8, 345 | ._2Q95p8Q2cZFieeOi06-FS9 /* show all collections button*/ 346 | { 347 | background: rgb(var(--backgroundLightish)) !important; 348 | } 349 | 350 | /* downloads button*/ 351 | ._2EQ7ghgqIdjKv9jsQC0Zq9 { 352 | margin-top: 1px; 353 | margin-right: 8px !important; /*matches vanilla value*/ 354 | } 355 | /*friends button*/ 356 | ._1TdaAqMFadi0UTqilrkelR{ 357 | margin-top: 1px; 358 | justify-content: center !important; 359 | } 360 | /*news button*/ 361 | ._5wILZhsLODVwGfcJ0hKmJ{ 362 | margin-top: -4px !important; 363 | } 364 | /*alert button*/ 365 | .RtSv39ZoBOySnb8XQ5hJf { 366 | margin-top: -2px !important; 367 | } 368 | /*downloads background 369 | ._2EQ7ghgqIdjKv9jsQC0Zq9, 370 | ._1TdaAqMFadi0UTqilrkelR /*friends background 371 | { 372 | height: 24px; 373 | padding-top: 0px; 374 | padding-bottom: 0px; 375 | margin-top: 6px; 376 | min-width: 24px; 377 | padding-right: 12px; 378 | padding-left: 12px; 379 | border-radius: 2px; 380 | 381 | } 382 | /* downloads expanded sizing */ 383 | .ip-YZhijAMZcuRoXBGiye { 384 | flex-direction: inherit !important; 385 | justify-content: center !important; 386 | padding-top: 0; 387 | padding-bottom: 0; 388 | border-width: 6px,6px,6px,6px; 389 | border: rgba(var(--backgroundLightish)); 390 | height: 24px; 391 | } 392 | ._2VtAqT03BpBsVdmxwptn9D{ 393 | max-width: 384px; 394 | padding-top: 0; 395 | padding-bottom: 0; 396 | height: 30px; 397 | background: rgba(var(--backgroundLightish)); 398 | border-radius: 2px; 399 | 400 | } 401 | 402 | /* downloads expanded progress bar */ 403 | .yZ55NhARZGx1Awk2qs8pS { 404 | --color-progress-bar-foreground: rgba(var(--accent)) !important; 405 | } 406 | /* downloads expanded game icon */ 407 | ._2VtAqT03BpBsVdmxwptn9D ._1KrJ3sFAqPBN9mfpaNTU5F{ 408 | width: 24px !important; 409 | height: 24px !important; 410 | } 411 | 412 | ._1TdaAqMFadi0UTqilrkelR>._1KrJ3sFAqPBN9mfpaNTU5F, /* friends icon */ 413 | .ip-YZhijAMZcuRoXBGiye>._1KrJ3sFAqPBN9mfpaNTU5F /* downloads icon */ 414 | { 415 | width: 20px !important; 416 | height: 20px !important; 417 | } 418 | /* downloads icon top padding*/ 419 | .ip-YZhijAMZcuRoXBGiye>._1KrJ3sFAqPBN9mfpaNTU5F { 420 | padding-top: 2px !important; 421 | } 422 | 423 | ._2VtAqT03BpBsVdmxwptn9D{ 424 | transition: opacity .1s ease-in-out; 425 | /*transition-duration: 10ms;*/ 426 | } 427 | 428 | /* color highlighted tab text */ 429 | ._7AlhCx3XGzBeIrQaCneUD._1gqEjB5QsKT_NftD1dEsdZ:not(._2cO0HdvLEGAdhosLekWsmo) ._19axKcqYRuaJ8vdYKYmtTQ{ 430 | color: rgba(var(--accent)) !important; 431 | text-shadow: 0px 0px 1px rgba(var(--accent)) !important; 432 | } 433 | 434 | 435 | ._3Z7VQ1IMk4E3HsHvrkLNgo, 436 | ._2LyGIHuQ8SFKb5T262YUvg, 437 | ._3m0MnUo45wjLOfNLpZ-3KH, 438 | ._3T1iFy2maYycwqgFuzERyf, 439 | ._1E_SL1bTibeQ3PQRBZoS_-, 440 | ._1E_SL1bTibeQ3PQRBZoS_-::before, 441 | ._3z2NYCkFizMu4fMvWTIBUG 442 | .L_ehQkR9HaVr2cdS1P1lc, 443 | ._3QRf-tp5VddAF00vWY5Gn8,._31ptFGGMZrSQc5BCX1e5lm,._38t1mljBjmJfqjpVzMT1CG,._1ul9ZRBfhF0vyj-hrit6nU, 444 | #popup_target > div > div.ModalPosition._2JKpGzeAiwmBdY73bfRXz- > div > div._1I-uT20jYsj5wUT4VIGjW8 > form > div.DialogToggleField._DialogInputContainer._DialogLayout, 445 | #popup_target > div > div.ModalPosition._2JKpGzeAiwmBdY73bfRXz- > div > div._1I-uT20jYsj5wUT4VIGjW8 > form > div:nth-child(5) /* what's new hidden game counter box*/ 446 | { 447 | background: rgb(var(--backgroundDarkest)) !important; 448 | } 449 | 450 | 451 | 452 | /*online color in avatar box on top bar*/ 453 | .online ._3xUpb5DWXPFNcHHIcv-9pe { 454 | background: linear-gradient(to bottom, rgba(var(--accent)) 0%, rgba(var(--accent)) 30%, rgba(var(--accent)) 70%, rgba(var(--accent)) 100%) !important; 455 | } 456 | 457 | ._3OhUxFVlQYr9W5ThxstR8k, 458 | ._3wJnTtcTLEp0R7eQj_mK8Y, 459 | ._2CmrnGY-Amtd83ScJkFvx2, 460 | ._2foCkpRXhqq0UGVE50BWqj, 461 | svg.GG9wVQz6PLlhGHlJyZh4E, 462 | ._3_IUVzR9tpG_JKEjhwXEAb, 463 | ._3cX_vEKsN9S9EmR0O5w1Ol /* get rid of strange blurred images on major update notes*/ 464 | { 465 | display: none !important; 466 | } 467 | 468 | /*make url bar font biger*/ 469 | ._1bGewp3tfzqAF6fVTFFUOz .UkR3sY319PuaUNuUWks2K ._2m_orETo6AghzAnc0sISCt .MZPxEZcxAGtPDf1NYtouS { 470 | font-size: 17px !important; 471 | } 472 | 473 | /* make new buttons have (correct) backgrounds 474 | TODOTODOTODOTODOTODOTODOTODOTODOTODO 475 | TODOTODOTODOTODOTODOTODOTODOTODOTODO 476 | */ 477 | 478 | 479 | 480 | 481 | /*########################################################### 482 | /*########################################################### 483 | /*main library page:*/ 484 | 485 | ._1S6CCCQlcTTAAHh3LMTLh1, 486 | .ErrorBoundary, 487 | ._1ABCOz8DSrl-YJdh1xD-m0, 488 | ._1ABCOz8DSrl-YJdh1xD-m0._1dDpSuaJBGZzS41s0SPk4c, 489 | ._3KDkLoCR8OM8xfdQysKn9t, 490 | ._2EOPVRm0FFn4LjXaGZ0Xh9, 491 | ._1n7Wloe5jZ6fSuvV18NNWI:not(.Play):not(.Install):not(.Update):not(.Pause), 492 | .PP7LM0Ow1K5qkR8WElLpt /* context menu bg*/ 493 | { 494 | background: rgb(var(--backgroundDarkish)) !important; 495 | } 496 | 497 | /* context menu hover bg*/ 498 | ._18z-3vkWndCBO5WJgFldRK, 499 | ._1n7Wloe5jZ6fSuvV18NNWI:hover:not(.Play):not(.Install):not(.Update):not(.Pause) { 500 | background: rgb(var(--accent)) !important; 501 | border-color:rgb(var(--accent)) !important; 502 | color: rgb(var(--backgroundLightest)) !important; 503 | } 504 | 505 | /* context menu install/update button bg */ 506 | .DesktopUI .Z5iAXBkRFGnwpXsO8ANTl.Install, 507 | .DesktopUI .Z5iAXBkRFGnwpXsO8ANTl.Update, 508 | .DesktopUI .Z5iAXBkRFGnwpXsO8ANTl.Play, 509 | .DesktopUI .Z5iAXBkRFGnwpXsO8ANTl.Pause, 510 | .DesktopUI .Z5iAXBkRFGnwpXsO8ANTl.Cancel, 511 | .DesktopUI .Z5iAXBkRFGnwpXsO8ANTl.Stop 512 | { 513 | background: linear-gradient(-45deg, rgba(var(--accentLight)) 0%, rgba(var(--accent)) 70%); 514 | } 515 | 516 | /* context menu install/update button bg:hover */ 517 | .DesktopUI .Z5iAXBkRFGnwpXsO8ANTl.Install:hover, 518 | .DesktopUI .Z5iAXBkRFGnwpXsO8ANTl.Update:hover, 519 | .DesktopUI .Z5iAXBkRFGnwpXsO8ANTl.Play:hover, 520 | .DesktopUI .Z5iAXBkRFGnwpXsO8ANTl.Pause:hover, 521 | .DesktopUI .Z5iAXBkRFGnwpXsO8ANTl.Cancel:hover, 522 | .DesktopUI .Z5iAXBkRFGnwpXsO8ANTl.Stop:hover 523 | { 524 | background: linear-gradient(-45deg, rgba(var(--accentLightest)) 0%, rgba(var(--accentLight)) 70%); 525 | } 526 | 527 | /* Game Page shelf text color. & remove background */ 528 | [class^="DialogDropDown"] { 529 | color: rgba(var(--accent)) !important; 530 | background: transparent !important; 531 | } 532 | /*remove background from shelf dropdown*/ 533 | ._DialogInputContainer:hover { 534 | background: var(--halfTransparent) !important; /* same as the lines seperating the shelfs *//*fixme*/ 535 | 536 | } 537 | /* What's new with you?*/ 538 | ._17uEBe5Ri8TMsnfELvs8-N { 539 | display: var(--WhatsNew) !important; /* SET TO A JS VARIABLE EVENTUALLY, SEE IF I CAN OVERLOAD?*/ 540 | background: rgba(var(--background)) !important; 541 | } 542 | /*what's new background update (news?)*/ 543 | .B-vCdL38RiJlhfSRgZv78._278jFDApipeB4kFsi44_F5:hover ._3Rb_j3lgHaVVIud4Gla7_m, .gpfocus>.B-vCdL38RiJlhfSRgZv78._278jFDApipeB4kFsi44_F5 ._3Rb_j3lgHaVVIud4Gla7_m { 544 | background: rgba(var(--accent), var(--opacity333)) !important; 545 | } 546 | 547 | 548 | /*what's new toggle background*/ 549 | ._3Sl0QHQ69uK7ZMQo5vBfrA ._2Fw7gGOSCr7y9elv8iszxw._2OUxguuTe-NeOXZXxSNQsw { 550 | background: rgba(var(--accentDark)) !important; 551 | } 552 | 553 | 554 | /*################# 555 | /* icon colors 556 | 557 | /*icon stroke*/ 558 | .SVGIcon_Minimize line, 559 | .SVGIcon_Restore rect, 560 | .SVGIcon_Restore line, 561 | .SVGIcon_Restore polyline, 562 | .SVGIcon_Maximize rect, 563 | .SVGIcon_Maximize line, 564 | .SVGIcon_X_Line line, 565 | .SVGIcon_SketchArrowTopLeft path, 566 | ._3mzKdQXht__YHo6PX1LmB6._1QFFkxM5hw-43miIiylbwq circle, /*make sort by date/playable accented when active */ 567 | ._3mzKdQXht__YHo6PX1LmB6._1QFFkxM5hw-43miIiylbwq polyline, /*make sort by date/playable accented when active */ 568 | ._3mzKdQXht__YHo6PX1LmB6._1QFFkxM5hw-43miIiylbwq path /*make sort by date/playable accented when active */ 569 | { 570 | stroke: rgb(var(--accent)) !important; 571 | } 572 | 573 | /*icon fill*/ 574 | .SVGIcon_ReadyToPlay path, 575 | div._1tIg-QIrwMNtCm7NcYADyi.k-QNT9kzOEOvG0U_kGmwr>svg>path, 576 | ._34YgMAbrVXVMMfXvsZAU9_>path, 577 | ._1PTQ2mq0eTaG8ifW8juu81>path, 578 | ._2AVfXlAuHy0YQ4h1B3Kk2R._2gr2M1hKDYXcLNwR7k05oF>path, 579 | ._1Iw5xoXQXfmRjgjWTKbm_G>svg>g>path, 580 | ._1Iw5xoXQXfmRjgjWTKbm_G defs>clipPath>path, 581 | ._1Iw5xoXQXfmRjgjWTKbm_G>svg path, 582 | [direction="left"]>path, 583 | ._1BXjK5v8XI_SEhGola5ftn>svg path 584 | .DialogDropDown_Arrow polygon, 585 | .Sf3urgalDvD2sZqNjEV9i, 586 | .QQy4BCjcpjCfAvTKAqBq3>svg 587 | ._3mzKdQXht__YHo6PX1LmB6._1QFFkxM5hw-43miIiylbwq path, 588 | ._1kCN0pAntrcGCSmcc-vYdk path, 589 | .online>svg.SVGIcon_MobilePhone>path, 590 | .SVGIcon_ChatBubble>g>path, /*chat bubble on popups/for comment sections*/ 591 | .DialogDropDown_Arrow .SVGIcon_DownArrowContextMenu /*down arrows like in settings*/ 592 | { 593 | fill: rgb(var(--accent)) !important; 594 | } 595 | /*scroll to top button*/ 596 | ._1J21tLst5SEhBPkVRT53UV>div{ 597 | background: rgba(var(--accent)) !important; 598 | color: rgba(var(--backgroundLightest)) !important; 599 | } 600 | /*scroll to top button*/ 601 | ._1J21tLst5SEhBPkVRT53UV>div:hover{ 602 | background: rgba(var(--accentLightest)) !important; 603 | color: rgba(var(--backgroundDarkest)) !important; 604 | } 605 | /*update footer*/ 606 | ._2iJsgdTIX9Tj23rWnB7Q-c{ 607 | background-color: rgba(var(--accent)); 608 | } 609 | /*play next text box frosted background color*/ 610 | ._2d1hSvdpY5L2-GN1EnUb9Z { 611 | background: rgba(var(--accentDarkest)) !important; 612 | } 613 | /*play next install button*/ 614 | ._3AjoLnMNKxYmNTGTJCLfgs._3VOR2AeYATx3qSE0I-Pm-5._3yGiLsl__NlNYprnB7rt14 { 615 | background: radial-gradient(ellipse farthest-corner at 50% 40%, rgba(var(--accent)) 0%, rgba(var(--accentDark)) 100%); 616 | } 617 | /*play next install button:hover*/ 618 | ._54PuCatl_tYG836TOs4Mv .WYgDg9NyCcMIVuMyZ_NBC ._3AjoLnMNKxYmNTGTJCLfgs:hover:not(._1aml4h4CSJbtrNbX4brUYs):not(._1_Bo2Ied5s2Od4YKYTOsau) { 619 | background: radial-gradient(ellipse farthest-corner at 50% 40%, rgba(var(--accentLight)) 0%, rgba(var(--accentDark)) 100%); 620 | } 621 | /*play next play button*/ 622 | ._3AjoLnMNKxYmNTGTJCLfgs._1_Bo2Ied5s2Od4YKYTOsau:not(._1aml4h4CSJbtrNbX4brUYs) { 623 | background: radial-gradient(circle farthest-corner at 50% 50%, rgba(var(--accentLight)) 0%, rgba(var(--accent)) 100%); 624 | } 625 | /*play next play button:hover*/ 626 | ._54PuCatl_tYG836TOs4Mv ._3AjoLnMNKxYmNTGTJCLfgs._1_Bo2Ied5s2Od4YKYTOsau:not(._1aml4h4CSJbtrNbX4brUYs):hover { 627 | background: radial-gradient(circle farthest-corner at 50% 50%, rgba(var(--accentLight)) 0%, rgba(var(--accent)) 100%); 628 | } 629 | /*now available banner at top of library*/ 630 | ._2Ae5emb7JLG4NvS2OmutTx{ 631 | background: radial-gradient(100% 100% at 45% 45%, #864885 0%, #1a1a24 100%); 632 | } 633 | /*glow at bottom of now available banner*/ 634 | ._2Ae5emb7JLG4NvS2OmutTx ._2K0aVYjPsk-WFUDacCkX8L { 635 | background: transparent; 636 | } 637 | /*starbust on game in now available banner*/ 638 | ._2Ae5emb7JLG4NvS2OmutTx ._1moqKkq1K4nAp1XqDtnRdQ:before { 639 | background: conic-gradient(from 90deg at 50% 50%, 640 | #ffc6fe, transparent, 641 | #ffc6fe, transparent, 642 | #ffc6fe, transparent, 643 | #ffc6fe, transparent, 644 | #ffc6fe, transparent, 645 | #ffc6fe, transparent, 646 | #ffc6fe, transparent, 647 | #ffc6fe, transparent, 648 | #ffc6fe, transparent, 649 | #ffc6fe, transparent, 650 | #ffc6fe); 651 | } 652 | /*################# 653 | /* game info popup on tile hover in library*/ 654 | 655 | /*hide bottom blur 656 | ._1R9r2OBCxAmtuUVrgBEUBw._3Ehhd5MxErV_bXQE4qVhzB { 657 | z-index: -1; 658 | }*/ 659 | 660 | /*################# 661 | /*game shine*/ 662 | .MyNb5dG3FsBnKdp8j_ntk { 663 | background: var(--gameShine); 664 | } 665 | 666 | /*########################################################### 667 | /*########################################################### 668 | /* Sidebar on main library page: 669 | 670 | /* hide contents of library name/home text on sidebar */ 671 | ._3O48LaKWcabKx07xdrt1TH{ 672 | visibility: hidden !important; 673 | } 674 | /* change "library title" (home text on sidebar) 675 | note: you may need to adjust the size for best clarity.*/ 676 | ._3O48LaKWcabKx07xdrt1TH::before{ 677 | content: var(--libraryText) !important; 678 | visibility: visible !important; 679 | font-size:150% !important; 680 | } 681 | 682 | ._9sPoVBFyE_vE87mnZJ5aB, 683 | ._36Dp_CLuZbFCm7KDc9tbCv, 684 | ._26Gmfe09NRsnF7eprTZYdY, 685 | ._5ZEYSTRBHDswDtriduXW0 , 686 | ._1e6tjguQEHdYIehM9aRmO5, 687 | ._3Kelh1-_v6xHfRjF68n7NB,._16xC0mtOWoLbvSQbmo_ycv,._3ctGqQID5-8adtd7HlZ3YM, 688 | ._38FqIwZQKW6BlRyzN66pi6 , 689 | ._1UXC2lGcmNTGepRJTwtuH0 690 | ._31ptFGGMZrSQc5BCX1e5lm , 691 | ._3fLo166MlaNqP8r8tTyRz, 692 | body > div.PP7LM0Ow1K5qkR8WElLpt.EDl_mzaY3WxkgmYVD8W4d.visible._1S6CCCQlcTTAAHh3LMTLh1, 693 | ._2sGn0cBsD44TjnUIh-lx9d, 694 | ._1bGewp3tfzqAF6fVTFFUOz .UkR3sY319PuaUNuUWks2K, 695 | ._1ZS_xta5HMXzR8JgxDH6n7,._20QAC4WMXm8qFE8waUT5oo,._1ijTaXJJA5YWl_fW2IxcaT, 696 | ._1fbRpYO_BFDlMdFLsQMGVE,._3x1HklzyDs4TEjACrRO2tB, 697 | .Z6wLCsR5it0hjFblgrb6, 698 | ._2KA0p5xYePYygXUbjjsPzA, 699 | ._1RfxlV1H3JsSs-aRaXVJQt, 700 | ._2kwFFHckg8jvnwJfg9-la8, 701 | .mKmrOjr9bGjKAolgp9NoD, /* modal popup(s) settings footer */ 702 | .IIJeieZ-ZPRfIULY7uSDG.Panel /*steam deck compatability pannel in info tab*/ 703 | 704 | { 705 | background: rgb(var(--backgroundDark)) !important; 706 | } 707 | 708 | /* makes above rule visable MIGHT NOT BE REQUIRED? 709 | ._3x1HklzyDs4TEjACrRO2tB { 710 | background-image: none !important; 711 | } 712 | /*FIXME/*FIXME/*FIXME/*FIXME/*FIXME/*FIXME/*FIXME/*FIXME/*FIXME/*FIXME/*FIXME/*FIXME/*FIXME/*FIXME/*FIXME 713 | /*FIXME/*FIXME/*FIXME/*FIXME/*FIXME/*FIXME/*FIXME/*FIXME/*FIXME/*FIXME/*FIXME/*FIXME/*FIXME/*FIXME/*FIXME/*FIXME/*FIXME*/ 714 | ._2TKEazUUS3TlniZfpc8OOe{ 715 | background: rgba(0, 0, 0, 0) !important; 716 | } 717 | 718 | 719 | /* header for hidden games on sidebar */ 720 | 721 | 722 | /*############################################### 723 | /* NEEDS FIXED 724 | /* highlight game list headers on hover */ 725 | ._2sYIghGVXJr6tsQVvcryy8:hover { 726 | background: rgba(var(--accent), var(--opacity5)) !important; 727 | } 728 | /* highlight game list games on hover */ 729 | ._2-O4ZG0KrnSrzISHBKctFQ:hover, 730 | ._2-O4ZG0KrnSrzISHBKctFQ._3cMVyOc-9F9Jvp3uKF7_xj /* games w/ too short names*/ 731 | { 732 | background: rgba(var(--accent), var(--opacity333)) !important; 733 | } 734 | 735 | ._1UBpAXP408Ez_L_mXhW5Q9 /*currently selected game background*/ 736 | { 737 | background: rgba(var(--accent), var(--opacity666)) !important; 738 | } 739 | ._1UBpAXP408Ez_L_mXhW5Q9._2-O4ZG0KrnSrzISHBKctFQ:hover, 740 | ._1UBpAXP408Ez_L_mXhW5Q9._2-O4ZG0KrnSrzISHBKctFQ._3cMVyOc-9F9Jvp3uKF7_xj, 741 | ._1UBpAXP408Ez_L_mXhW5Q9._2-O4ZG0KrnSrzISHBKctFQ :hover, 742 | ._1UBpAXP408Ez_L_mXhW5Q9 ._2-O4ZG0KrnSrzISHBKctFQ:hover, 743 | ._1UBpAXP408Ez_L_mXhW5Q9 ._2-O4ZG0KrnSrzISHBKctFQ._3cMVyOc-9F9Jvp3uKF7_xj, 744 | ._1UBpAXP408Ez_L_mXhW5Q9 ._2-O4ZG0KrnSrzISHBKctFQ :hover /*currently selected game background hovered*/ 745 | { 746 | background: rgba(var(--accent), var(--opacity8)) !important; 747 | color: rgba(var(--textWhite)); 748 | } 749 | ._1UBpAXP408Ez_L_mXhW5Q9._2-O4ZG0KrnSrzISHBKctFQ .cMb2tLY-QjdRohM5U6Btp, 750 | ._1UBpAXP408Ez_L_mXhW5Q9 ._2-O4ZG0KrnSrzISHBKctFQ .cMb2tLY-QjdRohM5U6Btp /*games with updates on the sidebar and long names*/ 751 | { 752 | background: rgba(var(--accent), var(--opacity333)) !important; 753 | color: rgba(var(--textLightest)) !important; 754 | } 755 | 756 | ._2-O4ZG0KrnSrzISHBKctFQ._1UBpAXP408Ez_L_mXhW5Q9._5YTBr7WwIfzVU_3nUtAph, 757 | ._1UBpAXP408Ez_L_mXhW5Q9 ._2-O4ZG0KrnSrzISHBKctFQ._5YTBr7WwIfzVU_3nUtAph /* color for currently selected (installed) game*/ 758 | { 759 | 760 | color: rgba(var(--textLightest)); 761 | } 762 | 763 | ._2SXJM0PeFEi3gbC7V3S5pE>span,._3uk3F1BmAJQR6rl1TPcaif, /*update que'd text color.*/ 764 | .DialogInput.DialogInputPlaceholder.DialogTextInputBase.Focusable::placeholder /* search input placeholder text color */ 765 | { 766 | color: rgba(var(--accentLight)) !important; 767 | } 768 | 769 | /*collections button squares hover/collections page squares */ 770 | 771 | .nC-pL16iUnIRcaj1UVnwq ._2tyaVs9BpqcW068aaOrO56:hover, 772 | ._3pSPluBgf0NeR1kkCLWMhR.eNLOx4LVceeMwRvTVWh3 ._2tyaVs9BpqcW068aaOrO56 { 773 | background: rgba(var(--accentLightest)) !important; 774 | } 775 | 776 | /*make sort by date/playable grey when inactive */ 777 | ._3mzKdQXht__YHo6PX1LmB6 circle,._3mzKdQXht__YHo6PX1LmB6 polyline, ._3mzKdQXht__YHo6PX1LmB6 path { 778 | stroke: var(--almostWhiteSteam) !important; 779 | } 780 | /* part of above item*/ 781 | ._3mzKdQXht__YHo6PX1LmB6 path { 782 | fill: var(--almostWhiteSteam) !important; 783 | } 784 | 785 | 786 | /*########################################################### 787 | /*GAME PAGE*/ 788 | /* game tags in the top right of image area*/ 789 | ._1HS4twEHtDJ_8MWgJT4VBd { 790 | background: rgba(var(--background), var(--opacity7)); 791 | } 792 | 793 | /* install button:hover*/ 794 | ._1FnJ6dPuknQFQ2RTpKTI16 >._2AzIX5kl9k6JnxLfR5H4kX:hover { 795 | background: radial-gradient( rgba(var(--accent)) 0%, rgba(var(--accent)) 55%, rgba(var(--accentLightest)) 100%) !important; 796 | } 797 | /* play button:hover */ 798 | ._3cI5TXsFX3bvpR-7EBOtxq>._2AzIX5kl9k6JnxLfR5H4kX:hover{ 799 | background: radial-gradient( rgba(var(--accent)) 0%, rgba(var(--accent)) 55%, rgba(var(--accentLightest)) 100%) !important; 800 | } 801 | /* triangle in the play button*/ 802 | .playTriangle, 803 | .SVGIcon_FlatArrow>polygon, /* triangle in play dropdown */ 804 | .SVGIcon_Download>path, /* install icon in install button */ 805 | .SVGIcon_Download>svg>path, /* install icon in install button */ 806 | :not(._1Pb6PMh_3L5p5NzuUz0Pp9)>._2AzIX5kl9k6JnxLfR5H4kX svg /* update icon*/ 807 | { 808 | fill: rgba(var(--backgroundLightest)) !important; 809 | } 810 | /* stop in the stop/cancle button*/ 811 | ._3ydigb6zZAjJ0JCDgHwSYA._2AzIX5kl9k6JnxLfR5H4kX>svg>line{ 812 | stroke: rgba(var(--backgroundLightest)) !important; 813 | } 814 | 815 | /*rare achievment glow color*/ 816 | ._2D_EJk8-jCnfqiwoKkOMVh{ 817 | height: 128px; 818 | width: 128px; 819 | } 820 | ._1Z2eJs9-zNTKcWKy4M-oDE { 821 | height: 128px; 822 | width: 128px; 823 | 824 | background: var(--achievementGlow) !important; 825 | 826 | /* ORIGINAL FOR REFERENCE:*//* 827 | background: 828 | repeating-conic-gradient( 829 | rgba(255, 217, 0, 0.178) 0%, 830 | rgba(255, 184, 78, 0) 6%, 831 | rgba(255, 217, 0, 0.178) 10%, 832 | #ffb84e 26%, 833 | rgba(255, 217, 0, 0.178) 35%, 834 | #ffb84e 40%, 835 | rgba(255, 217, 0, 0.178) 60%, 836 | #ffb84e 82%, 837 | rgba(255, 217, 0, 0.178) 100%); */ 838 | } 839 | /* buttons, button icons, text color */ 840 | ._1kCN0pAntrcGCSmcc-vYdk, 841 | ._35_OgqfHHZfSzTYfv367K6 /* yes / no button */ 842 | { 843 | color: rgba(var(--accent)); 844 | background-color: rgba(var(--backgroundLightish)); 845 | } 846 | 847 | /*info page*/ 848 | ._25oBZpa3dUcMw8QAsa2u67 { 849 | padding: 0px !important; 850 | } 851 | /* do you reccomend this game to other players */ 852 | ._3LE-6w1ItIAB4CKJFCa3Od, ._2SAb6geDpe6toA1GaP0GjH._1E_ENwpaym7n3ke0XFpczv { 853 | background: var(--almostWhiteSteam); 854 | } 855 | 856 | /* MAJOR UPDATE background */ 857 | ._39Zk32AvV5cr6g-83IVRVS { 858 | border-image: linear-gradient(to right, transparent 0%, rgba(var(--accent), var(--opacity333)) 18px, rgba(var(--accentDark)) 50%, rgba(var(--accentDarkest)) 100%) !important; 859 | background: linear-gradient(to right, transparent 0%, rgba(var(--accent), var(--opacity333)) 18px, rgba(var(--accentDark)) 50%, rgba(var(--accentDarkest)) 100%) !important; 860 | } 861 | /* MAJOR UPDATE background left-gradient*/ 862 | ._3oMUSjOFNB0E9LWcL2sE7{ 863 | background: linear-gradient(to right, transparent 0%, rgba(var(--accent), var(--opacity333)) 18px, rgba(var(--accentDark)) 18px, rgba(var(--accentDarkest)) 22px) !important; 864 | } 865 | 866 | /* my review (you've played x hours, have you changed your mind?)*/ 867 | ._1ckgRqBDUbThcwQTHHL6K0{ 868 | border-color: rgba(var(--accent)) !important; 869 | } 870 | /*link color*/ 871 | ._1O62-3Y03GsnA0709QyJ_O, 872 | .DialogBody a { 873 | color: rgba(var(--accentDark)) !important; 874 | } 875 | .DialogBody a:hover { 876 | color: rgba(var(--accentLight)) !important; 877 | } 878 | 879 | .update-item-type /* mil update item type icon*/ 880 | { 881 | background: rgba(var(--accent)) !important; 882 | } 883 | /*thumbs up bg color 884 | ._2BlTqJQonHkEpBSpiC1NEA { 885 | background: radial-gradient(ellipse farthest-corner at 6% 8%, rgb(var(--accentDarkish)) 0%, rgb(var(--accentDarkish)) 34%, rgb(var(--accentDark)) 100%); 886 | } 887 | 888 | /*############################# 889 | /* achievement hover popup / achievement click popup*/ 890 | 891 | /*close button*/ 892 | .iYW5hWQwg14WYT4PV3xe_ 893 | { 894 | background: rgba(var(--backgroundLightish)) !important; 895 | border:none !important; 896 | } 897 | 898 | /*fast transition*/ 899 | ._3vg1vYU7iTWqONciv9cuJN { 900 | transition: opacity .15s !important; 901 | } 902 | 903 | /* featured update content border */ 904 | ._3xi-HLpFVHaakihoqhQ_6C { 905 | border-image: none !important; 906 | border-color: rgba(var(--accent)) !important; 907 | } 908 | 909 | 910 | /*############################# 911 | /*Misc: 912 | 913 | /* bubble effect when you like a post*/ 914 | ._2lVtDi3eSjGcLfXVsRgoUy{ 915 | background-image: radial-gradient(circle, rgba(var(--accent), 33%), transparent 20%), radial-gradient(circle, transparent 20%, rgba(var(--accent), 33%), transparent 30%), radial-gradient(circle, rgba(var(--accent), 33%), transparent 20%), radial-gradient(circle, rgba(var(--accent), 33%), transparent 20%), radial-gradient(circle, transparent 10%, rgba(var(--accent), 22%) , transparent 20%), radial-gradient(circle, rgba(var(--accent), 33%), transparent 20%), radial-gradient(circle, rgba(var(--accent), 33%), transparent 20%), radial-gradient(circle, rgba(var(--accent), 33%), transparent 20%), radial-gradient(circle, rgba(var(--accent), 33%), transparent 20%), radial-gradient(circle, transparent 20%, rgba(var(--accent), 33%), transparent 30%) !important; 916 | } 917 | 918 | 919 | /*########################################################### 920 | /*DOWNLOADS*/ 921 | 922 | /* download color gradient again*/ 923 | .edQzwM57P-T5K3eDGkyvZ{ 924 | background: linear-gradient(to right, transparent 15%, rgba(var(--accent)) 90%) !important; 925 | } 926 | /* download color gradient*/ 927 | div._3mZ2rKd2RECK4q4ufmsDYX.pHDI1ddoKXceD5KL7W-4z{ 928 | background: linear-gradient(to right, rgba(var(--accent)) 0%, rgba(var(--accentLightest)) /*accent color but lighter*/ 100%) !important; 929 | } 930 | 931 | 932 | /* download graph bar color */ 933 | g.gpPxCvNVctmdxo8yfyEAJ, g rect:nth-child(1){ 934 | color: rgba(var(--accent), var(--opacity333)) !important; 935 | } 936 | 937 | 938 | /* active DL border color */ 939 | ._1VNuYHM6BPBOJspC6zPf5r.IbePLaw-vSvhG1GTenYFg { 940 | border-color: rgba(var(--backgroundLightish)) !important; 941 | } 942 | 943 | 944 | /*########################################################### 945 | /*modal popup(s) settings */ 946 | 947 | 948 | /*remove border from main box 949 | .lwprNSgEnKfVSHIzsgbFi { 950 | border: 0 !important; 951 | } 952 | /*side-buttons*/ 953 | ._240i58XQ0w78YFrd_p-9UY { 954 | background: rgba(var(--backgroundDarkish)) !important; 955 | border: 0 !important; 956 | } 957 | 958 | /*sides of modal (not the content) */ 959 | /*change blur in background */ 960 | ._37MAYpIjl0IDA1xVhhsuX8>div:not(._2WEP32t2FdvHSRBiOZug83):not(._24sm_rs0RtItOALHFVIKms):not(._19eb8NMS53lqZR33su0kTr):not(.iJ6kMinIXkRkY49NT2sOx):not(._2SoWN3laHiRo1XbmPyTyPF) { 961 | backdrop-filter: blur(0px) brightness(0.65) saturate(0.7); 962 | } 963 | /* darken overlay on backgroudtn to compensate for missing blur */ 964 | ._37MAYpIjl0IDA1xVhhsuX8>div { 965 | background: rgba(var(--backgroundDarkest), var(--opacity5)) !important; 966 | } 967 | 968 | 969 | /*############################# 970 | /* modals popup*/ 971 | /* various buttons*/ 972 | button.DialogButton.Primary, /*accented button*/ 973 | .gkgG-dWgjpwS_aqlcMNTM /* selected drive for install game modal */ 974 | { 975 | transition-property: opacity,background,color,box-shadow,text-decoration; 976 | transition-duration: .2s; 977 | background: rgba(var(--accent)) !important; 978 | } 979 | /*disabled text*/ 980 | button.DialogButton.Primary.Disabled{ 981 | text-decoration: line-through !important; 982 | color: rgba(var(--backgroundDarkest)) !important; 983 | } 984 | .disabled{ 985 | text-decoration: line-through !important; 986 | } 987 | 988 | .Oo5JPcEk_erKEYAzYp2nY.Panel:hover, /*unselected buttons:hover*/ 989 | ._gDkIgrqhJq-FtbuR9wJi, /*cheevo list backgrounds*/ 990 | ._2lgHVJbZwxb10Md7bZ6USU, /*other cheevo list backgrounds*/ 991 | ._1tTuIhabs4uQQmR2udzw_P, /*cheevo list background tips*/ 992 | ._2wBK7MqJSrj6QCxf3357yL /*headers in the game overview page*/ 993 | { 994 | background: rgba(var(--backgroundLight)) !important; 995 | } 996 | 997 | /*comment menu border*/ 998 | ._39nnaT_CLE0m_WXVIrAwaG { 999 | background: rgba(var(--backgroundDarkest)); 1000 | } 1001 | 1002 | /*check boxes on install popup*/ 1003 | stop { 1004 | stop-color: rgba(var(--accent)); 1005 | } 1006 | 1007 | /*############################ 1008 | /* steam award popup */ 1009 | 1010 | 1011 | 1012 | 1013 | 1014 | /*############################ 1015 | /*system info popup 1016 | /* activate a product on steam 1017 | /* top color highlight*/ 1018 | #popup_target > div > div.FullModalOverlay > div.ModalOverlayContent.active > div > div > div.ModalPosition_TopBar { 1019 | background: linear-gradient(to right, rgba(var(--accent)) 0%, rgba(var(--accentLightest)) 100%) !important; 1020 | } 1021 | 1022 | /*add a non-steam game 1023 | /* search input bg*/ 1024 | .DialogInput.DialogInputPlaceholder.DialogTextInputBase.Focusable{ 1025 | background: rgba(var(--backgroundLightish)) !important; 1026 | color: rgba(var(--accentLight)) !important; 1027 | } 1028 | 1029 | 1030 | 1031 | /*############################################## 1032 | /* settings 1033 | 1034 | /* slider color */ 1035 | ._2_vG6TwMW2XtyLlTEaODH9, ._2_vG6TwMW2XtyLlTEaODH9::before { 1036 | --left-track-color: rgba(var(--accent)); 1037 | } 1038 | 1039 | 1040 | /*############################################## 1041 | /* collections. 1042 | 1043 | ._3IWn-2rn7x98o5fDd0rAxb{ 1044 | background: rgba(var(--backgroundDark)) !important; 1045 | } 1046 | 1047 | /*############################################## 1048 | /* in-game overlay*/ 1049 | /*exit game button*/ 1050 | .BoygotvcKo4DC4dSix8G3 { 1051 | border-radius: 666px !important; 1052 | color: rgba(var(--accent)) !important; 1053 | } 1054 | /*game logo in game overlay /*fixme*//* 1055 | ._3d_bT685lnWotXxgzKW6am.yDr03475kalWBTwAE-Rnw { 1056 | height: 360px; 1057 | width: 640px; 1058 | } 1059 | 1060 | /*fix sides of achievements header*/ 1061 | ._36Dp_CLuZbFCm7KDc9tbCv { 1062 | padding-right: 0px !important; 1063 | margin-right: 24px !important; 1064 | border-right-width: 24px !important; 1065 | margin-left: 24px !important; 1066 | padding-left: 0px !important; 1067 | border-left-width: 24px !important; 1068 | border-color: rgba(var(--backgroundDark)) !important; 1069 | } 1070 | 1071 | /*header when you scroll down in the achievements menu*/ 1072 | ._3IBLc81yyL08OJ7rfKtF00._31ZleDJpmmVr6YwR5VLHiu ._2JobstxtZVYF3078DblN2M::before, ._2JobstxtZVYF3078DblN2M._1jNhbFODJy7sNdcnEeZkz4::before, 1073 | .C9tvuqqEXGcrkcAtHrQ_R, /*fix little box in game overview page*/ 1074 | .TitleBar.title-area, 1075 | ._3z2NYCkFizMu4fMvWTIBUG, /*title headers on modal popups in library (news, etc)*/ 1076 | ._2heIyaBp5LdaF76WpjYU4R, /*game overview title bar*/ 1077 | ._3wNylaCAUJ8XtRM6mu2C0k /*achievements title bar*/ 1078 | { 1079 | box-shadow: none !important; 1080 | background: rgba(var(--backgroundDarkest)) !important; 1081 | } 1082 | 1083 | 1084 | 1085 | 1086 | /*############################################## 1087 | /* misc stuff 1088 | /*title bar on misc popups*/ 1089 | 1090 | .ModalDialogPopup .ModalDialogBody.DesktopUI .PopupFullWindow .TitleBar { 1091 | height: calc(1rem + 12px) !important; 1092 | } 1093 | 1094 | /*loading throbber*/ 1095 | ._39-WTtOSEPJqAEjOcNGE3j{ 1096 | filter: var(--accentFilter) !important; 1097 | } 1098 | .ip-YZhijAMZcuRoXBGiye{ 1099 | padding-right: 0px !important; /*fix offcenter dl button*/ 1100 | } -------------------------------------------------------------------------------- /css/menus.css: -------------------------------------------------------------------------------- 1 | @import url('configDefaults.css'); 2 | @import url('../config.css'); 3 | *{ /*Uncomment if you want to change the font */ 4 | font-family: var(--font) !important; 5 | box-shadow: none !important; 6 | } 7 | 8 | html,body{ 9 | background: rgb(var(--background)) !important; 10 | } 11 | /* fix menus at the top */ 12 | .contextMenuItem, 13 | ._1UgM1Pm8SbTWX7_2f-crGt /* notif dropdown */ 14 | { 15 | background: rgba(var(--background)) !important; 16 | } 17 | 18 | /* notifications dropdown button backgrounds */ 19 | ._2caCrhFIrYqRuguK-cB6be, 20 | ._1oERP7bVictkby2hP4BBva 21 | { 22 | background: rgba(var(--backgroundLight)) !important; 23 | } 24 | -------------------------------------------------------------------------------- /css/scrollbars.css: -------------------------------------------------------------------------------- 1 | /*###################################################### 2 | /* scrollbars */ 3 | 4 | /* scrollbar normally*/ 5 | ::-webkit-scrollbar { 6 | background: transparent !important; 7 | width: 0.6rem !important; 8 | } 9 | 10 | /*scrollbar thumb color*/ 11 | ::-webkit-scrollbar-thumb { 12 | background: rgba(var(--accent)) !important; 13 | } 14 | 15 | body::-webkit-scrollbar-thumb:window-inactive { 16 | background-clip: padding-box !important; 17 | background: transparent !important; 18 | } 19 | /*online player color*/ 20 | .online>div div { 21 | color: rgba(var(--accent)) !important; 22 | } 23 | -------------------------------------------------------------------------------- /css/utilities/hideWhatsNew.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --WhatsNew: none; 3 | } -------------------------------------------------------------------------------- /css/webkit.css: -------------------------------------------------------------------------------- 1 | @import url('configDefaults.css'); 2 | @import url('../config.css'); 3 | @import url('shiinaLib/webkit.css'); 4 | @import url('scrollbars.css'); 5 | /*@import url('webkitNegativeText.css'); 6 | 7 | /* custom element css: 8 | ################# 9 | ################# 10 | ################ 11 | #################################################################################### 12 | ###################################################################################### */ 13 | /* set the font*/ 14 | *{ /*Uncomment if you want to change the font */ 15 | font-family: var(--font) !important; 16 | } 17 | html,body{ 18 | background: rgb(var(--background)) !important; 19 | } 20 | .game_page_background, 21 | .apphub_background { 22 | background: rgba(var(--background)) !important; 23 | } 24 | 25 | /*scrollbar stuff*/ 26 | div::-webkit-scrollbar-thumb:window-inactive { 27 | background-clip: padding-box !important; 28 | -webkit-box-shadow: none !important; 29 | background: transparent !important; 30 | } 31 | 32 | /*TODO: 33 | make this shit so that it just uses steam classes instead of doing this way*/ 34 | 35 | .game_area_purchase_not_refundable, .game_area_purchase_custom_cart_credit { 36 | padding-top: 0 !important; 37 | } 38 | 39 | 40 | /*############################################################################# 41 | /*############################################################################# 42 | /*############################################################################# 43 | /*############################################################################# 44 | /*############################################################################# 45 | /*############################################################################# 46 | /* Update news popup (internal content) 47 | 48 | /* bg for main area and arrow area */ 49 | .O7VJKyPtoS7TXCr6mrwCr, ._1N7O3VXbkpN2z55HsSDZsi{ 50 | background: rgba(var(--background)) !important; 51 | } 52 | 53 | /*################# 54 | /* icon colors 55 | 56 | /*icon stroke*/ 57 | polyline, circle, line{ 58 | stroke: rgba(var(--accent)) !important; 59 | } 60 | 61 | /*icon fill transparent light*/ 62 | ._3ZyZUkBq73dLvZ6zKdM9PQ path, ._3ZyZUkBq73dLvZ6zKdM9PQ path /* left right arrows when they are not clickable*/ 63 | { 64 | fill: rgba(var(--accent), var(--opacity3)) !important; 65 | } 66 | 67 | /*icon fill full color*/ 68 | ._3ZyZUkBq73dLvZ6zKdM9PQ.cwA5j4AsP5OB7WjWuOlFv path /* left right arrows when they are clickable*/ 69 | { 70 | fill: rgba(var(--accent)) !important; 71 | } 72 | 73 | /*################# 74 | /* button colors 75 | 76 | /* click for details*/ 77 | ._3YohCYvZ6UbfgCXH2uhaOD 78 | { 79 | background: rgba(var(--accent)) !important; 80 | } 81 | 82 | /* New! */ 83 | ._2_KY_e11FV0ftXR2_7TMmP{ 84 | background: rgba(var(--accent), var(--opacity2)) !important; 85 | } 86 | /*################# 87 | /* status colors 88 | 89 | /*online color*/ 90 | .online>.friendBlockContent { 91 | color: rgba(var(--accent)); 92 | } 93 | 94 | /*################# 95 | /*little boxes */ 96 | 97 | /*unselected boxes*/ 98 | .ZQrtMhZB1tpkd2bgBXyIF 99 | { 100 | background: var(--accentMoreTransparent) !important; 101 | } 102 | 103 | /* highlighted box*/ 104 | .ZQrtMhZB1tpkd2bgBXyIF.cwA5j4AsP5OB7WjWuOlFv { 105 | background: rgba(var(--accent)) !important; 106 | } 107 | 108 | /* for the error page in que lmao*/ 109 | #responsive_page_template_content > div.page_header_ctn > div.page_content > h2 { 110 | white-space:pre; 111 | display:inline-block; 112 | } 113 | #responsive_page_template_content > div.page_header_ctn > div.page_content > h2 span { 114 | display:inline-block; 115 | transform-origin:left; 116 | width: 69px; 117 | } 118 | 119 | /* congrats you found the bottom 120 | (required to make loading text "fun") 121 | */ 122 | .LoadingText { 123 | white-space:pre; 124 | } 125 | .LoadingText span { 126 | display:inline-block !important; 127 | transform-origin:left; 128 | } 129 | .Bar{ 130 | background: rgba(var(--accent)) !important; 131 | 132 | } 133 | /*fix for adding other icons to the community hub shortut bar*/ 134 | .apphub_OtherSiteInfo{ 135 | display: flex; 136 | align-items: center; 137 | } 138 | /*fixes for the extra info buttons on the store page*/ 139 | .steamdbInfoButton>a>svg, 140 | .pcgamingwikiInfoButton>a>svg 141 | { 142 | height: 26px; 143 | width: 26px; 144 | } 145 | /*makes external info icons pretty on hover*/ 146 | .steamdbInfoButton>a>svg>polygon:hover, 147 | .steamdbInfoButton>a>svg>path:hover, 148 | .pcgamingwikiInfoButton>a>svg>path:hover 149 | { 150 | fill: rgba(var(--white)) !important; 151 | 152 | } 153 | 154 | /*recolor images with only blue in them*/ 155 | .home_page_gutter_block>a:nth-child(2)>div>img{ 156 | filter: var(--accentFilter); 157 | } 158 | 159 | 160 | 161 | /*############################################################################# 162 | /*############################################################################# 163 | /*############################################################################# 164 | /*############################################################################# 165 | /*############################################################################# 166 | /*############################################################################# 167 | /* Start doing work on store below here*/ 168 | 169 | .gutter_header,/*sidebar header text*/ 170 | .dselect_container a.trigger, /* name for the dropdown*/ 171 | .bb_h2, .bb_h3, /*various headers*/ 172 | .persona.online a, /*view wishlish*/ 173 | .all_languages, /*view all languages button*/ 174 | .review_box.partial .view_more a, /*read more on game reviews*/ 175 | .steamdb_stats_number /*steamdb extension stats number*/ 176 | { 177 | color: rgb(var(--textAccented)) !important; 178 | } 179 | .gutter_item, /*sidebar category text*/ 180 | .tab_filter_control_row:not(.checked) span.tab_filter_control, /*sidebar in game search page*/ 181 | .search_result_row .col.search_released, /* middle column */ 182 | .searchbar .label 183 | { 184 | color: rgba(var(--textLightish)) !important; 185 | } 186 | 187 | .spotlight_body, /* deal text in main store*/ 188 | .btn_darkblue_white_innerfade /*a bunch of buttons*/ 189 | { 190 | color: rgb(var(--textAccented)) !important; 191 | } 192 | .new_items_num, .new_items_text /*recently played/viewed items on the community home page*/ 193 | { 194 | color: rgb(var(--textDarkish)) !important; 195 | } 196 | /*sidebar recently viewed*/ 197 | #home_gutter_recentlyviewed { 198 | background: radial-gradient(circle at 0%, rgba(var(--accent),0) 20%, rgba(var(--accentDarkest),0.25) 100%) !important; 199 | } 200 | .deep_dive_tag { 201 | color: rgb(var(--textAccented)) !important; 202 | background: rgba(var(--accent), 0.169 ) !important; 203 | } 204 | /* recently updated text*/ 205 | .recently_updated_desc{ 206 | color: rgba(var(--textLightish)) !important; 207 | } 208 | /*recently updated link*/ 209 | .recently_updated_announcement_link{ 210 | color: rgb(var(--textAccented)) !important; 211 | } 212 | 213 | .btnv6_blue_hoverfade { 214 | 215 | background: rgba(var(--backgroundLightish)) !important; 216 | } 217 | 218 | .btnv6_blue_hoverfade>span 219 | { 220 | color: rgb(var(--textAccented)) !important; 221 | } 222 | /*que buttons when active*/ 223 | .queue_btn_active{ 224 | color: rgb(var(--textAccented)) !important; 225 | } 226 | /*inactive tabs in the various subsections*/ 227 | .home_tab:not(.active)>div{ 228 | color: rgb(var(--textLightish)) !important; 229 | 230 | } 231 | /*in the subsection tabs the header text for inactive games*/ 232 | .tab_item:not(.focus) div .tab_item_name { 233 | color: rgb(var(--textLightish)) !important; 234 | } 235 | /*in the subsection tabs the header text for inactive games*/ 236 | .tab_item.focus div .tab_item_name { 237 | color: rgb(var(--textLight)) !important; 238 | } 239 | /*line through price on discounts*/ 240 | .discount_original_price:before { 241 | border-bottom: 1.5px solid rgba(var(--accentDarkest), 0.42); 242 | } 243 | 244 | .more_content_title>span, /*show more games text at bottom of scroll*/ 245 | .more_content, /*highlighted text at bottom of main store page*/ 246 | .more_content>a /*highlighted random game text at bottom of main store page*/ 247 | 248 | { 249 | color: rgb(var(--textAccented)) !important; 250 | } 251 | .more_content>a:hover /*highlighted random game text at bottom of main store page*/ 252 | { 253 | color: rgb(var(--textLightest)) !important; 254 | } 255 | 256 | 257 | 258 | /*################################################# 259 | /*games page 260 | 261 | 262 | /* 263 | 264 | 265 | I REALLY NEED TO FIGURE OUT IF THIS IS HOW I'M GONNA HANDLE BUTTONS OR NOT 266 | 267 | /*blue button, add to lib, bundle info, etc 268 | .btn_blue_steamui>span { 269 | background: linear-gradient( to right, rgb(var(--accent)) 5%, rgb(var(--accentDarkish)) 60%); 270 | }*/ 271 | /*blue button, add to lib, bundle info, etc:hover 272 | .btn_blue_steamui:not(.btn_disabled):not(:disabled):not(.btn_active):not(.active):hover > span { 273 | background: linear-gradient( to right, rgb(var(--accent)) 5%, rgb(var(--accentLight)) 60%); 274 | }*/ 275 | 276 | 277 | /*positive review text color*/ 278 | .game_review_summary.positive { 279 | color: rgb(var(--textAccented)) !important; 280 | } 281 | 282 | /*.game_review_summary:not(.positive) { 283 | text-shadow: 0px -1px 2px #fff, 0px -2px 4px #FF3, 0px -4px 8px #C33 !important; 284 | } 285 | /*que menu button arrow*/ 286 | .queue_menu_arrow>span>img{ 287 | filter: var(--accentFilter); 288 | } 289 | /*check mark image*/ 290 | .add_to_wishlist_area_success>a>span>img, 291 | .queue_btn_active>span>img, 292 | .ico16.arrow_next, 293 | .slider_right span, 294 | .slider_left span, 295 | .ahz31bshwySKGB_tBKf14, 296 | .L8sFYvKOUztrhXdjxy7mp, 297 | ._37ugZJhL-qCRkdeZBRju2h, 298 | .html5_video_overlay .autoplay_checkbox.checked, 299 | .html5_video_overlay .autoplay_checkbox.checked, 300 | .ico16.reportv6, 301 | img[src*=".steamstatic.com/public/shared/images/userreviews/icon_thumbsUp_v6.png"], 302 | img[src*=".steamstatic.com/public/shared/images/userreviews/icon_thumbsUp.png?v=1"], 303 | .review_award_aggregated, 304 | img[src*=".steamstatic.com/economy/emoticon/steamthumbsup"], 305 | .apphub_CardRating.rateUp, /*thumbs and number of thumbs on games with a thumbs up on community pages*/ 306 | img[src="https://steamcommunity-a.akamaihd.net/economy/emoticon/steamthumbsup"], 307 | img[src="https://store.steamstatic.com/public/shared/images/userreviews/icon_thumbsUp_v6.png"], 308 | img[src="https://cdn.cloudflare.steamstatic.com/error/bummer.png"], 309 | .review_source, 310 | .user_reviews_filter_menu .title, 311 | .vote_button_ctn a:not(.btn_active) i, 312 | .review_box .vote_info .commentCount a, 313 | .top_new_releases_banner_ctn, 314 | .tab_filter_control_row:not(.disabled).checked, 315 | .ds_owned_flag, 316 | .search_review_summary.positive, 317 | .range_input, 318 | ._2gxv9cF-4n9wq4yxruOTNl._2o-5t6bgEJxfbWVSmxT88V, /*in library capsule on game page*/ 319 | .game_page_autocollapse_readmore, /*readmore button on game page*/ 320 | .btn_blue_steamui, /*many blue buttons on store page*/ 321 | .ds_completetheset, /*complete your collection popup on store page*/ 322 | .popup_menu_subheader, /*headers in the popup menus in the store*/ 323 | .gradient, /*category gradients*/ 324 | #modalContentTitleBar /*modal titlebars*/, 325 | .itad-pricing, /*itad info (need to fix some broke colors later*/ 326 | .itad_ico.svelte-1cf0mrd i.svelte-1cf0mrd, /*itad icon for augmented steam*/ 327 | .steamdb_ico.svelte-1cf0mrd i.svelte-1cf0mrd, /*steamdb icon from same*/ 328 | .apphub_CardBG.workshop, /*workshop card on community pages*/ 329 | .review_histogram, /*review history chart on game pages, need to fix so it doesn't change the negative reviews colors*/ 330 | .apphub_CardAnnouncementBG, /*app hub announcement icon*/ 331 | .apphub_CardPinnedIcon, /*app hub pinned icon*/ 332 | .apphub_AllContentText, /*app hub top glow /text*/ 333 | .apphub_HubDivider, /*app hub top divider*/ 334 | .apphub_HeaderBottomBG, /*app hub top divider glow*/ 335 | .play_button, /*html5 play/pause button */ 336 | .es_slider_toggle, /*html5 video expand button*/ 337 | .cart_tab,/*thank you box on game checkout page*/ 338 | .checkout_steam_rewards_banner /*rewards info on checkout page*/ 339 | { 340 | filter: var(--accentFilter) !important; 341 | } 342 | #modalContent.modal_frame { 343 | border: 2px solid rgb(var(--accentDarkest)) !important; 344 | } 345 | /*game page backgrounds*/ 346 | .game_page_background.game { 347 | background-size: contain; 348 | } 349 | 350 | 351 | html .queue_btn_menu > .queue_menu_arrow.queue_btn_active { 352 | background: rgba( var(--accent), 0.420 ); 353 | } 354 | /*ignore menu background*/ 355 | html .queue_btn_menu > .queue_menu_arrow { 356 | background: rgba( var(--accent), 0.2); 357 | } 358 | 359 | /*early access banner*/ 360 | div.early_access_header .heading { 361 | background: linear-gradient(135deg, rgba(var(--accent),1) 0%,rgba(var(--accentDarkish),1) 100%) !important; 362 | } 363 | 364 | /*wishlight highlight on game carrousel at top of main store page*/ 365 | a.es_highlighted_wishlist { 366 | background: rgba(var(--accent)) linear-gradient(135deg, rgba(0, 0, 0, 0.70) 10%, rgba(0, 0, 0, 0) 100%) !important; 367 | } 368 | div.es_highlighted_wishlist { 369 | background: rgba(var(--accent)) linear-gradient(135deg, rgba(0, 0, 0, 0.70) 10%, rgba(0, 0, 0, 0) 100%) !important; 370 | } 371 | 372 | div.early_access_header .heading, /*early access banner subtext */ 373 | span.svelte-1xun2sl /*augmented steam playing now addon subtext*/ 374 | { 375 | color: rgb(var(--textLight)) !important; 376 | } 377 | 378 | .bundle_label, 379 | .as_stat.svelte-1xun2sl, /*augmented steam playing now addon player count*/ 380 | .label /*various labels on the store page*/ 381 | { 382 | color: rgb(var(--textAccented)) !important; 383 | } 384 | /*early access banner border*/ 385 | div.early_access_header { 386 | border: 1px solid rgb(var(--accent)) !important; 387 | } 388 | /*early access bug banner*/ 389 | div.early_access_banner { 390 | background: rgb(var(--backgroundDarkish)) !important; 391 | } 392 | /*app tags*/ 393 | .app_tag { 394 | color: rgb(var(--textAccented)) !important; 395 | background: rgba( var(--accent), 0.2 ) !important; 396 | } 397 | /*dev names*/ 398 | #game_highlights a { 399 | color: rgb(var(--textAccented)) !important; 400 | } 401 | /* broadcast on game store page*/ 402 | ._3zXpFCyX2IiaD-MNF5KJFf{ 403 | background: rgb(var(--backgroundLightish)) !important; 404 | } 405 | /*more button on early access blurb*/ 406 | .morebutton { 407 | background: linear-gradient(to right, rgba(var(--accentDarkest),0) 0%,rgba(var(--accentDarkest),1) 15%,rgba(var(--accentDarkest),1) 100%) !important; 408 | color: rgb(var(--textAccented)) !important; 409 | } 410 | /*deal subtext*/ 411 | .game_purchase_discount_countdown{ 412 | color: rgb(var(--textAccented)) !important; 413 | } 414 | /*reason links on store page*/ 415 | .reason.for>a, 416 | .reason.info>a { 417 | color: rgb(var(--textAccented)) !important; 418 | } 419 | 420 | .html5_video_overlay .progress_bar, /*progress bar color in video player*/ 421 | .btnv6_lightblue_blue>span, /*light buttons*/ 422 | .btnv6_lightblue_blue /*light buttons*/ 423 | 424 | { 425 | background: rgb(var(--accentLight)) !important; 426 | } 427 | /*official game tags text*/ 428 | a.game_area_details_specs_ctn .label { 429 | color: rgb(var(--textAccented)) !important; 430 | } 431 | 432 | .game_area_details_specs_ctn .label, /*official game tags bg*/ 433 | ._38m8DGDKcTxyFKbuvEpMIx /*controller support text bg*/ 434 | { 435 | background: rgba(var(--accent), 0.1 ) !important; 436 | } 437 | /*controller support icon background*/ 438 | ._28V2e4qcBKMUfwPNxuJevO{ 439 | background: rgb(var(--backgroundDarkish)) !important; 440 | } 441 | /*controller support blue text to pink*/ 442 | ._38m8DGDKcTxyFKbuvEpMIx { 443 | color: rgb(var(--textAccented)); 444 | } 445 | /*check marks for compatablitiy chart*/ 446 | .game_language_options td span { 447 | color: rgb(var(--accent)) !important; 448 | } 449 | 450 | .details_block a/*links in details*/ 451 | { 452 | color: rgb(var(--textAccented)) !important; 453 | } 454 | /*review container*/ 455 | #review_histograms_container { 456 | background: rgb(var(--backgroundDark)) !important; 457 | } 458 | /*top right of review container*/ 459 | #review_histogram_recent_section { 460 | background: rgba( var(--accent), 0.2 ); 461 | } 462 | /*review contanier footer*/ 463 | .user_reviews_filter_options.flyout{ 464 | background: rgb(var(--backgroundDarkest)) !important; 465 | } 466 | /*review contanier footer "display as"*/ 467 | .user_reviews_filter_display_as { 468 | 469 | color: rgb(var(--textDarkish)); 470 | border-left: 1px solid rgb(var(--accentDarkish)); 471 | } 472 | /*review contanier footer "display as" dropdown*/ 473 | .user_reviews_filter_display_as select { 474 | color: rgb(var(--textLightest)) !important; 475 | background: rgb(var(--accentDarkish)); 476 | } 477 | /*review contanier footer "display as" dropdown text*/ 478 | option{ 479 | color: rgb(var(--textLightest)) !important; 480 | } 481 | /*review contanier footer "display as" dropdown text*/ 482 | option:hover{ 483 | background: rgb(var(--accentLight)) !important; 484 | } 485 | 486 | div.bb_h1, .bb_wysiwyg h1, /*review footer h1 text*/ 487 | .faq_question,/*header on discovery que FAQ page*/ 488 | .noReviewsYetTitle, /*header for when there are no reviews on a game page*/ 489 | .persona.online>.profile_in_game_header /*header for profile in game when online*/ 490 | { 491 | color: rgb(var(--textAccented)) !important; 492 | } 493 | /* early access review warning */ 494 | div.early_access_review { 495 | background: rgb(var(--accentDarkest)); 496 | border: 1px solid rgb(var(--accentLight)); 497 | color: rgb(var(--accentLight)); 498 | } 499 | /*coming soon background*/ 500 | .game_area_comingsoon { 501 | background: linear-gradient(135deg, rgba(var(--accentDarkest),0.4) 10%,rgba(var(--accentLightish),0.4) 100%); 502 | } 503 | /*view all achievements*/ 504 | a.communitylink_achievement.communitylink_achivement_plusmore, 505 | a.btn_black:not(.btn_disabled):not(:disabled):not(.btn_active):not(.active) /* show steamdb link on hover*/ 506 | { 507 | background: rgba( var(--accent), 0.2 ) !important; 508 | color: rgb(var(--textAccented)) !important; 509 | } 510 | a.btn_black:not(.btn_disabled):not(:disabled):not(.btn_active):not(.active):hover /* show steamdb link on hover*/ 511 | { 512 | background: rgba( var(--accent), 0.2 ) !important; 513 | color: rgb(var(--textLighest)) !important; 514 | } 515 | /*steam deck compat main bg*/ 516 | ._2dGPTYWTKq3CirJwPXKw2b { 517 | background: rgba(var(--accent), 0.502) !important; 518 | } 519 | /*steam deck learn more button*/ 520 | ._2gXzKgnqPNSUzBWEYvQ4OP { 521 | background: rgb(var(--accent)) !important; 522 | } 523 | /*steam deck learn more button:hover*/ 524 | ._2gXzKgnqPNSUzBWEYvQ4OP:hover { 525 | background: rgb(var(--accentLightest)) !important; 526 | } 527 | /*background of genre specific/sale pages without images (so temporary sales should still have (some) theme)*/ 528 | .SaleBackground:not([style*='background-image']){ 529 | background: rgb(var(--background)) !important; 530 | } 531 | a.btnv6_grey_black { 532 | color: rgb(var(--textAccented)) !important; 533 | background: rgba(var(--accentDarkest), .2) ; 534 | } 535 | .btnv6_grey_black:hover { 536 | color: rgb(var(--textLighest)) !important; 537 | background: rgba(var(--accent), .8) !important; 538 | } 539 | a.btnv6_grey_black.btn_active { 540 | color: rgb(var(--white)) !important; 541 | background: rgba(var(--accent), 0.4 ); 542 | } 543 | a.btnv6_grey_black:hover { 544 | color: rgb(var(--white)) !important; 545 | background: rgba(var(--accent), .5); 546 | } 547 | /*related games background disable*/ 548 | .related_items_ctn { 549 | background: transparent !important; 550 | } 551 | 552 | /*related games follow + see all buttons*/ 553 | .FollowButton, 554 | ._1SnxJyZ5foWgNRCNLmKm6H, 555 | .game_description_column .block .block_header .right a 556 | { 557 | color: rgb(var(--textAccented)) !important; 558 | background: rgba(var(--accentDarkest), .2) !important; 559 | } 560 | .FollowButton>div, 561 | ._1SnxJyZ5foWgNRCNLmKm6H>span, 562 | .game_description_column .block .block_header .right a 563 | { 564 | color: rgb(var(--textAccented)) !important; 565 | } 566 | .FollowButton:hover, 567 | ._1SnxJyZ5foWgNRCNLmKm6H:hover, 568 | .game_description_column .block .block_header .right a:hover 569 | { 570 | color: rgb(var(--textAccented)) !important; 571 | background: rgba(var(--accent), .8) !important; 572 | } 573 | .FollowButton>div:hover, 574 | ._1SnxJyZ5foWgNRCNLmKm6H>span:hover, 575 | .game_description_column .block .block_header .right a:hover 576 | { 577 | color: rgb(var(--textLighest)) !important; 578 | } 579 | 580 | /*######################################################### 581 | /*####################################### 582 | /*#################### 583 | /* actual review page 584 | /*h2 text*/ 585 | div.bb_h2, .bb_wysiwyg h2 { 586 | color: rgba(var(--textAccented)) !important; 587 | } 588 | 589 | /*username color for active users on */ 590 | .apphub_Card.interactable:hover .apphub_CardContentAuthorName.online a 591 | { 592 | color: rgba(var(--textAccented)) !important; 593 | } 594 | /* dropdown on reviews page*/ 595 | div.filterselect { 596 | background: rgba( var(--accent), 0.2 ); 597 | color: rgba(var(--textAccented)) !important; 598 | } 599 | /* expanded dropdown on reviews page*/ 600 | 601 | div.filterselect_options { 602 | background-color: rgb(var(--accent)); 603 | } 604 | .apphub_SectionFilterLabel, /*show text at top of reviews page*/ 605 | #footerText>a /*footer text*/ 606 | { 607 | color: rgba(var(--textDarkish)) !important; 608 | } 609 | /*copyright text in footer*/ 610 | #footerText>div.copyIcon, #footerText>span.copyright{ 611 | color: rgba(var(--textDark)) !important; 612 | } 613 | 614 | /*outlivne for online users*/ 615 | .playerAvatar.online img, .friend_status_online .friend_block_avatar img, .appHubIconHolder.online img, .avatar_block_status_online img { 616 | background: linear-gradient( to bottom, rgb(var(--accentLightish)) 5%, rgb(var(--accent)) 95%); 617 | } 618 | /*outlivne for online users*/ 619 | .appHubIconHolder.online{ 620 | background: linear-gradient( to bottom, rgb(var(--accentLightish)) 5%, rgb(var(--accent)) 95%); 621 | } 622 | /* spotlight widget*/ 623 | #widget{ 624 | box-shadow: none !important; 625 | border-top: 1px solid rgb(var(--backgroundLight)) !important; 626 | border-left: 1px solid rgb(var(--backgroundLight)) !important; 627 | background: rgb(var(--backgroundLightish)) !important; 628 | } 629 | /*login page background*/ 630 | .login_client_waitforauth{ 631 | background: rgb(var(--background)) !important; 632 | } 633 | /*background on steamdeck page*/ 634 | ._2N8SepiLeBUusG1vbHCgiY { 635 | background: rgb(var(--background)) !important; 636 | } 637 | /* subheaders on steamdeck page */ 638 | #SaleSection_61022>._1cOoCFwafBlSkwllIMf3XM, 639 | #SaleSection_44860>._1cOoCFwafBlSkwllIMf3XM, 640 | #SaleSection_34032>._1cOoCFwafBlSkwllIMf3XM 641 | { 642 | background: rgb(var(--backgroundLight)) !important; 643 | } 644 | #SaleSection_34993>._1cOoCFwafBlSkwllIMf3XM, 645 | #SaleSection_13578>._1cOoCFwafBlSkwllIMf3XM, 646 | ._3isvN1K0OSelqFk6h2VmQq /*vr mode alert on store page*/ 647 | { 648 | background: rgb(var(--backgroundLightish)) !important; 649 | 650 | } 651 | .faqctn div, 652 | #SaleSection_31960 .SaleSectionForCustomCSS .SaleTextCtn .Link { 653 | color: rgb(var(--backgroundLightest)) !important; 654 | } 655 | 656 | 657 | /*###################################################### 658 | /*negative game text highlight effects: 659 | */ 660 | .game_review_summary:not(.positive):not(.not_enough_reviews) { 661 | font-weight: bold; 662 | color: #fff; 663 | position: relative; 664 | display: var(--highlightNegativeGames); 665 | 666 | text-transform: uppercase; 667 | animation: glow 1.5s infinite alternate; 668 | } 669 | 670 | .game_review_summary:not(.positive)::before, 671 | .game_review_summary:not(.positive)::after { 672 | content: attr(data-text); 673 | position: absolute; 674 | top: 0; 675 | left: 0; 676 | display: var(--highlightNegativeGames); 677 | 678 | width: 100%; 679 | height: 100%; 680 | color: #ff4500; 681 | z-index: -1; 682 | filter: blur(10px); 683 | opacity: 0.75; 684 | animation: flicker 2s infinite alternate; 685 | } 686 | 687 | .game_review_summary:not(.positive)::after { 688 | color: #ff8c00; 689 | filter: blur(20px); 690 | display: var(--highlightNegativeGames); 691 | 692 | animation: flicker 2s infinite alternate-reverse; 693 | } 694 | 695 | @keyframes glow { 696 | from { 697 | text-shadow: 0 0 1px #ff4500, 0 0 2px #ff4500, 0 0 3px #ff4500, 0 0 4px #ff4500, 0 0 5px #ff4500, 0 0 6px #ff4500, 0 0 7px #ff4500; 698 | } 699 | to { 700 | text-shadow: 0 0 2px #ff8c00, 0 0 3px #ff8c00, 0 0 4px #ff8c00, 0 0 5px #ff8c00, 0 0 6px #ff8c00, 0 0 7px #ff8c00, 0 0 8px #ff8c00; 701 | } 702 | } 703 | 704 | @keyframes flicker { 705 | 0% { opacity: 0.8; } 706 | 50% { opacity: 0.4; } 707 | 100% { opacity: 0.8; } 708 | } 709 | 710 | 711 | /*################################################################## 712 | /*################################################################## 713 | /*################################################################## 714 | /*augmented steam and/or SteamDB addon support*/ 715 | -------------------------------------------------------------------------------- /customs.py: -------------------------------------------------------------------------------- 1 | import os 2 | import sys 3 | import zipfile 4 | import re 5 | 6 | def process_file(file_path, mode): 7 | print("Processing file:", file_path) # Console logging 8 | 9 | 10 | def process_css_files(mode): 11 | # Get the current directory path where the script is located 12 | current_dir = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'css') 13 | css_files = [] 14 | # Edit "config.css" in the current working directory 15 | config_css_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'config.css') 16 | 17 | # Walk through the current directory and subdirectories 18 | for root, dirs, files in os.walk(current_dir): 19 | for file in files: 20 | if file.endswith('.css'): 21 | css_files.append(os.path.join(root, file)) 22 | if os.path.exists(config_css_path): 23 | print(config_css_path) 24 | css_files.append(config_css_path) 25 | else: 26 | print(f"'config.css' not found in {os.path.dirname(os.path.abspath(__file__))}") 27 | 28 | # Log found CSS files 29 | print(css_files) 30 | for css_file in css_files: 31 | process_file(css_file, mode) 32 | 33 | def process_config_js(mode): 34 | config_file_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'config.js') 35 | if not os.path.exists(config_file_path): 36 | print("config.js not found.") 37 | return 38 | 39 | with open(config_file_path, 'r', encoding='utf-8') as file: 40 | lines = file.readlines() 41 | 42 | with open(config_file_path, 'w', encoding='utf-8') as file: 43 | for i, line in enumerate(lines): 44 | if 'export const filePathPrefix =' in line: 45 | if mode == '-off': 46 | new_line = 'export const filePathPrefix ="skins/ATOMS";\n' 47 | elif mode == '-on': 48 | new_line = 'export const filePathPrefix ="skins/ATOMS-git";\n' 49 | print("Line edited:", line.strip(), "->", new_line.strip()) # Console logging 50 | lines[i] = new_line 51 | if 'export const systemAccentsEnabled =' in line: 52 | new_line = 'export const systemAccentsEnabled ="0";\n' 53 | print("Line edited:", line.strip(), "->", new_line.strip()) # Console logging 54 | lines[i] = new_line 55 | file.write(lines[i]) 56 | 57 | def process_skin_json(mode): 58 | skin_file_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'skin.json') 59 | if not os.path.exists(skin_file_path): 60 | print("skin.json not found.") 61 | return 62 | 63 | with open(skin_file_path, 'r', encoding='utf-8') as file: 64 | lines = file.readlines() 65 | 66 | with open(skin_file_path, 'w', encoding='utf-8') as file: 67 | for i, line in enumerate(lines): 68 | if '"name":"ATOMS' in line: 69 | if mode == '-off': 70 | new_line = '\t"name":"ATOMS",\n' 71 | elif mode == '-on': 72 | new_line = '\t"name":"ATOMS-git",\n' 73 | print("Line edited:", line.strip(), "->", new_line.strip()) # Console logging 74 | lines[i] = new_line 75 | file.write(lines[i]) 76 | 77 | def zip_files(): 78 | zip_filename = 'ATOMS.zip' 79 | exclude_extensions = {'.py', '.md', '.zip'} 80 | exclude_dirs = {'.git'} 81 | base_dir = os.path.dirname(os.path.abspath(__file__)) 82 | 83 | with zipfile.ZipFile(zip_filename, 'w', zipfile.ZIP_DEFLATED) as zipf: 84 | for root, dirs, files in os.walk(base_dir): 85 | # Exclude directories 86 | dirs[:] = [d for d in dirs if d not in exclude_dirs] 87 | for file in files: 88 | if not (root == base_dir and os.path.splitext(file)[1] in exclude_extensions): 89 | file_path = os.path.join(root, file) 90 | arcname = os.path.relpath(file_path, base_dir) 91 | zipf.write(file_path, os.path.join('ATOMS', arcname)) 92 | print(f"Created zip file {zip_filename}") 93 | 94 | if __name__ == '__main__': 95 | mode = sys.argv[1] if len(sys.argv) > 1 else None 96 | 97 | if mode == '-off' or mode == '-on': 98 | print("Mode:", mode) # Console logging 99 | process_css_files(mode) 100 | process_config_js(mode) 101 | process_skin_json(mode) 102 | if mode == '-off': 103 | zip_files() 104 | else: 105 | print('Invalid mode. Please use -off or -on.') 106 | -------------------------------------------------------------------------------- /data/translations.json: -------------------------------------------------------------------------------- 1 | { 2 | "reloadSteam": { 3 | "bg": "Презареди Steam", 4 | "zh-cn": "重新加载Steam", 5 | "zh-tw": "重新加載Steam", 6 | "cs": "Znovu naplňte Steam", 7 | "da": "Genindlæs Steam", 8 | "nl": "Herlaad Steam", 9 | "en": "Reload Steam", 10 | "fi": "Lataa Steam uudelleen", 11 | "fr": "Recharger Steam", 12 | "de": "Steam neu Laden", 13 | "el": "Επαναφόρτωση Steam", 14 | "hu": "Töltse újra a Steam-et", 15 | "id": "Muat ulang Steam", 16 | "it": "Ricarica Steam", 17 | "ja": "Steamをリロードする", 18 | "ko": "Steam 다시 로드", 19 | "no": "Last inn Steam på nytt", 20 | "pl": "Załaduj ponownie Steam", 21 | "pt": "Recarregar o Steam", 22 | "pt-br": "Recarregar o Steam", 23 | "ro": "Reîncărcați Steam", 24 | "ru": "Перезагрузить Steam", 25 | "es": "Recargar Steam", 26 | "es-419": "Recargar Steam", 27 | "sv": "Ladda om Steam", 28 | "th": "โหลด Steam อีกครั้ง", 29 | "tr": "Steam'i Yeniden Yükle", 30 | "uk": "Перезавантажте Steam", 31 | "vn": "Tải lại Steam" 32 | }, 33 | "restartSteam": { 34 | "bg": "Рестартирайте Steam", 35 | "zh-cn": "重新启动Steam", 36 | "zh-tw": "重新啟動Steam", 37 | "cs": "Restartujte Steam", 38 | "da": "Genstart Steam", 39 | "nl": "Start Steam opnieuw", 40 | "en": "Restart Steam", 41 | "fi": "Käynnistä Steam uudelleen", 42 | "fr": "Redémarrer Steam", 43 | "de": "Starten Sie Steam neu", 44 | "el": "Επανεκκινήστε το Steam", 45 | "hu": "Indítsa újra a Steam-et", 46 | "id": "Mulai ulang Steam", 47 | "it": "Riavvia Steam", 48 | "ja": "Steamを再起動する", 49 | "ko": "Steam 다시 시작", 50 | "no": "Start Steam på nytt", 51 | "pl": "Uruchom ponownie Steam", 52 | "pt": "Reinicie o Steam", 53 | "pt-br": "Reinicie o Steam", 54 | "ro": "Reporniți Steam", 55 | "ru": "Перезапустить Steam", 56 | "es": "Reiniciar Steam", 57 | "es-419": "Reiniciar Steam", 58 | "sv": "Starta om Steam", 59 | "th": "รีสตาร์ท Steam", 60 | "tr": "Steam'i yeniden başlatın", 61 | "uk": "Перезапустіть Steam", 62 | "vn": "Khởi động lại Steam" 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /js/navigation.js: -------------------------------------------------------------------------------- 1 | import waitForElement from './utilities/waitForElement.js'; 2 | import modifySteamRootMenu from './utilities/rootMenus/modifySteamRootMenu.js'; 3 | 4 | if(document.title == "Steam Root Menu") { 5 | waitForElement('#popup_target', function(element) { 6 | waitForElement('._2jXHP0742MyApMUVUM8IFn._21GPYlKBCLsHQpTsHw_RL_', modifySteamRootMenu); 7 | }); 8 | } -------------------------------------------------------------------------------- /js/steam.js: -------------------------------------------------------------------------------- 1 | import moveButtons from './utilities/moveButtons.js'; 2 | import combineTopMenus from './utilities/combineTopMeuns.js'; 3 | import waitForElement from './utilities/waitForElement.js'; 4 | 5 | import rootMenuDropdown from './utilities/rootMenus/rootMenuDropown.js'; 6 | import transparentGames from './utilities/transparentGames.js'; 7 | import launchGameKeyHandler from './utilities/launchGameKeyHandler.js'; 8 | import { wideGameIcons } from './utilities/wideGameIcons.js'; 9 | 10 | waitForElement('body', function(element) { 11 | 12 | if (document.title == "Steam") { 13 | 14 | waitForElement('._1Ky59qmywxOUtNcI1cgmkX', rootMenuDropdown); //notme 15 | waitForElement('._1KrJ3sFAqPBN9mfpaNTU5F', moveButtons); 16 | waitForElement('._3Z3ohQ8-1NKnCZkbS6fvy', combineTopMenus); 17 | //waitForElement('._3Sb2o_mQ30IDRh0C72QUUu', transparentGames); 18 | //launchGameKeyHandler(); causes bugs w/ some menus will fix soon 19 | } 20 | }); 21 | //this needs visual improvement 22 | //waitForElement('._3vHkmRShhzwd67_MtEq8-n', wideGameIcons); -------------------------------------------------------------------------------- /js/utilities/combineTopMeuns.js: -------------------------------------------------------------------------------- 1 | import { 2 | wait, 3 | bigWait 4 | } from './utility.js'; 5 | import waitForElement from './waitForElement.js'; 6 | 7 | // Waits for the target element to be present before moving elements 8 | export default function combineTopMenus() { 9 | waitForElement('._39oUCO1OuizVPwcnnv88no', function(element) { 10 | waitForElement('._3Z3ohQ8-1NKnCZkbS6fvy', function(element) { 11 | waitForElement('._3Z3ohQ8-1NKnCZkbS6fvy', function(element) { 12 | 13 | const targetClass = '._39oUCO1OuizVPwcnnv88no'; // the top bar 14 | const classesToMove = [ 15 | '._3Z3ohQ8-1NKnCZkbS6fvy' // navigation menu 16 | ]; 17 | // Find the target element 18 | const targetElement = document.querySelector(targetClass); 19 | 20 | // If target element exists 21 | if (targetElement) { 22 | // Loop through classes to move 23 | classesToMove.forEach((classToMove) => { 24 | // Find elements with class to move 25 | const elementsToMove = document.querySelectorAll(classToMove); 26 | 27 | // Iterate through found elements 28 | elementsToMove.forEach((elementToMove) => { 29 | bigWait(); 30 | // Append the div to the target element as the first child 31 | targetElement.insertBefore(elementToMove, targetElement.firstChild); 32 | }); 33 | }); 34 | } else { 35 | console.error('Target element not found:', targetClass); 36 | } 37 | }); 38 | }); 39 | }); 40 | } 41 | -------------------------------------------------------------------------------- /js/utilities/greyscaleBackground.js: -------------------------------------------------------------------------------- 1 | import waitForElement from "./waitForElement.js"; 2 | 3 | function applyGrayscaleBackground(selector) { 4 | const element = document.querySelector(selector); 5 | if (!element) { 6 | console.error(`No element found with selector: ${selector}`); 7 | return; 8 | } 9 | 10 | waitForElement(selector, function(element) { 11 | // Fetching the background-image directly from the element's style attribute 12 | let backgroundImage = element.style.backgroundImage; 13 | 14 | if (!backgroundImage || backgroundImage === 'none' || backgroundImage === '') { 15 | console.warn(`No valid background-image found for ${selector}`); 16 | return; 17 | } 18 | 19 | const computedStyle = getComputedStyle(element); 20 | const backgroundPosition = computedStyle.backgroundPosition; 21 | 22 | const style = document.createElement('style'); 23 | style.innerHTML = ` 24 | ${selector}::before { 25 | content: ""; 26 | display: block; 27 | position: absolute; 28 | top: 0; 29 | left: 0; 30 | width: 100%; 31 | height: -webkit-fill-available; /* Fill the space of the parent element */ 32 | background-image: ${backgroundImage} !important; 33 | background-size: contain; /* Adjust image size to fit within the element */ 34 | background-position: ${backgroundPosition}; 35 | background-repeat: no-repeat; /* Ensuring the background doesn't repeat */ 36 | filter: grayscale(100%) brightness(0.77); 37 | z-index: -1; 38 | opacity: 1; 39 | } 40 | ${selector} { 41 | position: relative; 42 | background: rgba(var(--background)) !important; 43 | overflow: hidden; 44 | z-index: 0; 45 | } 46 | `; 47 | document.head.appendChild(style); 48 | }); 49 | } 50 | 51 | if (document.title.startsWith("Steam Community")) { 52 | waitForElement('.apphub_background', function(element) { 53 | applyGrayscaleBackground('.apphub_background'); 54 | }); 55 | } else { 56 | waitForElement('.game_page_background', function(element) { 57 | applyGrayscaleBackground('.game_page_background'); 58 | }, 69, 55555, 0); 59 | } 60 | -------------------------------------------------------------------------------- /js/utilities/launchGameKeyHandler.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | //queueKeyHandler.js 4 | export default function launchGameKeyHandler() { 5 | 6 | // Function to handle the 'Enter' key press 7 | function handleEnterKey(event) { 8 | // Check if the key pressed is 'Enter' and if the active element is not an input or textarea 9 | if (event.key === 'Enter' && event.target.tagName !== 'INPUT' && event.target.tagName !== 'TEXTAREA' && !document.querySelector('.DialogContent_InnerWidth')) { 10 | if (document.querySelector('._1rDh5rXSFZJOqCa4UpnI4z > ._3x1HklzyDs4TEjACrRO2tB')) { 11 | let parentElement = document.querySelector('._1UBpAXP408Ez_L_mXhW5Q9'); 12 | 13 | if (parentElement) { 14 | // Find the image element two children below 15 | let imgElement = parentElement.querySelector('div > div > img'); 16 | 17 | if (imgElement) { 18 | // Extract the URL from the img element's src attribute 19 | let imgUrl = imgElement.src; 20 | 21 | // Use a regular expression to extract the number after '/assets/' before '_' 22 | let match = imgUrl.match(/\/assets\/(\d+)_/); 23 | 24 | if (match && match[1]) { 25 | let number = match[1]; 26 | 27 | // Construct the steam URL 28 | let steamUrl = `steam://launch/${number}/`; 29 | 30 | // You can now use the steamUrl, for example, log it or use it as needed 31 | console.log(steamUrl); 32 | 33 | // Example: Open the steam URL (if you want to) 34 | window.location.href = steamUrl; 35 | } else { 36 | console.log("Number not found in the image URL"); 37 | } 38 | } else { 39 | console.log("Image element not found"); 40 | } 41 | } else { 42 | console.log("Parent element not found"); 43 | } 44 | } 45 | else { 46 | // Find the element with the specified classes 47 | const targetElement = document.querySelector('._3ydigb6zZAjJ0JCDgHwSYA._2AzIX5kl9k6JnxLfR5H4kX.Focusable'); 48 | // Click the element if it exists 49 | if (targetElement) { 50 | targetElement.click(); 51 | } 52 | } 53 | } 54 | else if (document.querySelector('.DialogContent_InnerWidth')) { 55 | const targetElement = document.querySelector('button.DialogButton.Primary'); 56 | if (targetElement) { 57 | targetElement.click(); 58 | document.querySelector('._3x1HklzyDs4TEjACrRO2tB').focus(); 59 | } 60 | else{ 61 | console.log("fuck"); 62 | } 63 | } 64 | } 65 | // Attach the event listener to the document 66 | document.addEventListener('keydown', handleEnterKey); 67 | 68 | }; 69 | -------------------------------------------------------------------------------- /js/utilities/moveButtons.js: -------------------------------------------------------------------------------- 1 | import { 2 | wait, 3 | bigWait 4 | } from './utility.js'; 5 | 6 | import waitForElement from './waitForElement.js'; 7 | // makes sure the targets are there before moving 8 | export default function moveButtons() { 9 | bigWait(); 10 | bigWait(); 11 | /*wait for target and destination elements before proceeding*/ 12 | waitForElement('._3cykd-VfN_xBxf3Qxriccm', function(element) { 13 | bigWait(); 14 | bigWait(); 15 | waitForElement('._3vCzSrrXZzZjVJFZNg9SGu', function(element) { 16 | bigWait(); 17 | bigWait(); 18 | const targetClass = '_3cykd-VfN_xBxf3Qxriccm'; 19 | const classesToMove = [ 20 | '_3vCzSrrXZzZjVJFZNg9SGu' // whole bar 21 | //'_2EQ7ghgqIdjKv9jsQC0Zq9', // download button 22 | //'_1TdaAqMFadi0UTqilrkelR' // friends and chat 23 | //'_2foCkpRXhqq0UGVE50BWqj' // add a game 24 | ]; 25 | 26 | // Find the target element 27 | const targetElement = document.querySelector('.' + targetClass); 28 | // If target element exists 29 | if (targetElement) { 30 | // Loop through classes to move 31 | classesToMove.forEach((classToMove) => { 32 | // Find elements with class to move 33 | const elementsToMove = document.querySelectorAll('.' + classToMove); 34 | 35 | // Iterate through found elements 36 | elementsToMove.forEach((elementToMove) => { 37 | 38 | // Create a new div with class "Focusable" 39 | const focusableDiv = document.createElement('div'); 40 | focusableDiv.classList.add('Focusable-downloads'); 41 | 42 | // Move the element inside the new div 43 | focusableDiv.append(elementToMove); 44 | 45 | // Append the new div to the target element 46 | targetElement.parentNode.insertBefore(focusableDiv, targetElement); 47 | 48 | }); 49 | }); 50 | } else { 51 | console.error('Target element not found:', targetClass); 52 | } 53 | }); 54 | }); 55 | } -------------------------------------------------------------------------------- /js/utilities/queBlacklist.js: -------------------------------------------------------------------------------- 1 | import { staticAppNames, staticKeywords } from "../../config.js"; 2 | export default function queBlacklist() { 3 | console.log("Starting queBlacklist function"); 4 | 5 | // Blocked popular tag keywords 6 | const keywords = staticKeywords; // moved texts to array 7 | 8 | // Blocked app name texts (already lowercased for comparison) 9 | const appNames = staticAppNames; 10 | 11 | // Check if .popular_tags element exists 12 | const popularTagsElement = document.querySelector(".popular_tags"); 13 | console.log("Checking for .popular_tags element:", popularTagsElement); 14 | 15 | if (popularTagsElement && popularTagsElement.style.display !== "none") { 16 | const anchorElements = popularTagsElement.querySelectorAll("a"); 17 | console.log("Found anchor elements in .popular_tags:", anchorElements); 18 | 19 | anchorElements.forEach(anchor => { 20 | console.log("Checking anchor text content:", anchor.textContent); 21 | // Check if any keyword in the array is present in the anchor text 22 | if ( 23 | anchor.style.display !== "none" && 24 | keywords.some(key => anchor.textContent.includes(key)) 25 | ) { 26 | console.log("Match found in anchor text. Calling handleIgnoreAndProceed."); 27 | handleIgnoreAndProceed(); 28 | } 29 | }); 30 | } 31 | 32 | // Check if .apphub_AppName element exists 33 | const appNameElement = document.querySelector(".apphub_AppName"); 34 | console.log("Checking for .apphub_AppName element:", appNameElement); 35 | 36 | // Use .some() to see if appNameElement's text contains any blocked app name 37 | if ( 38 | appNameElement && 39 | appNames.some(name => appNameElement.textContent.toLowerCase().includes(name)) 40 | ) { 41 | console.log("Match found in .apphub_AppName text. Calling handleIgnoreAndProceed."); 42 | handleIgnoreAndProceed(); 43 | } 44 | 45 | // Check if .game_purchase_price element exists 46 | const gamePriceElement = document.querySelector(".game_purchase_price"); 47 | console.log("Checking for .game_purchase_price element:", gamePriceElement); 48 | 49 | const storeOverlayElement = document.querySelector(".item_store_overlay_link"); 50 | console.log("Checking for .item_store_overlay_link element:", storeOverlayElement); 51 | 52 | if ( 53 | gamePriceElement && 54 | gamePriceElement.textContent.toLowerCase().includes("free to play") && 55 | storeOverlayElement 56 | ) { 57 | console.log("Free To Play game with store overlay link found. Calling handleIgnoreAndProceed."); 58 | handleIgnoreAndProceed(); 59 | } 60 | 61 | // New logic block: Free To Play, popular tag contains "Clicker", and description contains "drops" 62 | const gameAreaDescriptionElement = document.querySelector(".game_area_description"); 63 | console.log("Checking for .game_area_description element:", gameAreaDescriptionElement); 64 | 65 | if ( 66 | gamePriceElement && 67 | popularTagsElement && 68 | gameAreaDescriptionElement && 69 | document.querySelector(".item_store_items_block") && 70 | ( 71 | popularTagsElement.textContent.toLowerCase().includes("clicker") || 72 | popularTagsElement.textContent.toLowerCase().includes("idler") 73 | ) 74 | ) { 75 | console.log("Free To Play game with Clicker tag and 'drops' in description found. Calling handleIgnoreAndProceed."); 76 | handleIgnoreAndProceed(); 77 | } 78 | 79 | // New logic block: Check if .dev_row contains an element with text "Quantum Quiver Games" 80 | const devRowElement = document.querySelector(".dev_row"); 81 | console.log("Checking for .dev_row element:", devRowElement); 82 | 83 | if ( 84 | devRowElement && 85 | devRowElement.textContent.toLowerCase().includes("quantum quiver games") 86 | ) { 87 | console.log("Developer Quantum Quiver Games found. Calling handleIgnoreAndProceed."); 88 | handleIgnoreAndProceed(); 89 | } 90 | } 91 | 92 | function handleIgnoreAndProceed() { 93 | console.log("Executing handleIgnoreAndProceed function"); 94 | 95 | // Get the ignore button 96 | const ignoreButton = document.querySelector( 97 | "#ignoreBtn > div.queue_control_button.queue_btn_ignore > div.btnv6_blue_hoverfade.btn_medium" 98 | ); 99 | console.log("Checking for ignore button:", ignoreButton); 100 | 101 | if (ignoreButton && ignoreButton.style.display !== "none") { 102 | console.log("Ignore button is available. Clicking ignore button."); 103 | ignoreButton.click(); 104 | 105 | // Proceed by clicking the Next in Queue button 106 | const nextInQueueBtn = document.querySelector(".btn_next_in_queue"); 107 | console.log("Checking for Next in Queue button:", nextInQueueBtn); 108 | 109 | if (nextInQueueBtn) { 110 | console.log("Clicking Next in Queue button."); 111 | nextInQueueBtn.click(); 112 | } 113 | } 114 | } 115 | 116 | // Check if button exists 117 | if (document.querySelector('.btn_addtocart') != null) { 118 | queBlacklist(); 119 | } -------------------------------------------------------------------------------- /js/utilities/queueKeyHandler.js: -------------------------------------------------------------------------------- 1 | //queueKeyHandler.js 2 | function handleQueueKeys() { 3 | 4 | // refreshes on que "error" 5 | if (document.querySelector("#error_box") != null) { 6 | funnyText(); 7 | location.reload(); 8 | } 9 | 10 | // refreshes on que if you end up on the page between refreshes somehow 11 | if (document.querySelector(".discovery_queue_static") != null) { 12 | if (document.querySelector(".discovery_queue_static").style.display == "block") { 13 | document.querySelector(".discovery_queue_overlay").click(); 14 | } 15 | } 16 | 17 | document.addEventListener('keydown', function (e) { 18 | 19 | switch (e.keyCode) { 20 | 21 | //left 22 | case 37: 23 | 24 | if (document.querySelector("#add_to_wishlist_area").style.display == "none") { 25 | document.querySelector("#add_to_wishlist_area_success > a > span").click(); 26 | } else { 27 | document.querySelector("#add_to_wishlist_area > a > span").click(); 28 | } 29 | 30 | break; 31 | 32 | //up 33 | case 38: 34 | if (document.querySelector("#queueBtnFollow > div.btnv6_blue_hoverfade.btn_medium.queue_btn_inactive").style.display != "none") { 35 | // click to follow 36 | document.querySelector("#queueBtnFollow > div.btnv6_blue_hoverfade.btn_medium.queue_btn_inactive").click(); 37 | } else { 38 | //Click to UNfollow 39 | document.querySelector("#queueBtnFollow > div.btnv6_blue_hoverfade.btn_medium.queue_btn_active").click(); 40 | } 41 | 42 | break; 43 | 44 | //right 45 | case 39: 46 | //if in que, go next 47 | if (document.querySelector(".queue_sub_text") != null) { 48 | 49 | document.querySelector(".btn_next_in_queue").click(); 50 | break; 51 | } 52 | //if on a game page that isn't in the que, start que. TEST ME 53 | if (document.querySelector("[data-tooltip-text='View and customize your personal Discovery Queue.']") != null) { 54 | 55 | window.location.href = "https://store.steampowered.com/explore/next/0?snr=1_5_9__12"; 56 | break; 57 | } 58 | //if you aren't in the que, hop in bb. 59 | if (document.querySelector(".home_page_content") != null || document.querySelector(".SaleBackgroundCtn") != null) { 60 | 61 | 62 | window.location.href = "https://store.steampowered.com/explore/next/0?snr=1_5_9__12"; 63 | break; 64 | } 65 | //if at the end, restart que 66 | if (document.querySelector(".finish_queue_text") != null) { 67 | 68 | 69 | document.querySelector("#nextInDiscoveryQueue > div.btn_next_in_queue.btn_next_in_queue_trigger > div").click(); 70 | break; 71 | } 72 | 73 | //if at the que page with empty que, start another que 74 | if (document.querySelector("#refresh_queue_btn").style.display != "none") { 75 | 76 | document.querySelector("#refresh_queue_btn").click(); 77 | window.location.href = "https://store.steampowered.com/explore/next/0?snr=1_5_9__12"; 78 | break; 79 | } 80 | break; 81 | 82 | //down 83 | case 40: 84 | //if a game 85 | if (document.querySelector("#game_area_purchase > div.game_area_bubble.game_area_dlc_bubble") == null) { 86 | if (document.querySelector("#ignoreBtn > div.queue_control_button.queue_btn_ignore > div.btnv6_blue_hoverfade.btn_medium.queue_btn_inactive").style.display != "none") { 87 | document.querySelector("#ignoreBtn > div.queue_control_button.queue_btn_ignore > div.btnv6_blue_hoverfade.btn_medium.queue_btn_inactive").click(); 88 | } else { 89 | document.querySelector("#ignoreBtn > div.queue_control_button.queue_btn_ignore > div.btnv6_blue_hoverfade.btn_medium.queue_btn_active").click(); 90 | } 91 | } 92 | //if DLC 93 | if (document.querySelector("#game_area_purchase > div.game_area_bubble.game_area_dlc_bubble") != null) { 94 | if (document.querySelector("#ignoreBtn > div.queue_control_button.queue_btn_ignore > div.btnv6_blue_hoverfade.btn_medium.queue_btn_inactive").style.display != "none") { 95 | document.querySelector("#ignoreBtn > div.queue_control_button.queue_btn_ignore > div.btnv6_blue_hoverfade.btn_medium.queue_btn_inactive").click(); 96 | } else { 97 | document.querySelector("#ignoreBtn > div.queue_control_button.queue_btn_ignore > div.btnv6_blue_hoverfade.btn_medium.queue_btn_active").click(); 98 | } 99 | } 100 | break; 101 | } 102 | }); 103 | }; 104 | 105 | 106 | function funnyText() { 107 | Math.easeInOutSine = (t, b, c, d) => 108 | -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; 109 | const 110 | easing = Math.easeInOutSine, 111 | target = document.querySelector('.pageheader'), 112 | bbox = target.getBoundingClientRect(), 113 | left = bbox.left, 114 | width = bbox.width, 115 | height = 100; 116 | target.innerHTML = target.innerText.split('').map( 117 | (char) => `${char}` 118 | ).join(''); 119 | Array.prototype.forEach.call(target.children, (el) => { 120 | const 121 | bbox = el.getBoundingClientRect(), 122 | w = bbox.width, 123 | l = bbox.left - left, 124 | offset = easing(l, 0, height, width), 125 | skew = offset - easing(w + l, 0, height, width), 126 | angle = Math.atan(skew/w); 127 | el.style.transform = `translateY(${-offset}px) skewY(${angle}rad)`; 128 | }); 129 | target.style.paddingTop = `${height}px`; 130 | } 131 | 132 | 133 | handleQueueKeys(); -------------------------------------------------------------------------------- /js/utilities/removeProfileBrand.js: -------------------------------------------------------------------------------- 1 | export default function removeProfileBrand() { if (document.querySelector('.profile_ban_status') && document.querySelector('#responsive_page_template_content > div.no_header.profile_page.has_profile_background > div.profile_header_bg > div > div > div > div.profile_header_badgeinfo > div.profile_header_actions > a').href.endsWith('/edit/info'))document.querySelector('.profile_ban_status').remove();} -------------------------------------------------------------------------------- /js/utilities/rootMenus/addMenu.js: -------------------------------------------------------------------------------- 1 | export default function insertMenuSeperator() { 2 | 3 | // Create new element 4 | var newElement = document.createElement('div'); 5 | 6 | // Add classes to new element 7 | newElement.classList.add('menu_MenuWrapper_2Lu3d', 'menuHamburger'); 8 | 9 | // Find the parent element by classes 10 | var parentElement = document.querySelector('.rootmenu_RootMenuBar_1Ky59.steamdesktop_RootMenuBar_3s0lk'); 11 | 12 | // Insert the new element after the first child of the parent element 13 | parentElement.insertBefore(newElement, parentElement.children[1]); 14 | 15 | } -------------------------------------------------------------------------------- /js/utilities/rootMenus/addMenuItem.js: -------------------------------------------------------------------------------- 1 | let targetWindow = window.opener; 2 | 3 | export default function addMenuItem(elementText, nextToElement, insertionPosition, onClickAction, additionalClasses = []) { 4 | 5 | const newElement = document.createElement('div'); 6 | // applies default classes to the new menu element: 7 | newElement.classList.add('_2jXHP0742MyApMUVUM8IFn', '_2uiDecKkKjAq7nimy3uLhG', 'pFo3kQOzrl9qVLPXXGIMp', 'contextMenuItem'); 8 | 9 | // applies additional classes if provided 10 | if (Array.isArray(additionalClasses)) { 11 | additionalClasses.forEach(cls => newElement.classList.add(cls)); 12 | } 13 | 14 | newElement.textContent = elementText; 15 | 16 | newElement.onclick = function () { 17 | if (targetWindow && typeof targetWindow.eval === 'function') { 18 | targetWindow.eval(onClickAction); 19 | } 20 | }; 21 | 22 | const referenceElement = document.querySelector(nextToElement); 23 | if (referenceElement) { 24 | if (insertionPosition === 'before') { 25 | referenceElement.parentNode.insertBefore(newElement, referenceElement); 26 | } else if (insertionPosition === 'after') { 27 | referenceElement.parentNode.insertBefore(newElement, referenceElement.nextSibling); 28 | } 29 | } 30 | 31 | return newElement; 32 | } 33 | -------------------------------------------------------------------------------- /js/utilities/rootMenus/addSeperator.js: -------------------------------------------------------------------------------- 1 | export default function addSeperator() { 2 | 3 | // Create a new hr element with the desired class names 4 | const newElement = document.createElement('hr'); 5 | newElement.classList.add('_2jXHP0742MyApMUVUM8IFn', '_21GPYlKBCLsHQpTsHw_RL_'); 6 | 7 | // Return the new element 8 | return newElement; 9 | } -------------------------------------------------------------------------------- /js/utilities/rootMenus/modifySteamRootMenu.js: -------------------------------------------------------------------------------- 1 | import addMenuItem from "./addMenuItem.js"; 2 | import getTranslation from "../translate.js"; 3 | import waitForElement from "../waitForElement.js"; 4 | 5 | export default async function modifySteamRootMenu() { 6 | try { 7 | const reloadSteamMenu = await getTranslation("reloadSteam", document.documentElement.lang); 8 | console.log('Translation for reloadSteam:', reloadSteamMenu); 9 | 10 | const restartSteam = await getTranslation("restartSteam", document.documentElement.lang); 11 | console.log('Translation for restartSteam:', restartSteam); 12 | 13 | waitForElement('._2EstNjFIIZm_WUSKm5Wt7n._3pofGqV0buiKAfMPEs3_82', function(menuContainer) { 14 | console.log('Menu container found:', menuContainer); 15 | 16 | const items = menuContainer.querySelectorAll('._2jXHP0742MyApMUVUM8IFn._21GPYlKBCLsHQpTsHw_RL_'); 17 | const lastItem = items[items.length - 1]; 18 | console.log('Last menu item:', lastItem); 19 | 20 | if (lastItem) { 21 | // Insert separator after the last menu item. 22 | const separator = addMenuItem("", '._2EstNjFIIZm_WUSKm5Wt7n._3pofGqV0buiKAfMPEs3_82 > ._2jXHP0742MyApMUVUM8IFn._21GPYlKBCLsHQpTsHw_RL_:last-of-type', 'after', "", ['_2jXHP0742MyApMUVUM8IFn', '_21GPYlKBCLsHQpTsHw_RL_']); 23 | console.log('Separator added:', separator); 24 | 25 | // Insert "Reload Steam" menu item after separator. 26 | const reloadItem = addMenuItem(reloadSteamMenu, '._2EstNjFIIZm_WUSKm5Wt7n._3pofGqV0buiKAfMPEs3_82 > ._2jXHP0742MyApMUVUM8IFn._21GPYlKBCLsHQpTsHw_RL_:last-of-type', 'after', "location.reload()"); 27 | console.log('Reload Steam menu item added:', reloadItem); 28 | 29 | // Insert "Restart Steam" menu item after "Reload Steam". 30 | const restartItem = addMenuItem(restartSteam, '._2EstNjFIIZm_WUSKm5Wt7n._3pofGqV0buiKAfMPEs3_82 > ._2jXHP0742MyApMUVUM8IFn._21GPYlKBCLsHQpTsHw_RL_:last-of-type', 'after', "SteamClient.User.StartRestart(false)"); 31 | console.log('Restart Steam menu item added:', restartItem); 32 | } else { 33 | console.warn('Could not find the last menu item to insert after.'); 34 | } 35 | }); 36 | 37 | } catch (error) { 38 | console.error('Error modifying Steam root menu:', error.message); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /js/utilities/rootMenus/removeMenuItems.js: -------------------------------------------------------------------------------- 1 | 2 | export default function removeMenuItems() { 3 | var element; 4 | 5 | element = document.querySelector('#popup_target > div > div > div:nth-child(13)'); 6 | if (element) element.remove(); 7 | element = document.querySelector('#popup_target > div > div > div:nth-child(9)'); 8 | if (element) element.remove(); 9 | element = document.querySelector('#popup_target > div > div > div:nth-child(4)'); 10 | if (element) element.remove(); 11 | element = document.querySelector('#popup_target > div > div > div:nth-child(1)'); 12 | if (element) element.remove(); 13 | 14 | } 15 | -------------------------------------------------------------------------------- /js/utilities/rootMenus/rootMenuDropown.js: -------------------------------------------------------------------------------- 1 | import waitForElement from "../waitForElement.js"; 2 | 3 | export default function rootMenuDropdown() { 4 | 5 | waitForElement('._1Ky59qmywxOUtNcI1cgmkX', function(element) { 6 | 7 | waitForElement('._1Ky59qmywxOUtNcI1cgmkX', function(element) { 8 | 9 | // Select the existing menu 10 | var menu = document.querySelector("._1Ky59qmywxOUtNcI1cgmkX"); // selecting the menu 11 | 12 | // Create wrapper div 13 | var rootMenuWrapperDiv = document.createElement('div'); 14 | rootMenuWrapperDiv.setAttribute("class", "rootMenuWrapperDiv"); 15 | rootMenuWrapperDiv.style.backgroundColor = 'none'; // Setting the background color 16 | rootMenuWrapperDiv.style.minWidth = '0px'; 17 | rootMenuWrapperDiv.style.height = '30px'; 18 | rootMenuWrapperDiv.style.marginTop = '6px'; 19 | rootMenuWrapperDiv.style.borderRadius = '6px'; 20 | rootMenuWrapperDiv.style.display = 'flex'; 21 | rootMenuWrapperDiv.style.zIndex = '2'; 22 | 23 | // Create wrapper div 24 | var rootToggleButtonWrapperDiv = document.createElement('div'); 25 | rootToggleButtonWrapperDiv.setAttribute("class", "rootToggleButtonWrapperDiv"); 26 | rootToggleButtonWrapperDiv.style.backgroundColor = 'none'; // Setting the background color 27 | rootToggleButtonWrapperDiv.style.minWidth = '30px'; 28 | rootToggleButtonWrapperDiv.style.minHeight = '30px'; 29 | rootToggleButtonWrapperDiv.style.height = '30px'; 30 | rootToggleButtonWrapperDiv.style.marginTop = '6px'; 31 | rootToggleButtonWrapperDiv.style.borderRadius = '6px'; 32 | rootToggleButtonWrapperDiv.style.display = 'flex'; 33 | rootToggleButtonWrapperDiv.style.zIndex = '2'; 34 | 35 | // Create SVG Button 36 | var buttonSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 37 | buttonSVG.setAttribute("id", "toggleButton"); 38 | buttonSVG.setAttribute("width", "22"); 39 | buttonSVG.setAttribute("height", "22"); 40 | buttonSVG.style.marginLeft = "4px"; 41 | buttonSVG.style.marginTop = "4px"; 42 | buttonSVG.style.webkitAppRegion = "no-drag"; // -webkit-app-region style 43 | 44 | var target = document.querySelector("._39oUCO1OuizVPwcnnv88no"); // selecting the target of the menu 45 | if (target.firstChild){ 46 | 47 | rootToggleButtonWrapperDiv.appendChild(buttonSVG); 48 | target.insertBefore(rootToggleButtonWrapperDiv, target.firstChild); // inserting the menu before the first child of the target 49 | 50 | } 51 | 52 | // Create SVG Logo 53 | var logoSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 54 | logoSVG.setAttribute("xmlns", "http://www.w3.org/2000/svg"); 55 | logoSVG.setAttribute("width", "22"); 56 | logoSVG.setAttribute("height", "22"); 57 | logoSVG.setAttribute("viewBox", "0 0 256 259"); 58 | logoSVG.innerHTML = ` 59 | 60 | 61 | 62 | `; 63 | buttonSVG.appendChild(logoSVG); 64 | 65 | // Insert the wrapper div (with SVG) as the first child after the menu 66 | rootMenuWrapperDiv.appendChild(menu); 67 | 68 | 69 | // Start with the menu hidden 70 | menu.style.display = "none"; 71 | menu.style.backgroundColor = 'rgba(var(--backgroundLightish))'; 72 | 73 | // Button click event 74 | buttonSVG.addEventListener("click", function () { 75 | 76 | if (menu.style.display != "flex") { 77 | menu.style.display = "flex"; // Show menu 78 | logoSVG.querySelector("#logoPath").setAttribute("fill", "rgba(var(--accent))"); 79 | if ( 80 | menu.getBoundingClientRect().right > document.querySelector('.ip-YZhijAMZcuRoXBGiye').getBoundingClientRect().left + 5 81 | || 82 | menu.getBoundingClientRect().right > document.querySelector('._2EQ7ghgqIdjKv9jsQC0Zq9').getBoundingClientRect().left + 5 83 | ) { 84 | rootMenuWrapperDiv.style.marginTop = "42px"; 85 | rootMenuWrapperDiv.style.marginLeft = "-30px"; 86 | rootToggleButtonWrapperDiv.style.height = "60px"; 87 | 88 | } 89 | else{ 90 | rootMenuWrapperDiv.style.marginLeft = "0px"; 91 | rootMenuWrapperDiv.style.marginTop = "6px"; 92 | rootToggleButtonWrapperDiv.style.height = "30px"; 93 | } 94 | } else { 95 | menu.style.display = "none"; // Hide menu 96 | document.querySelector(".rootToggleButtonWrapperDiv").setAttribute("height", "30px"); 97 | logoSVG.querySelector("#logoPath").setAttribute("fill", "var(--steamIconWhite)"); 98 | if (window.innerWidth >= 1551) { 99 | rootMenuWrapperDiv.style.marginLeft = "0px"; 100 | rootMenuWrapperDiv.style.marginTop = "6px"; 101 | rootToggleButtonWrapperDiv.style.height = "30px"; 102 | } 103 | if (window.innerWidth < 1551) { 104 | rootMenuWrapperDiv.style.marginLeft = "0px"; 105 | if (rootToggleButtonWrapperDiv.style.height === "60px") { 106 | rootToggleButtonWrapperDiv.style.height = "30px"; 107 | } 108 | } 109 | } 110 | }); 111 | 112 | var target = document.querySelector("._39oUCO1OuizVPwcnnv88no"); // selecting the target of the menu 113 | if (target.firstChild){ 114 | 115 | target.insertBefore(rootMenuWrapperDiv, target.firstChild.nextSibling); // inserting the menu after the first child of the target 116 | 117 | } 118 | }); 119 | }); 120 | } 121 | -------------------------------------------------------------------------------- /js/utilities/systemAccentColors.js: -------------------------------------------------------------------------------- 1 | import waitForElement from "./waitForElement.js"; 2 | 3 | function systemAccentColors() { 4 | // Logging start of function 5 | 6 | 7 | document.documentElement.style.setProperty('--accent', 'var(--SystemAccentColor-RGB)'); 8 | document.documentElement.style.setProperty('--accentLightish', 'var(--SystemAccentColorLight1-RGB)'); 9 | document.documentElement.style.setProperty('--accentLight', 'var(--SystemAccentColorLight2-RGB)'); 10 | document.documentElement.style.setProperty('--accentLightest', 'var(--SystemAccentColorLight3-RGB)'); 11 | document.documentElement.style.setProperty('--accentDarkish', 'var(--SystemAccentColorDark1-RGB)'); 12 | document.documentElement.style.setProperty('--accentDark', 'var(--SystemAccentColorDark2-RGB)'); 13 | document.documentElement.style.setProperty('--accentDarkest', 'var(--SystemAccentColorDark3-RGB)'); 14 | document.documentElement.style.setProperty('--textLightish', 'var(--SystemAccentColorLight2-RGB)'); 15 | document.documentElement.style.setProperty('--textLight', 'var(--SystemAccentColorLight3-RGB)'); 16 | document.documentElement.style.setProperty('--textLightest', 'var(--SystemAccentColorLight3-RGB)'); 17 | document.documentElement.style.setProperty('--textDarkish', 'var(--SystemAccentColorDark1-RGB)'); 18 | document.documentElement.style.setProperty('--textDark', 'var(--SystemAccentColorDark2-RGB)'); 19 | setHueRotateFromCSSVar('--SystemAccentColor-RGB');} 20 | 21 | function setHueRotateFromCSSVar(cssVarName) { 22 | // Logging start of function 23 | 24 | 25 | // Read the CSS variable 26 | const cssVar = getComputedStyle(document.documentElement).getPropertyValue(cssVarName).trim(); 27 | // Extract RGB values from the CSS variable 28 | const rgbValues = cssVar.match(/\d+/g).map(Number); 29 | // Convert RGB to HSL 30 | const rgbToHsl = (r, g, b) => { 31 | r /= 255; 32 | g /= 255; 33 | b /= 255; 34 | const max = Math.max(r, g, b); 35 | const min = Math.min(r, g, b); 36 | let h, s, l = (max + min) / 2; 37 | if (max === min) { 38 | h = s = 0; // achromatic 39 | } else { 40 | const d = max - min; 41 | s = l > 0.5 ? d / (2 - max - min) : d / (max + min); 42 | switch (max) { 43 | case r: h = (g - b) / d + (g < b ? 6 : 0); break; 44 | case g: h = (b - r) / d + 2; break; 45 | case b: h = (r - g) / d + 4; break; 46 | } 47 | h /= 6; 48 | } 49 | return [h * 360, s, l]; 50 | }; const targetColor = [35, 133, 189]; 51 | const [targetHue] = rgbToHsl(...targetColor); 52 | const [currentHue] = rgbToHsl(...rgbValues); // Calculate the hue rotation 53 | let hueRotate = currentHue - targetHue; 54 | if (hueRotate < 0) { 55 | hueRotate += 360; 56 | } // Set the CSS variable for hue-rotate 57 | document.documentElement.style.setProperty('--accentFilter', `hue-rotate(${hueRotate}deg)`);} 58 | 59 | waitForElement('body', function(element) { systemAccentColors(); 60 | }); 61 | -------------------------------------------------------------------------------- /js/utilities/translate.js: -------------------------------------------------------------------------------- 1 | import { filePathPrefix } from "../../config.js"; 2 | // Define the URL to the JSON file 3 | const jsonFileUrl = filePathPrefix + '/data/translations.json'; 4 | 5 | // Function to get the translation for a given text and country code 6 | export default async function getTranslation(text, countryCode) { 7 | 8 | try { 9 | // Fetch the translations JSON file 10 | const response = await fetch(jsonFileUrl); 11 | if (!response.ok) { 12 | throw new Error(`Failed to fetch translations: ${response.statusText}`); 13 | } 14 | 15 | // Parse the JSON response 16 | const translations = await response.json(); 17 | 18 | 19 | // Check if the text key exists in translations 20 | if (translations[text]) { 21 | // Check if the country code exists for the text key 22 | if (translations[text][countryCode]) { 23 | // Return the translation for the given country code as a string 24 | var translation = translations[text][countryCode].toString(); 25 | 26 | return translation; 27 | } else { 28 | // If the country code doesn't exist, return a default message 29 | const defaultMessage = `Translation not found for country code: ${countryCode}`; 30 | 31 | return defaultMessage; 32 | } 33 | } else { 34 | // If the text key doesn't exist, return a default message 35 | const defaultMessage = `Translation not found for text: ${text}`; 36 | 37 | return defaultMessage; 38 | } 39 | } catch (error) { 40 | console.error('Error fetching translations:', error.message); 41 | return 'Error fetching translations. Please try again later.'; 42 | } 43 | } 44 | 45 | 46 | 47 | // Call the function with example inputs 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /js/utilities/transparentGames.js: -------------------------------------------------------------------------------- 1 | import waitForElement from "./waitForElement.js"; 2 | export default function transparentGames() { 3 | // Handle DOM changes 4 | const handleMutations = (mutationsList) => { 5 | mutationsList.forEach((mutation) => { 6 | if (mutation.type === 'childList') { 7 | mutation.addedNodes.forEach((node) => { 8 | if (node instanceof Element && node.matches('._1pwP4eeP1zQD7PEgmsep0W')) { 9 | const uninstalledChild = node.querySelector('.mA39Hqv8LacDppegb_Q_Z'); 10 | if (uninstalledChild) { 11 | // Navigate to the target element 12 | const targetElement = uninstalledChild.parentElement.parentElement.parentElement.parentElement.parentElement.firstElementChild.firstElementChild.nextElementSibling; 13 | if (targetElement) { 14 | targetElement.style.cssText = 'opacity: var(--transparentGameOpacity) !important'; // Using !important to ensure override 15 | } 16 | } 17 | } 18 | }); 19 | } 20 | }); 21 | }; 22 | 23 | // Select the specific div to observe 24 | let targetDiv = document.querySelector('._2Z9gJ6Pd7eZn-kfODcXJuR'); 25 | 26 | // Function to start observing 27 | const startObserving = (targetDiv) => { 28 | const observer = new MutationObserver(handleMutations); 29 | const observerOptions = { 30 | childList: true, 31 | subtree: true, 32 | }; 33 | observer.observe(targetDiv, observerOptions); 34 | 35 | // New observer to detect unloading 36 | const unloadObserver = new MutationObserver(handleUnload); 37 | const unloadObserverOptions = { 38 | childList: true, 39 | subtree: true, 40 | }; 41 | unloadObserver.observe(document.body, unloadObserverOptions); 42 | 43 | function handleUnload(mutations) { 44 | for (const mutation of mutations) { 45 | if (!document.body.contains(targetDiv)) { 46 | 47 | const checkInterval = setInterval(() => { 48 | targetDiv = document.querySelector('._2Z9gJ6Pd7eZn-kfODcXJuR'); 49 | if (targetDiv) { 50 | startObserving(targetDiv); 51 | clearInterval(checkInterval); 52 | } 53 | }, 321); 54 | unloadObserver.disconnect(); // stop observing after detection 55 | break; 56 | } 57 | } 58 | } 59 | }; 60 | 61 | // Check if targetDiv exists and observe 62 | if (targetDiv) { 63 | startObserving(targetDiv); 64 | } else { 65 | const checkInterval = setInterval(() => { 66 | targetDiv = document.querySelector('._2Z9gJ6Pd7eZn-kfODcXJuR'); 67 | if (targetDiv) { 68 | startObserving(targetDiv); 69 | clearInterval(checkInterval); 70 | } 71 | }, 222); // check every 222ms 72 | } 73 | 74 | } 75 | waitForElement('._3Sb2o_mQ30IDRh0C72QUUu', transparentGames); -------------------------------------------------------------------------------- /js/utilities/utility.js: -------------------------------------------------------------------------------- 1 | import { day, month, year, zoomInKey, zoomOutKey } from "../../config.js"; 2 | // Wait for 80ms 3 | function wait() { 4 | return new Promise(resolve => setTimeout(resolve, 80)); 5 | } 6 | 7 | // Wait for 800ms 8 | function bigWait() { 9 | return new Promise(resolve => setTimeout(resolve, 800)); 10 | } 11 | 12 | // ageGate.js 13 | function skipAgeGate() { 14 | //skips age gate (don't tell gabe or my local senator pls) 15 | if (document.querySelector("#app_agegate > div.main_content_ctn > div.agegate_text_container.btns > div") != null){ 16 | document.getElementById("ageYear").value = year; 17 | document.getElementById("ageMonth").value = month; 18 | document.getElementById("ageDay").value = day; 19 | document.querySelector("#view_product_page_btn").click(); 20 | } 21 | } 22 | function zoomEnabler() { 23 | //enables zoom 24 | // Load previous zoom level or set to 100 if it's the first time 25 | var zoomLevel = parseFloat(localStorage.getItem('zoomLevel')) || 1.0; 26 | document.body.style.zoom = zoomLevel; 27 | window.addEventListener('keydown', function(event) { 28 | if (event.ctrlKey || event.metaKey) { // metaKey is for MacOS 29 | switch (event.key) { 30 | case zoomInKey: // Zoom in 31 | zoomLevel = Math.min(zoomLevel + 0.1, 3.0); // Limit zoom in to 300% 32 | break; 33 | case zoomOutKey: // Zoom out 34 | zoomLevel = Math.max(zoomLevel - 0.1, 0.5); // Limit zoom out to 50% 35 | break; 36 | case '0': // Reset 37 | zoomLevel = 1.0; 38 | break; 39 | } 40 | 41 | document.body.style.zoom = zoomLevel; 42 | localStorage.setItem('zoomLevel', zoomLevel); // Remember zoom level 43 | } 44 | }); 45 | } 46 | 47 | 48 | 49 | export { wait, bigWait, skipAgeGate, zoomEnabler }; 50 | 51 | -------------------------------------------------------------------------------- /js/utilities/waitForElement.js: -------------------------------------------------------------------------------- 1 | export default function waitForElement(selector, callback, intervalTime = 69, timeout = 4444, waitForOpener = 0) { 2 | const searchContext = waitForOpener === 1 ? 'Parent Window' : 'Current Context'; 3 | 4 | const elementCheck = () => { 5 | let element; 6 | if (waitForOpener === 1) { 7 | if (!window.opener) { 8 | return; 9 | } 10 | element = window.opener.document.querySelector(selector); 11 | } else { 12 | element = document.querySelector(selector); 13 | } 14 | 15 | if (element) { 16 | clearInterval(interval); 17 | observer.disconnect(); 18 | clearTimeout(failureTimeout); 19 | callback(element); 20 | } 21 | }; 22 | 23 | const observer = new MutationObserver(elementCheck); 24 | 25 | let interval = setInterval(elementCheck, intervalTime); 26 | 27 | let failureTimeout = setTimeout(function () { 28 | clearInterval(interval); 29 | observer.disconnect(); 30 | }, timeout); 31 | 32 | if (waitForOpener === 1 && window.opener) { 33 | observer.observe(window.opener.document, { childList: true, subtree: true }); 34 | } else { 35 | observer.observe(document, { childList: true, subtree: true }); 36 | } 37 | }; 38 | -------------------------------------------------------------------------------- /js/utilities/wideGameIcons.js: -------------------------------------------------------------------------------- 1 | function wideGameIcons() { 2 | const element = { 3 | act(el, callback, opts) { 4 | const observer = new MutationObserver(callback); 5 | observer.observe(el, opts); 6 | 7 | return observer; 8 | }, 9 | 10 | wait(selector, parent = document) { 11 | return new Promise((resolve) => { 12 | const el = parent.querySelector(selector); 13 | if (el) { 14 | resolve(el); 15 | } 16 | 17 | const observer = new MutationObserver(() => { 18 | const el = parent.querySelector(selector); 19 | if (!el) { 20 | return; 21 | } 22 | 23 | resolve(el); 24 | observer.disconnect(); 25 | }); 26 | 27 | observer.observe(document.body, { 28 | subtree: true, 29 | childList: true, 30 | }); 31 | }); 32 | }, 33 | }; 34 | 35 | document.head.innerHTML += ``; 45 | 46 | // library_AppDetailsMain 47 | element.wait(`._2Nq6ov7A1hGcHXVOXNt_OE`).then((elLibraryContainer) => { 48 | element.act( 49 | elLibraryContainer, 50 | () => { 51 | // appportrait_Draggable 52 | let arrGames = elLibraryContainer.querySelectorAll(` 53 | ._3vHkmRShhzwd67_MtEq8-n ._1pwP4eeP1zQD7PEgmsep0W 54 | `); 55 | 56 | arrGames.forEach((elImageContainer) => { 57 | // libraryassetimage_Image 58 | let elImage = elImageContainer.querySelector( 59 | `._24_AuLm54JVe1Zc0AApCDR` 60 | ); 61 | 62 | let nAppID = elImage.src.match(/\d+/)?.[0]; 63 | 64 | // God knows why urlStore.BuildCachedLibraryAssetURL does not work 65 | elImage.src = `${window.opener.urlStore.ResolveURL( 66 | "StoreAppImages" 67 | )}/${nAppID}/header.jpg`; 68 | }); 69 | }, 70 | { childList: true } 71 | ); 72 | }); 73 | } 74 | 75 | // Export the function 76 | export { wideGameIcons }; 77 | -------------------------------------------------------------------------------- /js/webkit.js: -------------------------------------------------------------------------------- 1 | import { skipAgeGate, zoomEnabler } from './utilities/utility.js'; 2 | import waitForElement from './utilities/waitForElement.js'; 3 | import removeProfileBrand from './utilities/removeProfileBrand.js'; 4 | waitForElement('body', function(element) { 5 | 6 | 7 | 8 | // Skip age gate - DO NOT FORGET TO SET YOUR REAL BIRTHDAY! 9 | waitForElement('.agegate_birthday_selector', function(element) { 10 | if (document.querySelector('.agegate_birthday_selector') != null) { 11 | skipAgeGate(); 12 | } 13 | }); 14 | 15 | // Enable zoom 16 | zoomEnabler(); 17 | 18 | // everything below here is optional or in beta 19 | 20 | 21 | 22 | // makes the text on the loading element fun 23 | if (document.querySelector(".LoadingWrapper") != null ){ 24 | //funnyText2(); 25 | waitForElement(".LoadingText", funnyText); 26 | } 27 | 28 | 29 | 30 | 31 | if (document.title.startsWith("Steam Community")) { 32 | if (document.querySelector('.profile_header_actions') && document.querySelector('.profile_header_actions').childElementCount == 1) { 33 | removeProfileBrand(); 34 | } 35 | } 36 | 37 | function funnyText() { 38 | // Define custom easing function 39 | Math.easeInOutSine = (t, b, c, d) => 40 | -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; 41 | const easing = Math.easeInOutSine; 42 | 43 | // Select the target element 44 | const target = document.querySelector('.LoadingText'); 45 | 46 | // Get the bounding box of the target 47 | const bbox = target.getBoundingClientRect(); 48 | const left = bbox.left; 49 | const width = bbox.width; 50 | const height = 100; 51 | 52 | // Wrap each character in a span 53 | target.innerHTML = target.innerText.split('').map( 54 | (char) => `${char}` 55 | ).join(''); 56 | 57 | // Apply transformation to each child span 58 | Array.prototype.forEach.call(target.children, (el) => { 59 | const bbox = el.getBoundingClientRect(); 60 | const w = bbox.width; 61 | const l = bbox.left - left; 62 | 63 | // Calculate offsets and angles 64 | const offset = easing(l, 0, height, width); 65 | const skew = offset - easing(w + l, 0, height, width); 66 | const angle = Math.atan(skew / w); 67 | 68 | // Apply transformations 69 | el.style.transform = `translateY(${-offset}px) skewY(${angle}rad)`; 70 | const computedStyles = window.getComputedStyle(el); 71 | }); 72 | 73 | // Adjust the target's padding 74 | target.style.paddingTop = `${height}px`; 75 | target.style.color = `rgb(var(--textAccented))` 76 | } 77 | 78 | }); 79 | 80 | -------------------------------------------------------------------------------- /millennium.md: -------------------------------------------------------------------------------- 1 | # Another Take On Metro Steam: 2 | [![Thanks for all the fish!](https://img.shields.io/badge/Donate-ko--fi-pink?style=flat-square&logo=kofi&logoColor=%23c381ff&color=%23c381ff)](https://ko-fi.com/plaer1) [![My Discord](https://img.shields.io/discord/493527438928642059?style=flat&logo=discord&logoColor=%23c381ff&color=%23c381ff 3 | )](https://discord.gg/EHMjbeEf82) [![Follow me on Twitter](https://img.shields.io/twitter/url?url=https%3A%2F%2Fx.com%2FPleyar1&style=flat&logo=twitter&logoColor=%23c381ff&label=Follow%20me%20on%20Twitter&color=%23c381ff)](https://x.com/Pleyar1) [![Size of skin](https://img.shields.io/github/repo-size/Plaer1/ATOMS?style=flat&logo=github&logoColor=%23c381ff&color=%23c381ff)](https://github.com/Plaer1/ATOMS/) 4 | 5 | A theme for Steam, based on: 6 | [The Unofficial Metro for Steam](https://steamcommunity.com/groups/metroskin/discussions/0/141136086931804907/) and [Steam Dark mode by AikoMidori.](https://github.com/AikoMidori/steam-dark-mode) 7 | 8 | If you need support: you can find me as Plær1’ in [The Unofficial Metro for Steam Discord](https://discord.gg/UZvkvkh). 9 | 10 | 11 | ### Library: 12 | ![ATOMS Steam Library](https://raw.githubusercontent.com/Plaer1/ATOMS-Media/main/steamLibrary.png) 13 | 14 | 15 | ### Store Page: 16 | ![ATOMS Store Page](https://raw.githubusercontent.com/Plaer1/ATOMS-Media/main/steamStore.png) 17 | 18 | ## Install: 19 | 20 | ### [Download and install Millennium](https://github.com/SteamClientHomebrew/Millennium) to a folder on your pc* 21 | This will be the app you use to install/manage steam skins. 22 | ‎ ‎ 23 | 24 | ‎ 25 | ### Download and extract the skin folder (``ATOMS``) to: 26 | ``%steamdata%/steamui/skins`` 27 | 28 | ‎ 29 | ### When you first open Millennium and select the ATOMS skin it will warn you that you need to enable JavaScript, if you do not do this, the theme WILL NOT work! 30 | 31 | 32 | ## Features: 33 | * Built from the ground up to be highly configurable, there are already plenty of settings in the ``config.css`` with more to come! 34 | 35 | * Theme'd basically every page in Steam, *if you see* **anything** *that doesn't look theme'd at all*, ***please*** fill out a bug report or contact me on discord! 36 | 37 | * Skip the age gate on store pages (***make sure to fill out your real birthday in the file***: ``utility.js``**!!**). 38 | 39 | * Is there any deal integration: 40 | ![ATOMS ITAD](https://raw.githubusercontent.com/Plaer1/ATOMS-Media/main/steamitad.png) 41 | 42 | * Supports System accent colors for all steam accents, even those pesky images: 43 | ![ATOMS Accent Color Support](https://github.com/Plaer1/ATOMS-Media/blob/0f0e5cd2b1a03e19df5dbd775f25e02007ec1425/accentsAnimated.png) 44 | 45 | * Removed bottom menu and moved buttons to top right: 46 | ![ATOMS Bar Buttons](https://raw.githubusercontent.com/Plaer1/ATOMS-Media/main/steamTopRightBar.png) 47 | 48 | * Moved "Root" menu to it's own hidden menu: 49 | ![ATOMS Root Menu](https://raw.githubusercontent.com/Plaer1/ATOMS-Media/main/steamRootMenu.png) 50 | 51 | * added Reload/Restart steam buttons: 52 | ![ATOMS Root Menu](https://raw.githubusercontent.com/Plaer1/ATOMS-Media/main/restartaloadMenu.png) 53 | 54 | * Dim the artwork of uninstalled games in the library: 55 | ![ATOMS Root Menu](https://raw.githubusercontent.com/Plaer1/ATOMS-Media/main/transparentGames.png) 56 | 57 | * Hides any personal ickyness. from your steam profile (only works for you, the world still knows what you did). 58 | 59 | * You can use the arrow keys to navigate the steam discovery que. 60 | 61 | * You can use ``'Control' + '+'`` and ``'Control' + '-'`` to zoom in and out on the non-library pages. 62 | 63 | ## Known bugs/to-do's 64 | If you find **any bugs** not listed here, please don't hesitate to contact me in the place(s) listed above to report new issues. 65 | * The ITAD integration doesn't show any bundles, etc, just the main game on the page. 66 | * ***Big picture mode is not done**, this is however a very high priority, as I have a steam deck and would like to get that part of the skin on the CSS loader repo. 67 | * Skin is not tested on MacOS please let me know what's not working and I'll add it to the to-do list! 68 | * Most of the web pages are still running a hacky version of "[webkit.css](https://github.com/AikoMidori/steam-dark-mode/blob/master/webkit.css)" and as such there are tons of accents that are still the vanilla steam blue, (hopefully all the backgrounds at least are dark-mode however). I will be updating this file myself eventually, however I'm waiting on an anticipated big update from Valve first (so we'll see when it happens if ever 😴😴😴). 69 | * The "translations" for the "Reload Steam", and "Restart Steam" buttons are google translate and as-such are most likely **all wrong** if anyone who is multilingual could help out here that would be quite appreciated! 70 | * On that same note, I will be implementing the correct regional pricing for the ITAD support, *before* I fix all the translations, it's just easier to start there. I am very sorry for any inconvienance this causes. 71 | 72 | ## Credits: 73 | * [ShadowMonster99](https://ko-fi.com/shadowmonster) for Millennium, and being generally a cool guy. 74 | * [Shiina](https://shiinaskins.com) for the Steam Dark Mode skin, which many pages in this project still use. 75 | * [PhantomGamers](https://ko-fi.com/phantomgamers) for SFP, and being generally a cool guy. 76 | 77 | -------------------------------------------------------------------------------- /skin.json: -------------------------------------------------------------------------------- 1 | { 2 | "author":"Plaer1", 3 | "name":"ATOMS", 4 | "description":"Just another \"take\" on Metro Steam.", 5 | "version":"1.1.1.1.1.1.1.1.1.11", 6 | "github":{ 7 | "owner":"Plaer1", 8 | "repo_name":"ATOMS" 9 | }, 10 | "discord_support":{ 11 | "inviteCodeExcludingLink":"UZvkvkh" 12 | }, 13 | "tags":[ 14 | "Minimal", 15 | "Dark", 16 | "Customizable", 17 | "Metro" 18 | ], 19 | "header_image":"https://raw.githubusercontent.com/Plaer1/ATOMS-Media/main/atomsHeaderImage.png", 20 | "splash_image":"https://raw.githubusercontent.com/Plaer1/ATOMS-Media/main/atomsSplashImage.png", 21 | "Steam-WebKit":"css/webkit.css", 22 | "webkitJS":"js/webkit.js", 23 | "Patches":[ 24 | { 25 | "MatchRegexString":"https://.*.steampowered.com", 26 | "TargetCss":"css/webkit.css", 27 | "TargetJs":"js/webkit.js" 28 | }, 29 | { 30 | "MatchRegexString":"https://steamcommunity.com", 31 | "TargetCss":"css/webkit.css", 32 | "TargetJs":"js/webkit.js" 33 | }, 34 | { 35 | "MatchRegexString":"^Steam$", 36 | "TargetCss":"css/library.css", 37 | "TargetJs":"js/steam.js" 38 | }, 39 | { 40 | "MatchRegexString":"^Sign in to Steam$", 41 | "TargetCss":"css/library.css", 42 | "TargetJs":"js/steam.js" 43 | }, 44 | { 45 | "MatchRegexString":".ModalDialogPopup", 46 | "TargetCss":"css/library.css" 47 | }, 48 | { 49 | "MatchRegexString":".FullModalOverlay", 50 | "TargetCss":"css/library.css" 51 | }, 52 | { 53 | "MatchRegexString":".friendsui-container", 54 | "TargetCss":"css/friends.css" 55 | }, 56 | { 57 | "MatchRegexString":"^OverlayBrowser_Browser$", 58 | "TargetCss":"css/library.css" 59 | }, 60 | { 61 | "MatchRegexString":"^SP Overlay:", 62 | "TargetCss":"css/library.css" 63 | }, 64 | { 65 | "MatchRegexString":"Menu$", 66 | "TargetCss":"css/menus.css", 67 | "TargetJs":"js/navigation.js" 68 | }, 69 | { 70 | "MatchRegexString":"Supernav$", 71 | "TargetCss":"css/menus.css" 72 | }, 73 | { 74 | "MatchRegexString":"^notificationtoasts_", 75 | "TargetCss":"css/library.css" 76 | }, 77 | { 78 | "MatchRegexString":"^SteamBrowser_Find$", 79 | "TargetCss":"css/library.css" 80 | }, 81 | { 82 | "MatchRegexString":"^OverlayTab\\d+_Find$", 83 | "TargetCss":"css/library.css" 84 | }, 85 | { 86 | "MatchRegexString":"^Steam Big Picture Mode$", 87 | "TargetCss":"css/bigpicture.css" 88 | }, 89 | { 90 | "MatchRegexString":" Controller Layout$", 91 | "TargetCss":"css/controller.css" 92 | }, 93 | { 94 | "MatchRegexString":"^Account Data$", 95 | "TargetCss":"css/webkit.css" 96 | }, 97 | { 98 | "MatchRegexString":"^QuickAccess_", 99 | "TargetCss":"css/bigpicture.css" 100 | }, 101 | { 102 | "MatchRegexString":"^MainMenu_", 103 | "TargetCss":"css/bigpicture.css" 104 | }, 105 | { 106 | "MatchRegexString":"Dev Tools", 107 | "TargetCss":"css/menus.css" 108 | } 109 | ], 110 | "Conditions": { 111 | "Use Custom Accent Color?": { 112 | "default": "no", 113 | "description": "Enables Use of System Accent Color from Mill' settings.", 114 | "values": { 115 | "no": {}, 116 | "yes": { 117 | "TargetJs": { 118 | "affects": [".*"], "src": "js/utilities/systemAccentColors.js" 119 | } 120 | } 121 | } 122 | }, 123 | "Dim uninstalled games?": { 124 | "default": "yes", 125 | "description": "Enables semi-transparent icons for uninstall games in the game-grid.", 126 | "values": { 127 | "no": {}, 128 | "yes": { 129 | "TargetJs": { 130 | "affects": ["^Steam$"], "src": "js/utilities/transparentGames.js" 131 | } 132 | } 133 | } 134 | }, 135 | "Enable Que Via Keyboard?": { 136 | "default": "yes", 137 | "description": "Allows you to navigate the Steam Que on store pages Via the arrow keys.", 138 | "values": { 139 | "no": {}, 140 | "yes": { 141 | "TargetJs": { 142 | "affects": ["^https://store\\.steampowered\\.com/.*"], "src": "js/utilities/queueKeyHandler.js" 143 | } 144 | } 145 | } 146 | }, 147 | "Enable Automatic Que Skipping?": { 148 | "default": "yes", 149 | "description": "Automatically ignores certain games (tags/banned keywords can be set in 'config.js')", 150 | "values": { 151 | "no": {}, 152 | "yes": { 153 | "TargetJs": { 154 | "affects": ["^https://store\\.steampowered\\.com/.*"], "src": "js/utilities/queBlacklist.js" 155 | } 156 | } 157 | } 158 | }, 159 | "Enable shaded game/community backgrounds?": { 160 | "default": "yes", 161 | "description": "Automatically ignores certain games (tags/banned keywords can be set in 'config.js')", 162 | "values": { 163 | "no": {}, 164 | "yes": { 165 | "TargetJs": { 166 | "affects": ["^https://(store\\.steampowered\\.com|steamcommunity\\.com)/.*"], "src": "js/utilities/greyscaleBackground.js" 167 | } 168 | } 169 | } 170 | } 171 | } 172 | } --------------------------------------------------------------------------------