├── .github ├── ISSUE_TEMPLATE │ ├── BUG-REPORT.yml │ ├── FEATURE-REQUEST.yml │ └── config.yml ├── LICENSE-3rdParty.md └── workflows │ └── attach-zip-to-draft.yml ├── .gitignore ├── LICENSE ├── README.md ├── _assets └── img │ ├── banner.png │ ├── conceptLibGamepage.png │ ├── conceptLibHome.png │ ├── conceptStoreGamepage.png │ ├── conceptStorePage.png │ ├── friendAndChat.png │ ├── libGamepage.png │ ├── libHome.png │ ├── logo.png │ ├── preview.png │ └── storePage.png ├── friends.custom.css ├── libraryroot.custom.css ├── menu.custom.css ├── options ├── VACBanVisibility │ ├── all.css │ └── me.css ├── experimental │ ├── storeGamepage.css │ ├── userpannel.css │ ├── userpannel.js │ ├── wishlistGrid.css │ └── wishlistGrid.js ├── general │ ├── fonts │ │ ├── arial.css │ │ ├── beVietnamPro.css │ │ ├── gluten.css │ │ ├── quicksand.css │ │ ├── roboto.css │ │ ├── sourceCodePro.css │ │ └── ubuntu.css │ ├── gamepageAlwaysShowGameInfo.css │ ├── gamepageBiggerBanner.css │ ├── gamepageCustomArtwork.css │ ├── gamepageGameInfoArtwork.css │ ├── gamepageSidebarLeft.css │ ├── showSidebarInStoreOnHover.css │ └── systemAccent.css ├── steamBloat │ ├── addShelf.css │ ├── navigationButtons.css │ ├── shinyEffect.css │ ├── shopCartRecommendations.css │ ├── urlBar.css │ ├── userpannelButtons │ │ ├── bpm.css │ │ ├── friendList.css │ │ ├── news.css │ │ ├── notification.css │ │ └── steamVr.css │ ├── vacBan │ │ ├── all.css │ │ └── me.css │ ├── walletBalance.css │ └── whatsNew │ │ ├── compact.css │ │ └── hide.css └── whatsNew │ ├── compact.css │ └── hide.css ├── skin.json ├── src ├── css │ ├── bigpicture.custom.css │ ├── friends │ │ ├── chat.css │ │ ├── groupChat.css │ │ └── list.css │ ├── inputs │ │ ├── button.css │ │ ├── checkbox.css │ │ └── import.css │ ├── notifications.custom.css │ ├── overlay.custom.css │ ├── overlay │ │ ├── achievements.css │ │ ├── clock.css │ │ ├── controllerSettings.css │ │ ├── discussions.css │ │ ├── dlc.css │ │ ├── friends.css │ │ ├── gameOverview.css │ │ ├── guides.css │ │ ├── notes.css │ │ ├── recording.css │ │ ├── screenshotManager.css │ │ ├── settings.css │ │ └── webBrowser.css │ ├── regular.css │ ├── root.css │ ├── startupLogin.custom.css │ ├── steam │ │ ├── achievementsModal.css │ │ ├── downloadPage.css │ │ ├── gamepage.css │ │ ├── libHome.css │ │ ├── millenniumSettings.css │ │ ├── modalDialogPopup.css │ │ ├── newsModal.css │ │ ├── sidebar.css │ │ └── titlebar.css │ └── webkit │ │ ├── agecheck.css │ │ ├── cart.css │ │ ├── game.css │ │ ├── home.css │ │ ├── news.css │ │ ├── profile.css │ │ ├── store.css │ │ └── wishlist.css ├── icons │ ├── achievementsStar.svg │ ├── fluent │ │ └── fluent.css │ ├── hltb.svg │ ├── logo.svg │ └── play.svg └── js │ ├── friends.custom.js │ ├── libraryroot.custom.js │ ├── notifications.custom.js │ └── webkit.js └── webkit.css /.github/ISSUE_TEMPLATE/BUG-REPORT.yml: -------------------------------------------------------------------------------- 1 | name: Bug Report 2 | description: Create a bug report to help us find and fix bugs! 3 | title: "[Bug] " 4 | type: "Bug" 5 | labels: [bug] 6 | projects: "SpaceTheme/3" 7 | assignees: SpaceEnergy 8 | body: 9 | - type: checkboxes 10 | attributes: 11 | label: I checked the following before reporting a bug 12 | description: Please check the following before reporting a bug. This helps us to quickly identify and resolve issues. 13 | options: 14 | - label: I found no existing issues matching my bug 15 | required: true 16 | - label: I found no existing issues matching my bug on the [Millennium Repo](https://github.com/shdwmtr/millennium/issues) 17 | required: true 18 | - label: I restarted Steam completely and checked if the bug is still there 19 | required: true 20 | - label: I have checked the theme options 21 | required: true 22 | - label: I use the latest version 23 | required: true 24 | - type: textarea 25 | attributes: 26 | label: Current Behavior 27 | description: A concise description of what you're experiencing. 28 | validations: 29 | required: true 30 | - type: textarea 31 | attributes: 32 | label: Expected Behavior 33 | description: A concise description of what you expected to happen. 34 | validations: 35 | required: true 36 | - type: textarea 37 | attributes: 38 | label: Steps To Reproduce 39 | description: Steps to reproduce the behavior. 40 | placeholder: | 41 | 1. Open modal 42 | 2. Click on dropdown 43 | 3. Scroll down 44 | 4. See bug... 45 | validations: 46 | required: true 47 | - type: textarea 48 | attributes: 49 | label: Anything else? 50 | description: | 51 | Links? References? Anything that will give us more context about the issue you are encountering! 52 | 53 | Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in. -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/FEATURE-REQUEST.yml: -------------------------------------------------------------------------------- 1 | name: Feature Request 2 | description: Suggest an idea for this project! 3 | title: "[Feature] " 4 | type: "Feature" 5 | labels: [enhancement] 6 | projects: "SpaceTheme/3" 7 | assignees: SpaceEnergy 8 | body: 9 | - type: checkboxes 10 | attributes: 11 | label: I checked the following before reporting a feature request 12 | description: Please check the following before reporting a feature request. This helps us to quickly identify and resolve issues. 13 | options: 14 | - label: I found no existing issue matching my feature request 15 | required: true 16 | - label: I have checked the theme options 17 | required: true 18 | - label: I use the latest version 19 | required: true 20 | - type: textarea 21 | attributes: 22 | label: Descripe the feature 23 | description: A concise description of what you would like to see. 24 | validations: 25 | required: true 26 | - type: textarea 27 | attributes: 28 | label: Anything else? 29 | description: | 30 | Links? References? Anything that will give us more context about the issue you are encountering! 31 | 32 | Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in. -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: Discord Server 4 | url: https://discord.spacetheme.de 5 | about: For simple questions -------------------------------------------------------------------------------- /.github/LICENSE-3rdParty.md: -------------------------------------------------------------------------------- 1 | ### Fluent UI System Icons 2 | MIT License 3 | 4 | Copyright (c) 2020 Microsoft Corporation 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. -------------------------------------------------------------------------------- /.github/workflows/attach-zip-to-draft.yml: -------------------------------------------------------------------------------- 1 | name: Auto Upload ZIP to Release 2 | 3 | on: 4 | release: 5 | types: [published] 6 | 7 | jobs: 8 | attach-zip: 9 | runs-on: ubuntu-latest 10 | 11 | steps: 12 | - name: Checkout repository 13 | uses: actions/checkout@v3 14 | 15 | - name: Install GitHub CLI 16 | run: sudo apt install gh -y 17 | 18 | - name: Create ZIP file named 'SpaceTheme_for_Steam.zip' 19 | run: | 20 | zip -r SpaceTheme_for_Steam.zip . \ 21 | -x "*.git*" "*.github*" "_assets/*" "README.md" 22 | 23 | - name: Upload ZIP to release 24 | env: 25 | GH_TOKEN: ${{ secrets.PERSONAL_TOKEN }} 26 | run: | 27 | TAG_NAME="${{ github.event.release.tag_name }}" 28 | RELEASE_ID=$(gh api repos/${{ github.repository }}/releases/tags/$TAG_NAME --jq '.id') 29 | gh api \ 30 | --method POST \ 31 | -H "Accept: application/vnd.github+json" \ 32 | /repos/${{ github.repository }}/releases/$RELEASE_ID/assets?name=SpaceTheme_for_Steam.zip \ 33 | --input SpaceTheme_for_Steam.zip \ 34 | --header "Content-Type: application/zip" -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | options/experimental/storeGamepage.css 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023-2024 SpaceTheme 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 |

3 | 4 | ![Endpoint Badge](https://img.shields.io/github/downloads/SpaceTheme/Steam/total?style=for-the-badge&labelColor=%23111111&color=%231e1e1e) 5 | ![Endpoint Badge](https://img.shields.io/endpoint?url=https%3A%2F%2Floc-counter.onrender.com%2F%3Frepo%3DSpaceTheme%2FSteam%26branch%3Dmain&style=for-the-badge&label=Lines%20of%20Code&labelColor=%23111111&color=%231e1e1e) 6 | [![Discord](https://img.shields.io/badge/discord-black?style=for-the-badge&logo=discord&logoColor=%23ffffff&labelColor=%235865F2&color=%235865F2)](https://discord.spacetheme.de) 7 | [![KoFi](https://img.shields.io/badge/kofi-dark?style=for-the-badge&logo=kofi&logoColor=%23fff&labelColor=%23ff5e5b&color=%23ff5e5b)](https://kofi.spacetheme.de) 8 | [![Website](https://img.shields.io/badge/website-back?style=for-the-badge&logo=googlechrome&logoColor=%23ffffff&labelColor=%23111111&color=%23111111)](https://spacetheme.de) 9 |
10 |
11 | 12 | ![Preview](https://raw.githubusercontent.com/SpaceTheme/Steam/main/_assets/img/preview.png) 13 |
14 | More images (v20250419) 15 | 16 | | Library home | Library gamepage | 17 | | :---: | :---: | 18 | | ![Preview](https://raw.githubusercontent.com/SpaceTheme/Steam/main/_assets/img/libHome.png) | ![Preview](https://raw.githubusercontent.com/SpaceTheme/Steam/main/_assets/img/libGamepage.png) | 19 | | **Store** | **Friend list & Chat** | 20 | | ![Preview](https://raw.githubusercontent.com/SpaceTheme/Steam/main/_assets/img/storePage.png) | ![Preview](https://raw.githubusercontent.com/SpaceTheme/Steam/main/_assets/img/friendAndChat.png) | 21 |
22 |
23 | More images (Concepts) 24 | 25 | | Library home | Library gamepage | 26 | | :---: | :---: | 27 | | ![Preview](https://raw.githubusercontent.com/SpaceTheme/Steam/main/_assets/img/conceptLibHome.png) | ![Preview](https://raw.githubusercontent.com/SpaceTheme/Steam/main/_assets/img/conceptLibGamepage.png) | 28 | | **Store** | **Store gamepage** | 29 | | ![Preview](https://raw.githubusercontent.com/SpaceTheme/Steam/main/_assets/img/conceptStorePage.png) | ![Preview](https://raw.githubusercontent.com/SpaceTheme/Steam/main/_assets/img/conceptStoreGamepage.png) | 30 |
31 | 32 | ## Info 33 | - Some things only work properly when steam is maximized on a 1920x1080p (or higher) monitor. 34 | - Smaller monitors may be properly supported later 35 | 36 | ## Installation 37 | 1. Download [Millennium](https://docs.steambrew.app/users/installing) and follow the provided instructions to install the patcher. 38 | 1. Open the [Theme Page](https://steambrew.app/theme?id=zQndv1rI0FXLh3QTRgOL) and click the Install button. 39 | 1. Navigate to the Theme tab in your Steam settings and select "SpaceTheme." 40 | 41 | **Voilà! Enjoy the new look of your Steam!** 42 | -------------------------------------------------------------------------------- /_assets/img/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/_assets/img/banner.png -------------------------------------------------------------------------------- /_assets/img/conceptLibGamepage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/_assets/img/conceptLibGamepage.png -------------------------------------------------------------------------------- /_assets/img/conceptLibHome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/_assets/img/conceptLibHome.png -------------------------------------------------------------------------------- /_assets/img/conceptStoreGamepage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/_assets/img/conceptStoreGamepage.png -------------------------------------------------------------------------------- /_assets/img/conceptStorePage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/_assets/img/conceptStorePage.png -------------------------------------------------------------------------------- /_assets/img/friendAndChat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/_assets/img/friendAndChat.png -------------------------------------------------------------------------------- /_assets/img/libGamepage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/_assets/img/libGamepage.png -------------------------------------------------------------------------------- /_assets/img/libHome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/_assets/img/libHome.png -------------------------------------------------------------------------------- /_assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/_assets/img/logo.png -------------------------------------------------------------------------------- /_assets/img/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/_assets/img/preview.png -------------------------------------------------------------------------------- /_assets/img/storePage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/_assets/img/storePage.png -------------------------------------------------------------------------------- /friends.custom.css: -------------------------------------------------------------------------------- 1 | @import url("./src/css/regular.css"); 2 | @import url("./src/css/friends/chat.css"); 3 | @import url("./src/css/friends/groupChat.css"); 4 | @import url("./src/css/friends/list.css"); 5 | 6 | 7 | 8 | .singleWindowFocusBar { 9 | mask: unset; 10 | -webkit-mask: unset; 11 | background: unset; 12 | } 13 | 14 | 15 | .TitleBar { 16 | top: -32px; 17 | width: calc(100% + 32px); 18 | margin-left: -16px; 19 | } 20 | .LegacyPopup .TitleBar { 21 | top: 0; 22 | width: 100%; 23 | margin-left: 0; 24 | } 25 | 26 | 27 | .friendsListContainer, 28 | .multiChatDialog { 29 | overflow: unset !important; 30 | height: calc(100% - 48px); 31 | margin: 32px 16px 16px; 32 | } -------------------------------------------------------------------------------- /libraryroot.custom.css: -------------------------------------------------------------------------------- 1 | @import url("./src/css/regular.css"); 2 | @import url("./src/css/steam/titlebar.css"); 3 | @import url("./src/css/steam/sidebar.css"); 4 | @import url("./src/css/steam/libHome.css"); 5 | @import url("./src/css/steam/millenniumSettings.css"); 6 | @import url("./src/css/steam/gamepage.css"); 7 | @import url("./src/css/steam/downloadPage.css"); 8 | @import url("./src/css/steam/newsModal.css"); 9 | @import url("./src/css/steam/achievementsModal.css"); 10 | 11 | 12 | /* Base */ 13 | ._1ENHEsrSLcTRtPQFl1F-wL { 14 | border: none; 15 | background-color: rgb(var(--background)) !important; 16 | } 17 | ._1rDh5rXSFZJOqCa4UpnI4z { 18 | margin: 0 16px 16px; 19 | border-radius: 8px; 20 | } 21 | 22 | 23 | 24 | 25 | 26 | /*! Remove after experiment is live */ 27 | /*downloadbar*/ 28 | ._1_yS5UP7el0aN4vntx3dx { 29 | margin: 0 16px 16px; 30 | } 31 | 32 | ._3vCzSrrXZzZjVJFZNg9SGu { 33 | border-radius: 8px; 34 | background-color: rgb(var(--color-2)); 35 | box-shadow: none !important; 36 | } -------------------------------------------------------------------------------- /menu.custom.css: -------------------------------------------------------------------------------- 1 | /* Base */ 2 | body.DesktopUI { 3 | background: unset !important; 4 | } 5 | 6 | body.DesktopUI .PP7LM0Ow1K5qkR8WElLpt { 7 | background: unset; 8 | } 9 | 10 | body.DesktopUI ._2EstNjFIIZm_WUSKm5Wt7n { 11 | padding: 6px !important; 12 | border: 3px solid rgb(var(--color-5)); 13 | border-radius: 8px; 14 | background-color: rgb(var(--color-3)); 15 | } 16 | 17 | 18 | /* Items */ 19 | body.DesktopUI ._1n7Wloe5jZ6fSuvV18NNWI { 20 | padding: 6px 12px; 21 | font-weight: 500; 22 | border-radius: 8px; 23 | color: #9c9c9c; 24 | } 25 | body.DesktopUI ._1n7Wloe5jZ6fSuvV18NNWI:hover { 26 | color: #fff; 27 | background-color: rgb(var(--color-2)); 28 | } 29 | body.DesktopUI .WUOrULWKkGLl3ZUQdDXg8.WUOrULWKkGLl3ZUQdDXg8+._1n7Wloe5jZ6fSuvV18NNWI { 30 | border: none; 31 | } 32 | 33 | 34 | /* Divider */ 35 | body.DesktopUI ._2jXHP0742MyApMUVUM8IFn._21GPYlKBCLsHQpTsHw_RL_, 36 | body.DesktopUI .WUOrULWKkGLl3ZUQdDXg8, 37 | body.DesktopUI .IjIBR_wDDi2N77Oz4KAT4 { 38 | width: auto; 39 | height: 3px; 40 | margin: 2px 6px; 41 | padding: 0; 42 | border: none; 43 | border-radius: 8px; 44 | background-color: rgb(var(--color-2)) !important; 45 | } 46 | 47 | 48 | /* Hide last Divider from tray menu */ 49 | body.DesktopUI .WUOrULWKkGLl3ZUQdDXg8:nth-last-child(1) { 50 | display: none; 51 | } 52 | 53 | 54 | /* New Badge */ 55 | body.DesktopUI ._3EvKu7VyTGMoDtbyugKQ5H { 56 | margin: 0 6px 0 0; 57 | padding: 0 6px; 58 | border-radius: 8px; 59 | background-color: rgb(var(--accent-2)); 60 | } -------------------------------------------------------------------------------- /options/VACBanVisibility/all.css: -------------------------------------------------------------------------------- 1 | .profile_ban_status { 2 | display: none; 3 | } -------------------------------------------------------------------------------- /options/VACBanVisibility/me.css: -------------------------------------------------------------------------------- 1 | :has(.profile_header_badgeinfo .btn_profile_action[href*="edit/info"]) .profile_ban_status { 2 | display: none; 3 | } -------------------------------------------------------------------------------- /options/experimental/storeGamepage.css: -------------------------------------------------------------------------------- 1 | /* 2 | & Remove after experimental 3 | */ 4 | /* heart, store, game, header */ 5 | .game_bg.application .queue_overflow_ctn [id*="add_to_wishlist_area"] .btn_medium span::before { 6 | content: "\f47a" !important; 7 | font-size: 22px; 8 | color: rgb(var(--blue)); 9 | font-family: FluentSystemIcons-Regular !important; 10 | font-style: normal; 11 | font-weight: normal !important; 12 | font-variant: normal; 13 | text-transform: none; 14 | line-height: 1; 15 | -webkit-font-smoothing: antialiased; 16 | } 17 | .game_bg.application .queue_overflow_ctn [id*="add_to_wishlist_area"] .btn_medium span:has(img)::before { 18 | content: "\f47e" !important; 19 | font-family: FluentSystemIcons-Filled !important; 20 | } 21 | 22 | /* prohibitedmultiple, store, game, header */ 23 | .game_bg.application .queue_overflow_ctn #queue_btn_ignore_menu .btn_medium span::before { 24 | content: "\e9da" !important; 25 | font-size: 22px; 26 | color: #8e8e8e; 27 | font-family: FluentSystemIcons-Filled !important; 28 | font-style: normal; 29 | font-weight: normal !important; 30 | font-variant: normal; 31 | text-transform: none; 32 | line-height: 1; 33 | -webkit-font-smoothing: antialiased; 34 | } 35 | .game_bg.application .queue_overflow_ctn #queue_btn_ignore_menu .btn_medium span:hover::before { 36 | color: #fff; 37 | } 38 | 39 | 40 | /* arrow right, store, game, header */ 41 | .game_bg.application .queue_overflow_ctn .next_in_queue_content >span::before { 42 | content: "\f182" !important; 43 | font-size: 22px; 44 | color: rgb(var(--yellow)); 45 | font-family: FluentSystemIcons-Filled !important; 46 | font-style: normal; 47 | font-weight: normal !important; 48 | font-variant: normal; 49 | text-transform: none; 50 | line-height: 1; 51 | -webkit-font-smoothing: antialiased; 52 | } 53 | 54 | /* follow, store, game, header */ 55 | .game_bg.application .queue_overflow_ctn .queue_btn_follow .btn_medium::before { 56 | content: "\f56f" !important; 57 | font-size: 22px; 58 | color: rgb(var(--blue)); 59 | font-family: FluentSystemIcons-Regular !important; 60 | font-style: normal; 61 | font-weight: normal !important; 62 | font-variant: normal; 63 | text-transform: none; 64 | line-height: 1; 65 | -webkit-font-smoothing: antialiased; 66 | } 67 | .game_bg.application .queue_overflow_ctn .queue_btn_follow .btn_medium.queue_btn_active::before { 68 | content: "\f576" !important; 69 | font-family: FluentSystemIcons-Filled !important; 70 | } 71 | 72 | 73 | 74 | 75 | body.v6.game_bg.application .page_content_ctn, 76 | body.v6.game_bg.application .page_content { 77 | width: 1032px; 78 | margin: 0 auto; 79 | } 80 | 81 | 82 | /* 83 | & Haeder 84 | */ 85 | 86 | /* 87 | ! Title Area 88 | */ 89 | .game_bg.application .page_title_area .apphub_HeaderStandardTop { 90 | min-height: unset; 91 | margin: 0 0 16px; 92 | } 93 | 94 | 95 | /* Game Path */ 96 | .game_bg.application .page_title_area .breadcrumbs { 97 | display: none; 98 | } 99 | 100 | /* Game Title */ 101 | .game_bg.application .page_title_area .apphub_HomeHeaderContent { 102 | max-width: unset; 103 | } 104 | 105 | .game_bg.application .page_title_area .apphub_AppName { 106 | font-size: 36px; 107 | line-height: 36px; 108 | font-weight: 700; 109 | } 110 | 111 | 112 | /* Community Hub */ 113 | .game_bg.application .page_title_area .apphub_OtherSiteInfo { 114 | display: none; 115 | } 116 | 117 | 118 | /* Sale Event Banner */ 119 | .game_bg.application .saleEventBannerLink { 120 | display: none; 121 | } 122 | 123 | 124 | /* 125 | ! Wishlist/Follow Area 126 | */ 127 | 128 | .game_bg.application .queue_overflow_ctn { 129 | position: absolute; 130 | top: -48px; 131 | right: 0; 132 | } 133 | 134 | .game_bg.application .queue_overflow_ctn .queue_ctn { 135 | width: unset; 136 | margin: 0; 137 | background: unset; 138 | } 139 | 140 | .game_bg.application .queue_overflow_ctn .queue_actions_ctn { 141 | display: flex; 142 | gap: 6px; 143 | justify-content: flex-end; 144 | padding: 0; 145 | } 146 | 147 | 148 | /* Buttons */ 149 | .game_bg.application .queue_overflow_ctn .btn_medium { 150 | display: flex; 151 | justify-content: center; 152 | align-items: center; 153 | align-content: center; 154 | height: 100%; 155 | margin: 0; 156 | padding: 0; 157 | font-weight: 500; 158 | color: #fff !important; 159 | background: unset; 160 | background-color: rgb(var(--blue), .2); 161 | } 162 | .game_bg.application .queue_overflow_ctn .btn_medium:hover { 163 | background: unset !important; 164 | background-color: rgb(var(--blue), .4) !important; 165 | } 166 | 167 | .game_bg.application .queue_overflow_ctn .btn_medium span { 168 | display: flex; 169 | align-items: center; 170 | gap: 6px; 171 | padding: 0 12px; 172 | } 173 | .game_bg.application .queue_overflow_ctn .btn_medium span img { 174 | display: none; 175 | } 176 | 177 | /* Wishlist */ 178 | .game_bg.application .queue_overflow_ctn #wishlistDropDown { 179 | display: none; 180 | } 181 | 182 | /* Follow */ 183 | .game_bg.application .queue_overflow_ctn .queue_btn_follow .btn_medium { 184 | padding: 0 12px; 185 | } 186 | .game_bg.application .queue_overflow_ctn .queue_btn_follow span { 187 | display: none; 188 | } 189 | 190 | /* Ignore */ 191 | .game_bg.application .queue_overflow_ctn .queue_btn_ignore { 192 | display: none; 193 | } 194 | .game_bg.application .queue_overflow_ctn #queue_btn_ignore_menu .btn_medium { 195 | display: flex; 196 | height: 32px; 197 | background-color: rgb(var(--color-2)); 198 | } 199 | .game_bg.application .queue_overflow_ctn #queue_btn_ignore_menu .btn_medium:hover { 200 | background-color: rgb(var(--color-2)) !important; 201 | } 202 | .game_bg.application .queue_overflow_ctn #queue_btn_ignore_menu .btn_medium span { 203 | padding: 0 6px; 204 | } 205 | 206 | /* Add a note Augmented Steam plugin */ 207 | .game_bg.application .queue_overflow_ctn #esi-user-note-button { 208 | display: none; 209 | } 210 | 211 | /* View Your Queue */ 212 | .game_bg.application .queue_overflow_ctn .btnv6_blue_hoverfade.right { 213 | display: none; 214 | } 215 | 216 | /* Queue */ 217 | .game_bg.application .queue_overflow_ctn .next_in_queue_area { 218 | order: 1; 219 | } 220 | 221 | .game_bg.application .queue_overflow_ctn .queue_controls_description, 222 | .game_bg.application .queue_overflow_ctn .queue_reason_description { 223 | display: none; 224 | } 225 | 226 | .game_bg.application .queue_overflow_ctn .btn_next_in_queue { 227 | width: unset; 228 | height: unset; 229 | margin: 0; 230 | background: unset; 231 | } 232 | 233 | .game_bg.application .queue_overflow_ctn .next_in_queue_content { 234 | padding: 0 12px; 235 | border-radius: 8px; 236 | background-color: rgb(var(--yellow), .4); 237 | } 238 | .game_bg.application .queue_overflow_ctn .next_in_queue_content:hover { 239 | background-color: rgb(var(--yellow), .6); 240 | } 241 | .game_bg.application .queue_overflow_ctn .next_in_queue_content span { 242 | display: flex; 243 | align-items: center; 244 | height: 32px; 245 | font-size: 0px; 246 | } 247 | .game_bg.application .queue_overflow_ctn .next_in_queue_content .queue_sub_text { 248 | display: none; 249 | } 250 | 251 | 252 | 253 | /* Clear *what ever* */ 254 | .queue_actions_ctn div[style*="clear"] { 255 | display: none; 256 | } 257 | 258 | 259 | 260 | /* 261 | & Game Media 262 | */ 263 | .game_bg.application .block.game_media_and_summary_ctn { 264 | position: relative; 265 | } 266 | 267 | .game_bg.application .game_background_glow { 268 | margin: 0; 269 | padding: 0; 270 | background: unset; 271 | } 272 | .game_bg.application .game_background_glow #game_highlights { 273 | display: flex; 274 | flex-direction: row-reverse; 275 | gap: 16px; 276 | background: unset; 277 | } 278 | 279 | div.leftcol:has(.highlight_ctn) { 280 | width: 100%; 281 | } 282 | 283 | #game_highlights .highlight_ctn { 284 | width: 100% !important; 285 | } 286 | .highlight_ctn .highlight_overflow { 287 | display: flex; 288 | margin: 0; 289 | padding: 12px; 290 | border-radius: 8px; 291 | background-color: rgb(var(--color-2)); 292 | } 293 | 294 | 295 | /* Clear *what ever* */ 296 | #game_highlights div[style*="clear"] { 297 | display: none; 298 | } 299 | 300 | 301 | 302 | /* 303 | ! Player Area 304 | */ 305 | #highlight_player_area { 306 | border-radius: 8px; 307 | } 308 | 309 | 310 | 311 | /* Title */ 312 | #highlight_player_area .html5_video_titlebar_ctn { 313 | margin: 6px; 314 | padding: 6px; 315 | border-radius: 8px; 316 | background-color: rgb(var(--color-3)); 317 | } 318 | 319 | 320 | 321 | /* Controls */ 322 | #highlight_player_area .html5_video_overlay { 323 | overflow: hidden; 324 | width: -webkit-fill-available; 325 | height: unset; 326 | margin: 6px; 327 | padding: 6px 6px 12px 6px; 328 | border-radius: 8px; 329 | background-color: rgb(var(--background), .9); 330 | } 331 | #highlight_player_area .html5_video_overlay[style="bottom: -35px;"] { 332 | bottom: -55px !important; 333 | } 334 | 335 | #highlight_player_area .html5_video_overlay .control_container { 336 | height: unset; 337 | margin: 0; 338 | background-color: unset; 339 | } 340 | 341 | 342 | /* Play/Pause button */ 343 | #highlight_player_area .html5_video_overlay .play_button { 344 | background-image: unset !important; 345 | } 346 | 347 | #highlight_player_area .html5_video_overlay .play_button::before { 348 | font-size: 18px; 349 | color: #8e8e8e; 350 | font-family: FluentSystemIcons-Filled !important; 351 | font-style: normal; 352 | font-weight: normal !important; 353 | font-variant: normal; 354 | text-transform: none; 355 | line-height: 1; 356 | -webkit-font-smoothing: antialiased; 357 | } 358 | #highlight_player_area .html5_video_overlay .play_button:hover::before { 359 | color: #fff; 360 | } 361 | 362 | #highlight_player_area .html5_video_overlay .play_button.pause::before { 363 | content: "\f5ac"; 364 | } 365 | 366 | #highlight_player_area .html5_video_overlay .play_button.play::before { 367 | content: "\f610"; 368 | } 369 | 370 | 371 | /* Progressbar */ 372 | #highlight_player_area .html5_video_overlay .progress_bar_wrapper { 373 | bottom: 0; 374 | top: unset; 375 | height: 4px; 376 | margin: 6px; 377 | background-color: unset; 378 | } 379 | 380 | #highlight_player_area .html5_video_overlay .progress_bar_container { 381 | top: unset; 382 | bottom: 0; 383 | left: 0; 384 | right: 0; 385 | height: 4px; 386 | border-radius: 8px; 387 | background-color: rgb(89, 89, 89, .5); 388 | } 389 | 390 | #highlight_player_area .html5_video_overlay .progress_bar_background { 391 | background-color: unset; 392 | } 393 | #highlight_player_area .html5_video_overlay .progress_bar { 394 | border-radius: 8px; 395 | background-color: rgb(var(--blue)); 396 | } 397 | 398 | 399 | 400 | 401 | /* Slider Buttons */ 402 | #game_highlights .slider_ctn { 403 | display: none; 404 | } 405 | 406 | 407 | 408 | /* 409 | & Game Purchase / Infos etc. 410 | */ 411 | 412 | 413 | 414 | 415 | /* 416 | & Sidebar 417 | */ 418 | 419 | /* 420 | ! Details 421 | */ 422 | .game_bg.application #game_highlights .rightcol { 423 | padding: 12px; 424 | border-radius: 8px; 425 | background-color: rgb(var(--color-2)); 426 | } 427 | 428 | 429 | /* Banner */ 430 | .game_bg.application #game_highlights .rightcol .game_header_image_ctn { 431 | margin-bottom: 6px; 432 | } 433 | .game_bg.application #game_highlights .rightcol .game_header_image_full { 434 | border-radius: 8px; 435 | } 436 | 437 | 438 | /* Description */ 439 | .game_bg.application #game_highlights .rightcol .game_description_snippet { 440 | padding: 0; 441 | line-height: unset; 442 | } 443 | 444 | /* Divider */ 445 | .game_bg.application #game_highlights .rightcol .glance_ctn_responsive_left::before { 446 | content: ""; 447 | display: block; 448 | width: 100%; 449 | height: 3px; 450 | margin: 12px 0; 451 | border-radius: 8px; 452 | background-color: rgb(var(--color-1)); 453 | } -------------------------------------------------------------------------------- /options/experimental/userpannel.css: -------------------------------------------------------------------------------- 1 | /* Loading Screen */ 2 | #loading-div { 3 | z-index: 9999; 4 | position: fixed; 5 | top: 0; 6 | left: 0; 7 | display: flex; 8 | flex-direction: column; 9 | justify-content: center; 10 | align-items: center; 11 | width: 100%; 12 | height: 100%; 13 | background-color: rgb(var(--background)); 14 | } 15 | 16 | .radial-loader { 17 | width: 54px; 18 | height: 54px; 19 | border: 8px solid rgba(var(--color-2)); 20 | border-top: 8px solid rgb(var(--accent-1)); 21 | border-radius: 50%; 22 | animation: spin .6s linear infinite; 23 | } 24 | 25 | .loading-text { 26 | opacity: .7; 27 | margin-top: 20px; 28 | font-size: 24px; 29 | font-weight: 600; 30 | color: #fff; 31 | } 32 | 33 | @keyframes spin { 34 | 0% { 35 | transform: rotate(0deg); 36 | } 37 | 100% { 38 | transform: rotate(360deg); 39 | } 40 | } 41 | 42 | 43 | 44 | /* 45 | ! Userpannel 46 | */ 47 | ._3cykd-VfN_xBxf3Qxriccm { 48 | flex-direction: column; 49 | gap: 6px; 50 | margin: 12px 0 0 !important; 51 | padding: 6px; 52 | border-radius: 8px; 53 | background-color: rgb(var(--color-2)); 54 | } 55 | ._3x1HklzyDs4TEjACrRO2tB:has(.yZ55NhARZGx1Awk2qs8pS) ._3cykd-VfN_xBxf3Qxriccm { 56 | margin: 6px 0 0; 57 | } 58 | 59 | /* Button order */ 60 | ._3cykd-VfN_xBxf3Qxriccm .userpannel-buttoncontainer { 61 | display: flex; 62 | gap: 6px; 63 | width: 100%; 64 | } 65 | 66 | /* User buttons */ 67 | ._3cykd-VfN_xBxf3Qxriccm ._2Lu3d-5qLmW4i19ysTt2jT:not(._3mGEzzp18imtSzGPkduedi) ._3yD46y5pd3zOGR7CzKs0mC { 68 | position: relative; 69 | gap: 0; 70 | max-height: unset; 71 | padding: 6px; 72 | font-size: 13px; 73 | font-weight: 500; 74 | border-radius: 8px !important; 75 | background-color: rgb(var(--color-3)) !important; 76 | transition: background-color 0.15s ease-in-out; 77 | } 78 | ._3cykd-VfN_xBxf3Qxriccm ._2Lu3d-5qLmW4i19ysTt2jT:not(._3mGEzzp18imtSzGPkduedi) ._3yD46y5pd3zOGR7CzKs0mC:hover { 79 | background-color: rgb(var(--color-1)) !important; 80 | } 81 | ._3cykd-VfN_xBxf3Qxriccm ._2Lu3d-5qLmW4i19ysTt2jT:not(._3mGEzzp18imtSzGPkduedi) ._3yD46y5pd3zOGR7CzKs0mC:has(._2jphjrSifC6orDT4g_7Wd) { 82 | align-items: flex-start; 83 | } 84 | 85 | /* Avatar */ 86 | ._3cykd-VfN_xBxf3Qxriccm .nibodjvvrm86uCfnnAn4g.avatarHolder { 87 | width: 32px; 88 | height: 32px; 89 | margin-right: 6px; 90 | transform: unset; 91 | } 92 | 93 | ._3yD46y5pd3zOGR7CzKs0mC ._3xUpb5DWXPFNcHHIcv-9pe.avatarStatus { 94 | display: none !important; 95 | } 96 | 97 | ._3yD46y5pd3zOGR7CzKs0mC ._3h-QRJGxnVOIExtHD1R0f2 { 98 | width: 100%; 99 | height: 100%; 100 | border: none; 101 | border-radius: 100%; 102 | box-shadow: none; 103 | } 104 | 105 | /* Wallet*/ 106 | ._3yD46y5pd3zOGR7CzKs0mC ._2jphjrSifC6orDT4g_7Wd { 107 | position: absolute; 108 | left: calc(6px + 32px + 6px); 109 | bottom: 6px; 110 | font-size: 11px; 111 | } 112 | 113 | 114 | ._3yD46y5pd3zOGR7CzKs0mC ._1p_QrI3ixF-RAwnxad9pEm { 115 | box-shadow: none; 116 | } 117 | 118 | 119 | ._3yD46y5pd3zOGR7CzKs0mC ._3x51wbt5DYyWC8JKwQ51ir { 120 | display: none; 121 | } 122 | 123 | /* Buttons */ 124 | ._3cykd-VfN_xBxf3Qxriccm>div, 125 | ._3cykd-VfN_xBxf3Qxriccm ._2Lu3d-5qLmW4i19ysTt2jT:not(._3mGEzzp18imtSzGPkduedi) { 126 | width: 100%; 127 | } 128 | 129 | 130 | ._3cykd-VfN_xBxf3Qxriccm .userpannel-buttoncontainer>div, 131 | ._3cykd-VfN_xBxf3Qxriccm .userpannel-buttoncontainer ._2Szzh5sKyGgnLUR870zbDE, 132 | ._3cykd-VfN_xBxf3Qxriccm .userpannel-buttoncontainer ._2Lu3d-5qLmW4i19ysTt2jT>div { 133 | width: 100%; 134 | height: 28px; 135 | } 136 | 137 | ._3cykd-VfN_xBxf3Qxriccm ._1TdaAqMFadi0UTqilrkelR { 138 | flex-shrink: unset; 139 | align-items: center; 140 | justify-content: center; 141 | padding: 0; 142 | } 143 | 144 | ._2Szzh5sKyGgnLUR870zbDE, 145 | ._1TdaAqMFadi0UTqilrkelR { 146 | border-radius: 8px !important; 147 | background-color: rgb(var(--color-3)) !important; 148 | transition: background-color 0.15s ease-in-out; 149 | } 150 | ._2Szzh5sKyGgnLUR870zbDE:hover, 151 | ._1TdaAqMFadi0UTqilrkelR:hover { 152 | background-color: rgb(var(--color-1)) !important; 153 | } 154 | 155 | ._3cykd-VfN_xBxf3Qxriccm ._1n8t0vHFud57AoJ_IDgA9C, 156 | ._3cykd-VfN_xBxf3Qxriccm ._32TmRVFkc8HMIUZ-KnnKby, 157 | ._3cykd-VfN_xBxf3Qxriccm ._1AcQ7PwcnBGsbAmuKOZHvd, 158 | ._3cykd-VfN_xBxf3Qxriccm ._13vrqU6oOqmmxrsZSW5O39, 159 | ._3cykd-VfN_xBxf3Qxriccm ._3arz-hc3FJ0QKXLPRUSaah, 160 | ._3cykd-VfN_xBxf3Qxriccm ._5wILZhsLODVwGfcJ0hKmJ, 161 | ._3cykd-VfN_xBxf3Qxriccm .EdtW0igyTLSSiXq1Mcc8F, 162 | ._3cykd-VfN_xBxf3Qxriccm ._3mGEzzp18imtSzGPkduedi, 163 | ._3cykd-VfN_xBxf3Qxriccm ._3yD46y5pd3zOGR7CzKs0mC, 164 | ._3cykd-VfN_xBxf3Qxriccm .Utdt7JrpIm5JlpQmqyj1v { 165 | margin: 0; 166 | } 167 | 168 | ._3cykd-VfN_xBxf3Qxriccm ._3OhUxFVlQYr9W5ThxstR8k { 169 | display: none; 170 | } 171 | 172 | ._2Szzh5sKyGgnLUR870zbDE svg, 173 | ._1TdaAqMFadi0UTqilrkelR ._1KrJ3sFAqPBN9mfpaNTU5F { 174 | width: 16px !important; 175 | height: 16px !important; 176 | } 177 | 178 | 179 | 180 | /* 181 | ! Downloadbar 182 | */ 183 | ._1_yS5UP7el0aN4vntx3dx { 184 | visibility: hidden; 185 | height: 0; 186 | margin: 0 !important; 187 | } 188 | ._1_yS5UP7el0aN4vntx3dx:has(.wi0pDywRgOCxhG7OqQNaA) { 189 | visibility: visible; 190 | height: unset; 191 | } 192 | 193 | ._1_yS5UP7el0aN4vntx3dx>div:has(._2iJsgdTIX9Tj23rWnB7Q-c) { 194 | display: none; 195 | } 196 | 197 | ._3vCzSrrXZzZjVJFZNg9SGu { 198 | flex: unset; 199 | margin-top: 12px; 200 | padding: 12px; 201 | border-radius: 8px; 202 | background-color: rgb(var(--color-2)); 203 | box-shadow: none !important; 204 | } 205 | 206 | /* Hide Add Game */ 207 | ._2foCkpRXhqq0UGVE50BWqj { 208 | display: none; 209 | } 210 | 211 | /* Progress */ 212 | .ip-YZhijAMZcuRoXBGiye { 213 | width: 100%; 214 | padding: 0; 215 | } 216 | 217 | ._2VtAqT03BpBsVdmxwptn9D { 218 | flex-direction: column; 219 | align-items: unset; 220 | gap: 0px; 221 | width: 100%; 222 | } 223 | 224 | /* Icon */ 225 | ._2VtAqT03BpBsVdmxwptn9D ._1KrJ3sFAqPBN9mfpaNTU5F { 226 | display: none; 227 | } 228 | 229 | ._2VtAqT03BpBsVdmxwptn9D ._21vPQjHoo0uwud5lfCD_x- { 230 | display: none; 231 | } 232 | 233 | /* Progressbar */ 234 | ._2_FomluqqgQ2Hx8ON3AVep ._1xCcFYWIrJ7W8WRDmGvR3y { 235 | justify-content: flex-end; 236 | } 237 | 238 | ._2_FomluqqgQ2Hx8ON3AVep .wi0pDywRgOCxhG7OqQNaA { 239 | height: 4px; 240 | margin-top: 4px; 241 | --color-progress-bar-foreground: rgb(var(--accent-1)); 242 | --color-progress-bar-background: rgb(var(--background)); 243 | } 244 | ._2_FomluqqgQ2Hx8ON3AVep .wi0pDywRgOCxhG7OqQNaA::after { 245 | border-radius: 8px; 246 | } 247 | 248 | 249 | 250 | /* 251 | ! Notice 252 | */ 253 | ._3GaHEQJW9B1Rlt0Ddz3E8D { 254 | display: block; 255 | margin-top: 12px; 256 | padding: 6px; 257 | border-radius: 8px; 258 | } -------------------------------------------------------------------------------- /options/experimental/userpannel.js: -------------------------------------------------------------------------------- 1 | const waitForElement = (selector, parent = document) => new Promise((resolve) => { 2 | const el = parent.querySelector(selector); 3 | if (el) { 4 | resolve(el); 5 | } 6 | 7 | const observer = new MutationObserver(() => { 8 | const el = parent.querySelector(selector); 9 | if (!el) { 10 | return; 11 | } 12 | 13 | resolve(el); 14 | observer.disconnect(); 15 | }); 16 | 17 | observer.observe(document.body, { 18 | subtree: true, 19 | childList: true, 20 | }); 21 | }); 22 | 23 | 24 | 25 | // Create Loading Screen 26 | const createLoadingDiv = () => { 27 | const loadingDiv = document.createElement('div'); 28 | loadingDiv.id = 'loading-div'; 29 | 30 | // Text 31 | const textDiv = document.createElement('div'); 32 | textDiv.className = 'loading-text'; 33 | textDiv.innerText = 'Loading Steam interface'; 34 | 35 | // Radial Loader 36 | const loadingIndicator = document.createElement('div'); 37 | loadingIndicator.className = 'radial-loader'; 38 | 39 | loadingDiv.appendChild(loadingIndicator); 40 | loadingDiv.appendChild(textDiv); 41 | 42 | // Apply to body 43 | document.body.appendChild(loadingDiv); 44 | 45 | // Timer 46 | setTimeout(() => { 47 | document.body.removeChild(loadingDiv); 48 | }, 3000); 49 | }; 50 | 51 | // Patch to body 52 | waitForElement('.Rp8QOGJ2DypeDniMnRBhr').then(() => { 53 | if (!document.getElementById('loading-div')) { 54 | createLoadingDiv(); 55 | } 56 | }); 57 | 58 | 59 | 60 | // Move Elements 61 | (async () => { 62 | var gameListSidebar = await waitForElement('._3x1HklzyDs4TEjACrRO2tB'); 63 | 64 | 65 | // Userpannel 66 | var userPannel = await waitForElement('._3cykd-VfN_xBxf3Qxriccm._1-9sir4j_KQiMqdkZjQN0u'); 67 | var downloadBar = await waitForElement('._1_yS5UP7el0aN4vntx3dx'); 68 | var friendButton = await waitForElement('._1TdaAqMFadi0UTqilrkelR') 69 | var parent = await waitForElement('._3cykd-VfN_xBxf3Qxriccm'); 70 | 71 | const buttonContainer = document.createElement('div'); 72 | buttonContainer.className = 'userpannel-buttoncontainer'; 73 | 74 | const buttons = parent.querySelectorAll('div._3cykd-VfN_xBxf3Qxriccm > div'); 75 | const buttonsToMove = Array.from(buttons).filter((button) => { 76 | return button.querySelector('._2Szzh5sKyGgnLUR870zbDE'); 77 | }); 78 | 79 | buttonsToMove.forEach((button) => { 80 | buttonContainer.appendChild(button); 81 | }); 82 | 83 | gameListSidebar.appendChild(downloadBar); 84 | gameListSidebar.appendChild(userPannel); 85 | buttonContainer.appendChild(friendButton); 86 | parent.appendChild(buttonContainer); 87 | 88 | 89 | // Download bar 90 | //var downloadingText = await waitForElement('._1sCy-pm412Smb0wJx0W-4'); 91 | //var downloadingIconDiv = await waitForElement('._2VtAqT03BpBsVdmxwptn9D ._1KrJ3sFAqPBN9mfpaNTU5F'); 92 | 93 | //downloadingIconDiv.appendChild(downloadingText); 94 | })(); -------------------------------------------------------------------------------- /options/experimental/wishlistGrid.css: -------------------------------------------------------------------------------- 1 | /* Grid */ 2 | #wishlist_ctn { 3 | display: grid; 4 | grid-template-columns: repeat(3, 1fr); 5 | gap: 12px; 6 | height: -webkit-fill-available !important; 7 | } 8 | 9 | 10 | /* Cards */ 11 | .wishlist_row { 12 | position: unset; 13 | display: block; 14 | width: auto; 15 | height: auto; 16 | margin: 0; 17 | padding: 12px; 18 | border-radius: 8px; 19 | background-color: rgb(var(--color-2)); 20 | box-shadow: none; 21 | } 22 | 23 | 24 | /* Image */ 25 | .wishlist_row .capsule { 26 | display: block; 27 | width: auto; 28 | height: auto; 29 | margin: 0; 30 | } 31 | 32 | .wishlist_row .capsule img { 33 | display: block; 34 | width: -webkit-fill-available; 35 | border-radius: 8px; 36 | } 37 | 38 | .wishlist_row .capsule .screenshots, 39 | .wishlist_row .capsule .screenshots > div { 40 | width: -webkit-fill-available; 41 | height: -webkit-fill-available; 42 | border-radius: 8px; 43 | } -------------------------------------------------------------------------------- /options/experimental/wishlistGrid.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/options/experimental/wishlistGrid.js -------------------------------------------------------------------------------- /options/general/fonts/arial.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: Arial, sans-serif !important; 3 | } -------------------------------------------------------------------------------- /options/general/fonts/beVietnamPro.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 2 | * { 3 | font-family: 'Be Vietnam Pro', sans-serif !important; 4 | } -------------------------------------------------------------------------------- /options/general/fonts/gluten.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Gluten:wght@100..900&display=swap'); 2 | * { 3 | font-family: 'Gluten', sans-serif !important; 4 | } -------------------------------------------------------------------------------- /options/general/fonts/quicksand.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap'); 2 | * { 3 | font-family: 'Quicksand', sans-serif !important; 4 | } -------------------------------------------------------------------------------- /options/general/fonts/roboto.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); 2 | * { 3 | font-family: 'Roboto', sans-serif !important; 4 | } -------------------------------------------------------------------------------- /options/general/fonts/sourceCodePro.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap'); 2 | * { 3 | font-family: 'Source Code Pro', monospace !important; 4 | } -------------------------------------------------------------------------------- /options/general/fonts/ubuntu.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); 2 | * { 3 | font-family: 'Ubuntu', sans-serif !important; 4 | } -------------------------------------------------------------------------------- /options/general/gamepageAlwaysShowGameInfo.css: -------------------------------------------------------------------------------- 1 | ._25oBZpa3dUcMw8QAsa2u67._3yfoeR7q8sXXS2UyFcIK1K { 2 | height: unset !important; 3 | margin: 6px 0 0; 4 | } 5 | 6 | 7 | ._3qDWQGB0rtwM3qpXTb11Q-:has(.SVGIcon_Information) { 8 | display: none; 9 | } 10 | 11 | 12 | /* HLTB fix */ 13 | ._3qDWQGB0rtwM3qpXTb11Q-[hltb-click-listener="true"] { 14 | display: flex; 15 | } 16 | ._3qDWQGB0rtwM3qpXTb11Q-[hltb-click-listener="true"] svg { 17 | display: none; 18 | } 19 | ._3qDWQGB0rtwM3qpXTb11Q-[hltb-click-listener="true"] .zvLq1GUCH3yLuqv_TXBJ1::before { 20 | display: flex; 21 | width: 18px; 22 | height: 18px; 23 | background-image: url("../../src/icons/hltb.svg"); 24 | background-size: contain; 25 | background-repeat: no-repeat; 26 | background-position: center; 27 | } 28 | 29 | ._3qDWQGB0rtwM3qpXTb11Q-[hltb-click-listener="true"][hltb-injected="true"] { 30 | display: none; 31 | } -------------------------------------------------------------------------------- /options/general/gamepageBiggerBanner.css: -------------------------------------------------------------------------------- 1 | body .NZMJ6g2iVnFsOOp-lDmIP { 2 | --header-height: calc(100vh - 46px - 16px - 12px - 70px - 6px - 40px - 16px - 16px - 50px - 16px) !important; 3 | max-height: unset !important; 4 | } 5 | body ._1SvpjsckP9cPRxO6gCBHrw:has(._1_cYNJSvS6IXs9vLTEYjy5 .z8GYwNt_nbBZrf7OVjs-s) .NZMJ6g2iVnFsOOp-lDmIP { 6 | --header-height: calc(100vh - 46px - 16px - 12px - 70px - 6px - 40px - 16px - 16px - 46px) !important; 7 | } 8 | body .NarrowWindow .NZMJ6g2iVnFsOOp-lDmIP { 9 | --header-height: calc(100vh - 46px - 16px - 12px - 56px - 6px - 40px - 16px - 16px - 50px - 16px) !important; 10 | } 11 | body .NarrowWindow ._1SvpjsckP9cPRxO6gCBHrw:has(._1_cYNJSvS6IXs9vLTEYjy5 .z8GYwNt_nbBZrf7OVjs-s) .NZMJ6g2iVnFsOOp-lDmIP { 12 | --header-height: calc(100vh - 46px - 16px - 12px - 56px - 6px - 40px - 16px - 16px - 50px - 16px - 46px) !important; 13 | } 14 | 15 | 16 | body :has(.userpannel-buttoncontainer) .NZMJ6g2iVnFsOOp-lDmIP { 17 | --header-height: calc(100vh - 46px - 16px - 12px - 70px - 6px - 40px - 16px - 16px) !important; 18 | max-height: unset !important; 19 | } 20 | body :has(.userpannel-buttoncontainer) ._1SvpjsckP9cPRxO6gCBHrw:has(._1_cYNJSvS6IXs9vLTEYjy5 .z8GYwNt_nbBZrf7OVjs-s) .NZMJ6g2iVnFsOOp-lDmIP { 21 | --header-height: calc(100vh - 46px - 16px - 12px - 70px - 6px - 40px - 16px - 16px - 46px) !important; 22 | } 23 | body :has(.userpannel-buttoncontainer) .NarrowWindow .NZMJ6g2iVnFsOOp-lDmIP { 24 | --header-height: calc(100vh - 46px - 16px - 12px - 56px - 6px - 40px - 16px - 16px) !important; 25 | } 26 | body :has(.userpannel-buttoncontainer) .NarrowWindow ._1SvpjsckP9cPRxO6gCBHrw:has(._1_cYNJSvS6IXs9vLTEYjy5 .z8GYwNt_nbBZrf7OVjs-s) .NZMJ6g2iVnFsOOp-lDmIP { 27 | --header-height: calc(100vh - 46px - 16px - 12px - 56px - 6px - 40px - 16px - 16px - 46px) !important; 28 | } 29 | 30 | 31 | body .NZMJ6g2iVnFsOOp-lDmIP.NZMJ6g2iVnFsOOp-lDmIP ._1IX7FPSY9Jb82KhBVBSkZa { 32 | max-height: unset !important; 33 | } -------------------------------------------------------------------------------- /options/general/gamepageCustomArtwork.css: -------------------------------------------------------------------------------- 1 | /* Logo */ 2 | .NZMJ6g2iVnFsOOp-lDmIP:has(img.HNbe3eZf6H7dtJ042x1vM[src*="/customimages/"]) ._3NBxSLAZLbbbnul8KfDFjw._2dzwXkCVAuZGFC-qKgo8XB, 3 | ._3mZ2rKd2RECK4q4ufmsDYX:has(img._24_AuLm54JVe1Zc0AApCDR[src*="/customimages/"]) ._1R9r2OBCxAmtuUVrgBEUBw:has(img[src*="/assets/"]) { 4 | display: none; 5 | } 6 | 7 | 8 | /* Background */ 9 | .QlR9EFwTdUNm_J5vx54_Z:has(img.HNbe3eZf6H7dtJ042x1vM[src*="/customimages/"]), 10 | ._3KDkLoCR8OM8xfdQysKn9t._1ashwbbBZrppDqaals3644:has(img._24_AuLm54JVe1Zc0AApCDR[src*="/customimages/"]) { 11 | background-color: #ccc1a1; 12 | } 13 | 14 | 15 | /* Artwork */ 16 | .NZMJ6g2iVnFsOOp-lDmIP img.HNbe3eZf6H7dtJ042x1vM[src*="/customimages/"] { 17 | width: auto !important; 18 | height: auto !important; 19 | max-width: 100% !important; 20 | max-height: 100% !important; 21 | margin: auto; 22 | } 23 | 24 | /* Download page Artwork */ 25 | ._3mZ2rKd2RECK4q4ufmsDYX ._3WauYi7bNDSGIogMLPVYES:has(img._24_AuLm54JVe1Zc0AApCDR[src*="/customimages/"]) { 26 | -webkit-mask-image: none !important; 27 | } 28 | 29 | ._3mZ2rKd2RECK4q4ufmsDYX ._2NqL3nV35eJFAu56_Yu-WM:has(img._24_AuLm54JVe1Zc0AApCDR[src*="/customimages/"]) { 30 | height: -webkit-fill-available !important; 31 | } 32 | 33 | ._3mZ2rKd2RECK4q4ufmsDYX img._24_AuLm54JVe1Zc0AApCDR[src*="/customimages/"] { 34 | width: auto !important; 35 | height: auto !important; 36 | max-width: unset !important; 37 | max-height: 100% !important; 38 | margin: auto; 39 | } 40 | 41 | ._3mZ2rKd2RECK4q4ufmsDYX ._3WauYi7bNDSGIogMLPVYES:has(img._24_AuLm54JVe1Zc0AApCDR[src*="/customimages/"]) .edQzwM57P-T5K3eDGkyvZ { 42 | top: unset; 43 | bottom: 0; 44 | left: unset; 45 | right: 0; 46 | height: 46px; 47 | width: 110px; 48 | background: none; 49 | background-color: #ccc1a1; 50 | mix-blend-mode: unset; 51 | } -------------------------------------------------------------------------------- /options/general/gamepageGameInfoArtwork.css: -------------------------------------------------------------------------------- 1 | ._2jPMy2QZr8bWi6yrk5ZzHA ._37mmOlZM_8n5yJAG5CHiW7 { 2 | grid-template-areas: "desc desc stats features"; 3 | } 4 | 5 | ._1Id6ZFEUVa5PKEMIvSg4nE { 6 | display: none; 7 | } -------------------------------------------------------------------------------- /options/general/gamepageSidebarLeft.css: -------------------------------------------------------------------------------- 1 | /* Sidebar */ 2 | ._27RcNu8aXKBpYkHcNNrt-X ._2aor4XVOYzN1PBSREk0UbO { 3 | float: left; 4 | margin-right: 16px; 5 | margin-left: 0 !important; 6 | } 7 | 8 | /* Main */ 9 | ._3yTl3RiWfo-Itg-xp967wP { 10 | max-width: unset !important; 11 | } -------------------------------------------------------------------------------- /options/general/showSidebarInStoreOnHover.css: -------------------------------------------------------------------------------- 1 | ._1rDh5rXSFZJOqCa4UpnI4z { 2 | overflow: unset; 3 | } 4 | 5 | 6 | 7 | .RGNMWtyj73_-WdhflrmuY[style*="display: none;"] { 8 | overflow: hidden; 9 | max-width: 0 !important; 10 | min-width: 0 !important; 11 | height: 100%; 12 | margin-left: -16px; 13 | padding-left: 16px; 14 | transition: all .2s linear; 15 | } 16 | 17 | .RGNMWtyj73_-WdhflrmuY[style*="display: none;"]:hover { 18 | padding-left: 16px; 19 | min-width: 272px !important; 20 | } 21 | 22 | 23 | 24 | .RGNMWtyj73_-WdhflrmuY[style*="display: none;"]::after { 25 | content: "\e74a"; 26 | opacity: 1; 27 | position: absolute; 28 | display: flex; 29 | align-items: center; 30 | height: 100%; 31 | margin-left: -20px; 32 | font-size: 20px; 33 | font-family: FluentSystemIcons-Filled !important; 34 | font-style: normal; 35 | font-weight: normal !important; 36 | font-variant: normal; 37 | text-transform: none; 38 | line-height: 1; 39 | -webkit-font-smoothing: antialiased; 40 | } 41 | 42 | .RGNMWtyj73_-WdhflrmuY[style*="display: none;"]:hover::after { 43 | opacity: 0; 44 | } -------------------------------------------------------------------------------- /options/general/systemAccent.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --accent-1: var(--SystemAccentColorLight1-RGB) !important; 3 | --accent-2: var(--SystemAccentColorDark1-RGB) !important; 4 | } -------------------------------------------------------------------------------- /options/steamBloat/addShelf.css: -------------------------------------------------------------------------------- 1 | ._3SkuN_ykQuWGF94fclHdhJ { 2 | display: none; 3 | } -------------------------------------------------------------------------------- /options/steamBloat/navigationButtons.css: -------------------------------------------------------------------------------- 1 | ._3Z3ohQ8-1NKnCZkbS6fvy ._2D64jIEK7wpUR_NlObDW76 svg { 2 | display: none; 3 | } -------------------------------------------------------------------------------- /options/steamBloat/shinyEffect.css: -------------------------------------------------------------------------------- 1 | .MyNb5dG3FsBnKdp8j_ntk { 2 | display: none; 3 | } -------------------------------------------------------------------------------- /options/steamBloat/shopCartRecommendations.css: -------------------------------------------------------------------------------- 1 | .ShoppingCart ._2rkDlHZ2yi-tFtDk4-CC4U { 2 | display: none; 3 | } -------------------------------------------------------------------------------- /options/steamBloat/urlBar.css: -------------------------------------------------------------------------------- 1 | ._1bGewp3tfzqAF6fVTFFUOz .UkR3sY319PuaUNuUWks2K { 2 | display: none; 3 | } -------------------------------------------------------------------------------- /options/steamBloat/userpannelButtons/bpm.css: -------------------------------------------------------------------------------- 1 | ._3cykd-VfN_xBxf3Qxriccm ._3LKQ3S_yqrebeNLF6aeiog { 2 | display: none; 3 | } -------------------------------------------------------------------------------- /options/steamBloat/userpannelButtons/friendList.css: -------------------------------------------------------------------------------- 1 | .userpannel-buttoncontainer ._1TdaAqMFadi0UTqilrkelR { 2 | display: none; 3 | } -------------------------------------------------------------------------------- /options/steamBloat/userpannelButtons/news.css: -------------------------------------------------------------------------------- 1 | ._3cykd-VfN_xBxf3Qxriccm ._5wILZhsLODVwGfcJ0hKmJ { 2 | display: none; 3 | } -------------------------------------------------------------------------------- /options/steamBloat/userpannelButtons/notification.css: -------------------------------------------------------------------------------- 1 | ._3cykd-VfN_xBxf3Qxriccm ._3mGEzzp18imtSzGPkduedi { 2 | display: none; 3 | } -------------------------------------------------------------------------------- /options/steamBloat/userpannelButtons/steamVr.css: -------------------------------------------------------------------------------- 1 | ._3cykd-VfN_xBxf3Qxriccm ._3lRfTo8Wo3phXfE1DvK6QW { 2 | display: none; 3 | } -------------------------------------------------------------------------------- /options/steamBloat/vacBan/all.css: -------------------------------------------------------------------------------- 1 | .profile_ban_status { 2 | display: none; 3 | } -------------------------------------------------------------------------------- /options/steamBloat/vacBan/me.css: -------------------------------------------------------------------------------- 1 | :has(.profile_header_badgeinfo .btn_profile_action[href*="edit/info"]) .profile_ban_status { 2 | display: none; 3 | } -------------------------------------------------------------------------------- /options/steamBloat/walletBalance.css: -------------------------------------------------------------------------------- 1 | ._2jphjrSifC6orDT4g_7Wd { 2 | display: none; 3 | } -------------------------------------------------------------------------------- /options/steamBloat/whatsNew/compact.css: -------------------------------------------------------------------------------- 1 | ._11cYvnWDwOeGdlUpfGNlYt ._3CJctA7pLVdwHzNF5JmORE._1urF0O1V4DZOkjI28mDvRK { 2 | padding: 16px 0 16px 24px; 3 | } 4 | 5 | 6 | ._3YO5BpDmZERh_G8kaWbaSJ.Panel { 7 | display: flex; 8 | flex-direction: column; 9 | margin: 0 !important; 10 | } 11 | 12 | .B-vCdL38RiJlhfSRgZv78 { 13 | display: none; 14 | } 15 | 16 | .aqYQCF7Ny9x3EKcjCOTRY { 17 | order: 2; 18 | margin-bottom: 0 !important; 19 | } 20 | 21 | ._3_xMyCJAh_Dv99KgZ54P3j { 22 | position: unset !important; 23 | margin: 0 0 6px !important; 24 | padding: 0 !important; 25 | background-color: transparent !important; 26 | } -------------------------------------------------------------------------------- /options/steamBloat/whatsNew/hide.css: -------------------------------------------------------------------------------- 1 | ._17uEBe5Ri8TMsnfELvs8-N { 2 | display: none; 3 | } -------------------------------------------------------------------------------- /options/whatsNew/compact.css: -------------------------------------------------------------------------------- 1 | ._11cYvnWDwOeGdlUpfGNlYt ._3CJctA7pLVdwHzNF5JmORE._1urF0O1V4DZOkjI28mDvRK { 2 | padding: 16px 0 16px 24px; 3 | } 4 | 5 | 6 | ._3YO5BpDmZERh_G8kaWbaSJ.Panel { 7 | display: flex; 8 | flex-direction: column; 9 | margin: 0 !important; 10 | } 11 | 12 | .B-vCdL38RiJlhfSRgZv78 { 13 | display: none; 14 | } 15 | 16 | .aqYQCF7Ny9x3EKcjCOTRY { 17 | order: 2; 18 | margin-bottom: 0 !important; 19 | } 20 | 21 | ._3_xMyCJAh_Dv99KgZ54P3j { 22 | position: unset !important; 23 | margin: 0 0 6px !important; 24 | padding: 0 !important; 25 | background-color: transparent !important; 26 | } -------------------------------------------------------------------------------- /options/whatsNew/hide.css: -------------------------------------------------------------------------------- 1 | ._17uEBe5Ri8TMsnfELvs8-N { 2 | display: none; 3 | } -------------------------------------------------------------------------------- /skin.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "20250604", 3 | "name": "SpaceTheme for Steam", 4 | "description": "A modular design with dark colors intended to enhance navigability and improve user experience.", 5 | "author": "SpaceEnergy", 6 | "github": { 7 | "owner": "SpaceTheme", 8 | "repo_name": "Steam" 9 | }, 10 | "funding": { "kofi": "spacetheme" }, 11 | "discord_support": { "inviteCodeExcludingLink": "7Zv8Xz3Vzn" }, 12 | "tags": [ "WIP", "Modular", "Dark", "Customizable"], 13 | "header_image": "https://raw.githubusercontent.com/SpaceTheme/Steam/main/_assets/img/banner.png", 14 | "splash_image": "https://raw.githubusercontent.com/SpaceTheme/Steam/main/_assets/img/preview.png", 15 | "RootColors": "./src/css/root.css", 16 | "Steam-WebKit": "webkit.css", 17 | "UseDefaultPatches": true, 18 | "Conditions": { 19 | "Custom font": { 20 | "description": "Use a different font for the SteamUI", 21 | "default": "Be Vietnam Pro (default)", 22 | "tab": "General", 23 | "values": { 24 | "Be Vietnam Pro (default)": { 25 | "TargetCss": { "affects": [".*"], "src": "options/general/fonts/beVietnamPro.css" } 26 | }, 27 | "Arial": { 28 | "TargetCss": { "affects": [".*"], "src": "options/general/fonts/arial.css" } 29 | }, 30 | "Gluten": { 31 | "TargetCss": { "affects": [".*"], "src": "options/general/fonts/gluten.css" } 32 | } 33 | , 34 | "Quicksand": { 35 | "TargetCss": { "affects": [".*"], "src": "options/general/fonts/quicksand.css" } 36 | } 37 | , 38 | "Roboto": { 39 | "TargetCss": { "affects": [".*"], "src": "options/general/fonts/roboto.css" } 40 | } 41 | , 42 | "Source Code Pro": { 43 | "TargetCss": { "affects": [".*"], "src": "options/general/fonts/sourceCodePro.css" } 44 | } 45 | , 46 | "Ubuntu": { 47 | "TargetCss": { "affects": [".*"], "src": "options/general/fonts/ubuntu.css" } 48 | } 49 | } 50 | }, 51 | "Store sidebar only on hover": { 52 | "description": "Store sidebar only on hover", 53 | "default": "no", 54 | "tab": "General", 55 | "values": { 56 | "no": {}, 57 | "yes": { 58 | "TargetCss": { "affects": ["^Steam$"], "src": "options/general/showSidebarInStoreOnHover.css" } 59 | } 60 | } 61 | }, 62 | "Gamepage bigger banner": { 63 | "description": "Bigger banner on the game page", 64 | "default": "no", 65 | "tab": "General", 66 | "values": { 67 | "no": {}, 68 | "yes": { 69 | "TargetCss": { "affects": ["^Steam$"], "src": "options/general/gamepageBiggerBanner.css" } 70 | } 71 | } 72 | }, 73 | "Gamepage Steam-Custom-Artowrks Support": { 74 | "description": "For the best support for https://github.com/SpaceTheme/Steam-Custom-Artworks ", 75 | "default": "no", 76 | "tab": "General", 77 | "values": { 78 | "no": {}, 79 | "yes": { 80 | "TargetCss": { "affects": ["^Steam$"], "src": "options/general/gamepageCustomArtwork.css" } 81 | } 82 | } 83 | }, 84 | "Gamepage sidebar on left": { 85 | "description": "Changes the sidebar on the game page from right to left", 86 | "default": "no", 87 | "tab": "General", 88 | "values": { 89 | "no": {}, 90 | "yes": { 91 | "TargetCss": { "affects": ["^Steam$"], "src": "options/general/gamepageSidebarLeft.css" } 92 | } 93 | } 94 | }, 95 | "Gamepage always show game infos": { 96 | "description": "Always show game infos on the game page", 97 | "default": "no", 98 | "tab": "General", 99 | "values": { 100 | "no": {}, 101 | "yes": { 102 | "TargetCss": { "affects": ["^Steam$"], "src": "options/general/gamepageAlwaysShowGameInfo.css"} 103 | } 104 | } 105 | }, 106 | "Gamepage game info box artwork": { 107 | "description": "Hide Artwork in game info box", 108 | "default": "no", 109 | "tab": "General", 110 | "values": { 111 | "no": {}, 112 | "yes": { 113 | "TargetCss": { "affects": ["^Steam$"], "src": "options/general/gamepageGameInfoArtwork.css"} 114 | } 115 | } 116 | }, 117 | "System accent colors": { 118 | "description": "Replaces the SpaceTheme accent colors with your system accent colors", 119 | "default": "no", 120 | "tab": "General", 121 | "values": { 122 | "no": {}, 123 | "yes": { 124 | "TargetCss": { "affects": [".*"], "src": "options/general/systemAccent.css" } 125 | } 126 | } 127 | }, 128 | "Navigation buttons": { 129 | "description": "Hide Navigation buttons", 130 | "default": "no", 131 | "tab": "Steam bloat", 132 | "values": { 133 | "no": {}, 134 | "yes": { 135 | "TargetCss": { "affects": ["^Steam$"], "src": "options/steamBloat/navigationButtons.css" } 136 | } 137 | } 138 | }, 139 | "Wallet balance": { 140 | "description": "Hide wallet balance", 141 | "default": "no", 142 | "tab": "Steam bloat", 143 | "values": { 144 | "no": {}, 145 | "yes": { 146 | "TargetCss": { "affects": ["^Steam$"], "src": "options/steamBloat/walletBalance.css" } 147 | } 148 | } 149 | }, 150 | "Steam VR button": { 151 | "description": "Hide Steam VR button from userpannel", 152 | "default": "no", 153 | "tab": "Steam bloat", 154 | "values": { 155 | "no": {}, 156 | "yes": { 157 | "TargetCss": { "affects": ["^Steam$"], "src": "options/steamBloat/userpannelButtons/steamVr.css" } 158 | } 159 | } 160 | }, 161 | "Big Picture Mode button": { 162 | "description": "Hide Big Picture Mode button from userpannel", 163 | "default": "no", 164 | "tab": "Steam bloat", 165 | "values": { 166 | "no": {}, 167 | "yes": { 168 | "TargetCss": { "affects": ["^Steam$"], "src": "options/steamBloat/userpannelButtons/bpm.css" } 169 | } 170 | } 171 | }, 172 | "News button": { 173 | "description": "Hide News button from userpannel", 174 | "default": "no", 175 | "tab": "Steam bloat", 176 | "values": { 177 | "no": {}, 178 | "yes": { 179 | "TargetCss": { "affects": ["^Steam$"], "src": "options/steamBloat/userpannelButtons/news.css" } 180 | } 181 | } 182 | }, 183 | "Notification button": { 184 | "description": "Hide Notification button from userpannel", 185 | "default": "no", 186 | "tab": "Steam bloat", 187 | "values": { 188 | "no": {}, 189 | "yes": { 190 | "TargetCss": { "affects": ["^Steam$"], "src": "options/steamBloat/userpannelButtons/notification.css" } 191 | } 192 | } 193 | }, 194 | "Friend list button": { 195 | "description": "Hide Friend list button from userpannel (only with Userpannel experimental)", 196 | "default": "no", 197 | "tab": "Steam bloat", 198 | "values": { 199 | "no": {}, 200 | "yes": { 201 | "TargetCss": { "affects": ["^Steam$"], "src": "options/steamBloat/userpannelButtons/friendList.css" } 202 | } 203 | } 204 | }, 205 | "What's New": { 206 | "description": "Customize the What's New section", 207 | "default": "Compact", 208 | "tab": "Steam bloat", 209 | "values": { 210 | "Show": {}, 211 | "Compact": { 212 | "TargetCss": { "affects": ["^Steam$"], "src": "options/steamBloat/whatsNew/compact.css" } 213 | }, 214 | "Hide": { 215 | "TargetCss": { "affects": ["^Steam$"], "src": "options/steamBloat/whatsNew/hide.css" } 216 | } 217 | } 218 | }, 219 | "Add shelf button": { 220 | "description": "Hide Add shelf button in Library", 221 | "default": "no", 222 | "tab": "Steam bloat", 223 | "values": { 224 | "no": {}, 225 | "yes": { 226 | "TargetCss": { "affects": ["^Steam$"], "src": "options/steamBloat/addShelf.css" } 227 | } 228 | } 229 | }, 230 | "Game cover shiny effect": { 231 | "description": "Hide shiny effect on game covers", 232 | "default": "no", 233 | "tab": "Steam bloat", 234 | "values": { 235 | "no": {}, 236 | "yes": { 237 | "TargetCss": { "affects": ["^Steam$"], "src": "options/steamBloat/shinyEffect.css" } 238 | } 239 | } 240 | }, 241 | "VAC-Ban visibility": { 242 | "description": "Hide the VAC ban from your profile or on all profiles", 243 | "default": "Show", 244 | "tab": "Steam bloat", 245 | "values": { 246 | "Show": {}, 247 | "For me": { 248 | "TargetCss": { "affects": ["https://steamcommunity.com"], "src": "options/steamBloat/vacBan/me.css" } 249 | }, 250 | "For all": { 251 | "TargetCss": { "affects": ["https://steamcommunity.com"], "src": "options/steamBloat/vacBan/all.css" } 252 | } 253 | } 254 | }, 255 | "Shop Cart Recommendations": { 256 | "description": "Hide recommendations in the cart", 257 | "default": "no", 258 | "tab": "Steam bloat", 259 | "values": { 260 | "yes": { 261 | "TargetCss": { "affects": ["https://.*\\.steampowered\\.com(/.*)?"], "src": "options/steamBloat/shopCartRecommendations.css" } 262 | }, 263 | "no": {} 264 | } 265 | }, 266 | "URL bar": { 267 | "description": "Hide URL bar", 268 | "default": "no", 269 | "tab": "Steam bloat", 270 | "values": { 271 | "yes": { 272 | "TargetCss": { "affects": ["^Steam$"], "src": "options/steamBloat/urlBar.css" } 273 | }, 274 | "no": {} 275 | } 276 | }, 277 | "Userpannel": { 278 | "description": "Moves the user buttons and the download bar to the game sidebar", 279 | "default": "no", 280 | "tab": "Experimental", 281 | "values": { 282 | "yes": { 283 | "TargetCss": { "affects": ["^Steam$"], "src": "options/experimental/userpannel.css" }, 284 | "TargetJs": { "affects": ["^Steam$"], "src": "options/experimental/userpannel.js" } 285 | }, 286 | "no": {} 287 | } 288 | }, 289 | "Store Gamepage": { 290 | "description": "Store Gamepage from the concept", 291 | "default": "no", 292 | "tab": "Experimental", 293 | "values": { 294 | "yes": { 295 | "TargetCss": { "affects": ["https://.*\\.steampowered\\.com(/.*)?"], "src": "options/experimental/storeGamepage.css" } 296 | }, 297 | "no": {} 298 | } 299 | } 300 | , 301 | "Game Overlay": { 302 | "description": "Game Overlay from the concept (Early Experimental)", 303 | "default": "no", 304 | "tab": "Experimental", 305 | "values": { 306 | "yes": { 307 | "TargetCss": { "affects": ["^SP Overlay:"], "src": "src/css/overlay.custom.css" } 308 | }, 309 | "no": {} 310 | } 311 | } 312 | }, 313 | "Patches": [ 314 | { 315 | "MatchRegexString": "Supernav$", 316 | "TargetCss": "menu.custom.css", 317 | "TargetJs": "menu.custom.js" 318 | }, 319 | { 320 | "MatchRegexString": "Menu$", 321 | "TargetCss": "menu.custom.css", 322 | "TargetJs": "menu.custom.js" 323 | }, 324 | { 325 | "MatchRegexString": ".*", 326 | "TargetCss": "src/icons/fluent/fluent.css" 327 | }, 328 | { 329 | "MatchRegexString": "^Steam$", 330 | "TargetCss": "libraryroot.custom.css", 331 | "TargetJs": "src/js/libraryroot.custom.js" 332 | }, 333 | { 334 | "MatchRegexString": ".Rp8QOGJ2DypeDniMnRBhr", 335 | "TargetCss": "src/css/startupLogin.custom.css" 336 | } 337 | ] 338 | } -------------------------------------------------------------------------------- /src/css/bigpicture.custom.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/src/css/bigpicture.custom.css -------------------------------------------------------------------------------- /src/css/friends/chat.css: -------------------------------------------------------------------------------- 1 | .titleBarContainer.ChatTabs { 2 | padding: 0 !important; 3 | border: none; 4 | background-color: unset; 5 | box-shadow: none; 6 | } 7 | .ChatTabs .title-area { 8 | height: 32px; 9 | min-height: unset; 10 | } 11 | 12 | 13 | 14 | /* 15 | ! Tab bar 16 | */ 17 | .chatTabSetContainer { 18 | justify-content: space-between; 19 | } 20 | .chatTabSetContainer.inclient { 21 | padding: 0; 22 | } 23 | 24 | /* Tab */ 25 | .HorizontalMiniSliderScroll { 26 | overflow-y: hidden; 27 | } 28 | 29 | ._3f1rJf0BU79ub9YR2KihaT { 30 | gap: 6px; 31 | border: none; 32 | } 33 | 34 | ._2XZq-_f6npaQdAgeRzKIkz { 35 | border-radius: 8px; 36 | background-color: rgb(var(--color-4)); 37 | } 38 | ._2XZq-_f6npaQdAgeRzKIkz:hover { 39 | cursor: pointer; 40 | } 41 | ._2XZq-_f6npaQdAgeRzKIkz.Yd-DsWkYiFiYwpci--Yk_ { 42 | background-color: rgb(var(--color-2)); 43 | } 44 | ._2XZq-_f6npaQdAgeRzKIkz::before, 45 | ._2XZq-_f6npaQdAgeRzKIkz::after { 46 | display: none; 47 | } 48 | 49 | /* More Tabs */ 50 | .chatTabSelector { 51 | display: flex; 52 | align-items: center; 53 | justify-content: center; 54 | width: 36px; 55 | height: 36px; 56 | margin-left: 12px; 57 | border-radius: 8px; 58 | background: rgb(var(--color-4)); 59 | box-shadow: none; 60 | } 61 | .chatTabSelector:hover { 62 | background: rgb(var(--color-2)); 63 | } 64 | .chatTabSelector .SVGIcon_DownArrowContextMenu { 65 | display: flex; 66 | align-items: center; 67 | justify-content: center; 68 | width: 14px; 69 | height: 14px; 70 | margin: 0; 71 | } 72 | .chatTabSelector .SVGIcon_DownArrowContextMenu polygon { 73 | transform: scale(1.28); 74 | } 75 | 76 | 77 | 78 | /* 79 | ! Chat 80 | */ 81 | .chatDialogs { 82 | margin-top: 6px; 83 | background: unset; 84 | } 85 | 86 | .chatWindow { 87 | border-radius: 8px; 88 | background: rgb(var(--color-1)); 89 | } 90 | 91 | .chatWindow .chatHeader { 92 | display: none; 93 | } 94 | 95 | 96 | .chatWindow .chatHistoryScroll { 97 | padding: 0; 98 | } 99 | .chatWindow .chatHistory { 100 | margin: 12px; 101 | padding: 0; 102 | } 103 | 104 | 105 | 106 | /* Message Bubbles */ 107 | .ChatMessageBlock { 108 | width: fit-content; 109 | margin: 16px 0 0 44px; 110 | } 111 | 112 | 113 | .ChatSpeaker .nibodjvvrm86uCfnnAn4g.avatarHolder { 114 | position: absolute; 115 | top: 0; 116 | left: -44px; 117 | width: 32px; 118 | height: 32px; 119 | margin-top: 6px; 120 | } 121 | 122 | 123 | .ChatSpeaker ._3h-QRJGxnVOIExtHD1R0f2.avatar { 124 | width: unset; 125 | height: unset; 126 | border: none; 127 | border-radius: 100%; 128 | box-shadow: none; 129 | } 130 | .ChatSpeaker .X_mJE4BYV5StDPwZhSiAu.avatarFrame { 131 | display: none; 132 | } 133 | 134 | 135 | .ChatSpeaker .speaker { 136 | margin: 0; 137 | padding: 0; 138 | } 139 | .ChatSpeaker .speakerStatus { 140 | display: none; 141 | } 142 | 143 | .ChatSpeaker .speakerName { 144 | margin: 0 !important; 145 | font-weight: 600; 146 | } 147 | .ChatSpeaker .online .speakerName { 148 | color: rgb(var(--blue)); 149 | } 150 | .ChatSpeaker .ingame .speakerName { 151 | color: rgb(var(--green)); 152 | } 153 | .ChatSpeaker .awayOrSnooze .speakerName { 154 | color: rgb(var(--yellow)) !important; 155 | } 156 | .ChatSpeaker .speakerTimeStamp { 157 | align-self: center; 158 | line-height: unset; 159 | font-weight: 600; 160 | color: #a7a7a7; 161 | } 162 | 163 | 164 | 165 | .ChatSpeaker { 166 | padding: 6px 12px 0; 167 | border-radius: 8px 8px 0 0; 168 | background-color: rgb(var(--color-4)); 169 | } 170 | .ChatMessageBlock:has(.msg._3qYm9oxf8MdyvQDJgbfCrF:nth-child(2) .chatImageContainer) .ChatSpeaker { 171 | padding: 6px 12px; 172 | border-radius: 8px; 173 | } 174 | 175 | .msg._3qYm9oxf8MdyvQDJgbfCrF { 176 | width: fit-content; 177 | margin: 6px 0 0; 178 | padding: 6px 12px !important; 179 | border-radius: 8px; 180 | background-color: rgb(var(--color-4)); 181 | } 182 | .msg._3qYm9oxf8MdyvQDJgbfCrF:nth-child(2) { 183 | width: auto; 184 | margin: 0; 185 | padding: 0 12px 6px !important; 186 | border-radius: 0 0 8px 8px; 187 | background-color: rgb(var(--color-4)); 188 | } 189 | .msg._3qYm9oxf8MdyvQDJgbfCrF:has(.chatImageContainer) { 190 | width: 100%; 191 | margin: 0; 192 | padding: 0 !important; 193 | border-radius: 0; 194 | background-color: unset; 195 | } 196 | 197 | .msg._3qYm9oxf8MdyvQDJgbfCrF .msgText { 198 | color: #fff; 199 | } 200 | 201 | .msg._3qYm9oxf8MdyvQDJgbfCrF .chatImageContainer .BBCodeImageWrapper { 202 | background-color: unset; 203 | } 204 | .msg._3qYm9oxf8MdyvQDJgbfCrF .chatImageContainer .chatImageFull { 205 | border-radius: 8px; 206 | } 207 | 208 | 209 | .msg._3qYm9oxf8MdyvQDJgbfCrF .FriendChatTimeStamp { 210 | width: fit-content !important; 211 | top: 50%; 212 | left: -46px; 213 | font-weight: 600; 214 | border: none; 215 | color: #a7a7a7; 216 | transform: translateY(-50%); 217 | } 218 | .msg._3qYm9oxf8MdyvQDJgbfCrF:hover .FriendChatTimeStamp { 219 | opacity: 1; 220 | } 221 | 222 | 223 | 224 | /* Time Divider */ 225 | .msg.timeDivision { 226 | height: 2px; 227 | justify-content: flex-end; 228 | margin-top: 16px; 229 | padding: 0 !important; 230 | text-wrap: nowrap; 231 | color: transparent; 232 | align-items: center; 233 | } 234 | 235 | .msg.timeDivision .preHorizDivider { 236 | width: -webkit-fill-available; 237 | height: 2px; 238 | margin: 0; 239 | border-radius: 8px; 240 | background-color: rgb(var(--color-6)); 241 | } 242 | 243 | .msg.timeDivision::after { 244 | position: absolute; 245 | content: attr(data-copytext); 246 | width: auto; 247 | height: fit-content; 248 | padding: 6px 12px; 249 | text-wrap: nowrap; 250 | font-size: 11px; 251 | font-weight: 600; 252 | border: 2px solid rgb(var(--color-6)); 253 | border-radius: 8px; 254 | color: #a7a7a7; 255 | background: rgb(var(--color-2)); 256 | } 257 | 258 | .msg.timeDivision .horizDivider { 259 | display: none; 260 | } 261 | 262 | 263 | 264 | /* 265 | ! Input 266 | */ 267 | .chatWindow .chatEntry { 268 | margin: 0 12px 24px; 269 | padding: 0 !important; 270 | border-radius: 8px; 271 | background-color: rgb(var(--color-2)); 272 | } 273 | .chatWindow .chatEntry>* { 274 | margin: 0; 275 | } 276 | 277 | 278 | ._3Ule3rolhZJiBN4yNNtk1s { 279 | border-radius: 8px; 280 | background-color: rgb(var(--color-2)); 281 | box-shadow: none; 282 | } 283 | 284 | 285 | /*._113iuw_HlE_qSgt9cGWCSv { 286 | height: fit-content; 287 | margin: 0 0 0 32px; 288 | padding: 6px 12px; 289 | font-size: 16px; 290 | font-weight: 300; 291 | line-height: 16px; 292 | color: #fff; 293 | box-shadow: none; 294 | }*/ 295 | 296 | 297 | .FriendChatTypingNotification { 298 | position: fixed; 299 | bottom: 16px; 300 | left: calc(16px + 12px); 301 | padding: 0 0 4px 6px; 302 | font-weight: 300; 303 | background: unset; 304 | } -------------------------------------------------------------------------------- /src/css/friends/groupChat.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/src/css/friends/groupChat.css -------------------------------------------------------------------------------- /src/css/friends/list.css: -------------------------------------------------------------------------------- 1 | .friendListHeaderContainer { 2 | display: flex; 3 | flex-direction: column; 4 | border-radius: 8px; 5 | background-color: unset; 6 | box-shadow: none; 7 | } 8 | 9 | 10 | /* User pannel */ 11 | .currentUserContainer { 12 | margin-bottom: 16px; 13 | padding-right: 0; 14 | border-bottom: none; 15 | } 16 | 17 | .statusHeaderGlow { 18 | display: none; 19 | } 20 | 21 | .AvatarAndUser { 22 | padding: 16px; 23 | border-radius: 8px; 24 | background-color: rgb(var(--color-2)); 25 | } 26 | 27 | 28 | /* Friends haeder */ 29 | .socialTabSearchContainer { 30 | order: 1; 31 | } 32 | .socialTabSearchContainer .activeTab { 33 | margin: 0 0 6px; 34 | padding: 6px 12px; 35 | border-radius: 8px; 36 | background-color: rgb(var(--color-2)); 37 | box-shadow: none; 38 | } 39 | 40 | .addFriendButton { 41 | margin-right: 0; 42 | } 43 | 44 | 45 | /* Quick Access Friends */ 46 | .quickAccessFriends { 47 | order: 2; 48 | } 49 | 50 | .quickAccessFriends:not(.emptyQuickAccess) { 51 | width: auto; 52 | margin: 0; 53 | padding: 6px; 54 | border-radius: 8px; 55 | background-color: rgb(var(--color-1)); 56 | } 57 | 58 | 59 | /* List */ 60 | .FriendsListContent { 61 | margin-top: 6px; 62 | } 63 | 64 | .friendlistListContainer { 65 | border-radius: 8px; 66 | background: rgb(var(--color-1)); 67 | } 68 | ._1osHa9KHOmdCDNrA232z4N, 69 | ._2OoTJwlWvzvAysWOOEQaXS { 70 | display: none; 71 | } 72 | 73 | .friendGroup.onlineFriends, 74 | .friendGroup.offlineFriends { 75 | margin-top: 0 !important; 76 | border-top: none !important; 77 | } 78 | 79 | 80 | /* Group Chats */ 81 | .FriendsListChatSection { 82 | margin-top: 12px; 83 | } 84 | 85 | .FriendsListContent:has(.FriendsListChatSection.Collapsed) .friendsListSectionTitle { 86 | margin-bottom: 0; 87 | border-radius: 8px; 88 | } 89 | .friendsListSectionTitle { 90 | margin-bottom: 6px; 91 | padding: 6px 12px; 92 | border-radius: 8px; 93 | background-color: rgb(var(--color-2)); 94 | } 95 | .friendsListSectionTitle:hover { 96 | background-color: rgb(var(--color-4)) !important; 97 | } 98 | 99 | .chatRoomListContainer { 100 | border-radius: 8px; 101 | background: rgb(var(--color-1)); 102 | } 103 | .ChatRoomList { 104 | padding: 0; 105 | } 106 | 107 | .ChatRoomListGroupItem:hover .ChatRoomListGroupItem_header { 108 | background: none !important; 109 | } 110 | 111 | 112 | /* Footer */ 113 | .friendListFooter { 114 | display: none; 115 | } -------------------------------------------------------------------------------- /src/css/inputs/button.css: -------------------------------------------------------------------------------- 1 | button, 2 | button span, 3 | .btn_large, 4 | .btn_large span, 5 | .btn_medium, 6 | .btn_medium span, 7 | .btn_small, 8 | .btn_small span { 9 | border-radius: 8px !important; 10 | } -------------------------------------------------------------------------------- /src/css/inputs/checkbox.css: -------------------------------------------------------------------------------- 1 | ._2bl0iQ9xigbq4Zd1NI6NZl { 2 | background-color: rgb(var(--color-2)) !important; 3 | } 4 | ._2bl0iQ9xigbq4Zd1NI6NZl::before { 5 | background-color: rgb(var(--accent-1)) !important; 6 | transform: translateX(-40px); 7 | } 8 | .yLrDAetGoWx0GYqA6ShfS ._2bl0iQ9xigbq4Zd1NI6NZl::before { 9 | transform: translateX(0px) !important; 10 | } 11 | 12 | ._1PQppcgkuXQAiFPar9AGi- { 13 | width: 16px; 14 | height: 16px; 15 | margin: 3px; 16 | background: black; 17 | transform: translateX(0px); 18 | } -------------------------------------------------------------------------------- /src/css/inputs/import.css: -------------------------------------------------------------------------------- 1 | @import url("button.css"); 2 | @import url("checkbox.css"); -------------------------------------------------------------------------------- /src/css/notifications.custom.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/src/css/notifications.custom.css -------------------------------------------------------------------------------- /src/css/overlay.custom.css: -------------------------------------------------------------------------------- 1 | @import url("./src/css/regular.css"); 2 | @import url("./overlay/achievements.css"); 3 | @import url("./overlay/clock.css"); 4 | @import url("./overlay/controllerSettings.css"); 5 | @import url("./overlay/discussions.css"); 6 | @import url("./overlay/dlc.css"); 7 | @import url("./overlay/friends.css"); 8 | @import url("./overlay/gameOverview.css"); 9 | @import url("./overlay/guides.css"); 10 | @import url("./overlay/notes.css"); 11 | @import url("./overlay/recording.css"); 12 | @import url("./overlay/screenshotManager.css"); 13 | @import url("./overlay/settings.css"); 14 | @import url("./overlay/webBrowser.css"); 15 | 16 | 17 | body.QsvsRVwbsApgKt1MhM0fz.DesktopUI { 18 | background: radial-gradient(#000000aa, #000000ee); 19 | } 20 | 21 | body.QsvsRVwbsApgKt1MhM0fz.DesktopUI::after { 22 | content: "The overlay option is an early experimental, \a please do not make bug reports because of the overlay"; 23 | position: absolute; 24 | bottom: 16px; 25 | right: 16px; 26 | padding: 12px 16px; 27 | font-size: 14px; 28 | font-weight: 800; 29 | white-space: pre-wrap; 30 | border: 3px solid rgb(var(--red)); 31 | border-radius: 8px; 32 | color: rgb(var(--red)); 33 | background-color: rgb(var(--red), 0.17); 34 | } 35 | 36 | 37 | 38 | ._3b_pllMxcr_an1aQ5goWvB { 39 | display: flex; 40 | flex-direction: row-reverse; 41 | width: 800px; 42 | height: -webkit-fill-available; 43 | margin: 16px; 44 | border-radius: 8px; 45 | background: unset; 46 | background-color: rgb(var(--background)); 47 | box-shadow: unset; 48 | } 49 | 50 | 51 | 52 | /* 53 | & Sidebar 54 | */ 55 | ._1EI98QaSW75zbVd3gxgBfS { 56 | position: unset; 57 | width: 100%; 58 | margin: 0; 59 | padding: 0; 60 | } 61 | 62 | ._1EI98QaSW75zbVd3gxgBfS ._3OzkVrQFFPv0aV41N4MrHV { 63 | position: unset; 64 | height: 100%; 65 | justify-content: unset; 66 | } 67 | 68 | 69 | ._1EI98QaSW75zbVd3gxgBfS ._3OzkVrQFFPv0aV41N4MrHV .fbu3l7kPiBeb3EKCjIb8n { 70 | overflow: auto; 71 | position: unset; 72 | flex: unset; 73 | flex-direction: column; 74 | gap: 6px; 75 | height: unset; 76 | margin: 12px; 77 | padding: 12px; 78 | border-radius: 8px; 79 | background-color: rgb(var(--color-1)); 80 | } 81 | ._1EI98QaSW75zbVd3gxgBfS ._3OzkVrQFFPv0aV41N4MrHV .fbu3l7kPiBeb3EKCjIb8n::-webkit-scrollbar { 82 | display: none; 83 | } 84 | 85 | 86 | /* 87 | ! Items 88 | */ 89 | ._3OzkVrQFFPv0aV41N4MrHV .fbu3l7kPiBeb3EKCjIb8n ._3ZLaTxSHxeGcoKlIy_-Z0L { 90 | margin: 0; 91 | border-radius: 100%; 92 | background-color: rgb(var(--color-5)); 93 | } 94 | ._3OzkVrQFFPv0aV41N4MrHV .fbu3l7kPiBeb3EKCjIb8n ._3ZLaTxSHxeGcoKlIy_-Z0L._1BXjK5v8XI_SEhGola5ftn { 95 | border-radius: 16px; 96 | } 97 | 98 | 99 | 100 | /* 101 | & Main/Home 102 | */ 103 | .fi6UDkxJq66MLo2z9wabQ { 104 | position: relative; 105 | gap: 12px; 106 | flex-direction: column; 107 | height: -webkit-fill-available; 108 | max-height: unset; 109 | margin: 12px 12px 12px 0; 110 | padding: 12px; 111 | border-radius: 8px; 112 | background-color: rgb(var(--color-1)); 113 | } 114 | 115 | 116 | /* 117 | ! Back to Game 118 | */ 119 | .fi6UDkxJq66MLo2z9wabQ ._2uM3ouyTdzAtXR3ffa7oRg { 120 | position: absolute; 121 | right: calc(-12px + -221px + -16px); 122 | } 123 | 124 | .fi6UDkxJq66MLo2z9wabQ ._2uM3ouyTdzAtXR3ffa7oRg ._2LJMRr1_5XUK4wlt7YMyPi { 125 | gap: 12px; 126 | flex-direction: row-reverse; 127 | } 128 | 129 | /* Button */ 130 | .fi6UDkxJq66MLo2z9wabQ ._2uM3ouyTdzAtXR3ffa7oRg ._2LJMRr1_5XUK4wlt7YMyPi .mh8m9p4PBg_Qrev1bfTzc { 131 | margin: 0; 132 | outline: 2px solid rgb(var(--color-5)) !important; 133 | border-radius: 8px; 134 | background-color: rgb(var(--color-1)); 135 | } 136 | 137 | /* Text */ 138 | .fi6UDkxJq66MLo2z9wabQ ._2uM3ouyTdzAtXR3ffa7oRg ._2LJMRr1_5XUK4wlt7YMyPi ._2EuLvYoO3iAtbpE0XEao8d { 139 | margin: 0; 140 | text-align: left; 141 | } 142 | 143 | 144 | /* 145 | ! Logo Banner 146 | */ 147 | .fi6UDkxJq66MLo2z9wabQ .iu7jaxFxWk1sYge_kwKmz._3KwfoP3QLtY80hx0gtZBZ4 { 148 | order: -1; 149 | display: flex; 150 | flex: none; 151 | align-items: center; 152 | justify-content: center; 153 | width: -webkit-fill-available; 154 | max-width: unset; 155 | height: 200px; 156 | padding: 0; 157 | border-radius: 8px; 158 | background: linear-gradient(180.00deg, rgb(var(--accent-1), .6),rgb(var(--color-1)) 112%); 159 | } 160 | 161 | 162 | .fi6UDkxJq66MLo2z9wabQ .iu7jaxFxWk1sYge_kwKmz._3KwfoP3QLtY80hx0gtZBZ4 ._3d_bT685lnWotXxgzKW6am { 163 | transform: scale(.5); 164 | } 165 | 166 | 167 | /* 168 | ! Time, Date & Playtime & Exit Game 169 | */ 170 | .fi6UDkxJq66MLo2z9wabQ .vCykYvbW9JAoUuOZK3L8M { 171 | position: relative; 172 | justify-content: center; 173 | align-items: center; 174 | width: 100%; 175 | height: 100%; 176 | border-radius: 8px; 177 | background-color: rgb(var(--color-2)); 178 | } 179 | 180 | 181 | /* Time */ 182 | .fi6UDkxJq66MLo2z9wabQ .vCykYvbW9JAoUuOZK3L8M ._2gQ69IwRa_DeSORPxG5wu0 { 183 | font-size: 62px; 184 | line-height: 62px; 185 | } 186 | 187 | 188 | /* Date */ 189 | 190 | 191 | 192 | /* Playtime */ 193 | 194 | 195 | 196 | /* Exit Game */ 197 | .fi6UDkxJq66MLo2z9wabQ .vCykYvbW9JAoUuOZK3L8M .BoygotvcKo4DC4dSix8G3 { 198 | position: absolute; 199 | bottom: 16px; 200 | border-radius: 8px; 201 | background-color: rgb(var(--color-1)); 202 | filter: none; 203 | } 204 | .fi6UDkxJq66MLo2z9wabQ .vCykYvbW9JAoUuOZK3L8M .BoygotvcKo4DC4dSix8G3:hover { 205 | background-color: rgb(var(--red)); 206 | } -------------------------------------------------------------------------------- /src/css/overlay/achievements.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/src/css/overlay/achievements.css -------------------------------------------------------------------------------- /src/css/overlay/clock.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/src/css/overlay/clock.css -------------------------------------------------------------------------------- /src/css/overlay/controllerSettings.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/src/css/overlay/controllerSettings.css -------------------------------------------------------------------------------- /src/css/overlay/discussions.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/src/css/overlay/discussions.css -------------------------------------------------------------------------------- /src/css/overlay/dlc.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/src/css/overlay/dlc.css -------------------------------------------------------------------------------- /src/css/overlay/friends.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/src/css/overlay/friends.css -------------------------------------------------------------------------------- /src/css/overlay/gameOverview.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/src/css/overlay/gameOverview.css -------------------------------------------------------------------------------- /src/css/overlay/guides.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/src/css/overlay/guides.css -------------------------------------------------------------------------------- /src/css/overlay/notes.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/src/css/overlay/notes.css -------------------------------------------------------------------------------- /src/css/overlay/recording.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/src/css/overlay/recording.css -------------------------------------------------------------------------------- /src/css/overlay/screenshotManager.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/src/css/overlay/screenshotManager.css -------------------------------------------------------------------------------- /src/css/overlay/settings.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/src/css/overlay/settings.css -------------------------------------------------------------------------------- /src/css/overlay/webBrowser.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/src/css/overlay/webBrowser.css -------------------------------------------------------------------------------- /src/css/regular.css: -------------------------------------------------------------------------------- 1 | @import url("./inputs/import.css"); 2 | @import url("./steam/modalDialogPopup.css"); 3 | 4 | /* Scrollbar */ 5 | *::-webkit-scrollbar { 6 | width: 14px !important; 7 | } 8 | 9 | *::-webkit-scrollbar-track { 10 | border-radius: 8px !important; 11 | } 12 | 13 | *::-webkit-scrollbar-thumb { 14 | border-radius: 8px !important; 15 | border: 4px solid transparent !important; 16 | background-clip: content-box !important; 17 | background-color: rgb(var(--accent-1)) !important; 18 | } 19 | 20 | *::-webkit-scrollbar-thumb:hover { 21 | border: 3px solid transparent !important; 22 | background-color: rgb(var(--accent-2)) !important; 23 | } 24 | 25 | 26 | 27 | /* Titlebar controls */ 28 | .title-area, 29 | .title-area .title-area-highlight, 30 | .title-area .title-area-children { 31 | height: 32px !important; 32 | mask: unset; 33 | -webkit-mask: unset; 34 | background: unset; 35 | } 36 | div.ModalPosition_TopBar { 37 | display: none; 38 | } 39 | 40 | /* Buttons */ 41 | .title-area .title-bar-actions { 42 | max-height: unset; 43 | height: 32px; 44 | } 45 | 46 | .title-area .title-area-icon { 47 | width: 42px; 48 | height: 32px; 49 | } 50 | .title-area .title-area-icon:hover { 51 | background: rgb(var(--color-2)); 52 | } 53 | 54 | 55 | /* Icons */ 56 | .title-area .title-area-icon .SVGIcon_Button line, 57 | .title-area .title-area-icon .SVGIcon_Button rect, 58 | .title-area .title-area-icon .SVGIcon_Button polyline { 59 | stroke: rgb(var(--accent-1)); 60 | } 61 | 62 | .title-area .title-area-icon:hover .SVGIcon_Button line, 63 | .title-area .title-area-icon:hover .SVGIcon_Button rect, 64 | .title-area .title-area-icon:hover .SVGIcon_Button polyline { 65 | stroke: rgb(var(--accent-2)); 66 | } 67 | 68 | 69 | /* Close button */ 70 | .title-area .title-area-icon.closeButton:hover { 71 | background: rgb(var(--accent-1)); 72 | } 73 | .title-area .title-area-icon.closeButton:hover .SVGIcon_Button line { 74 | stroke: rgb(var(--color-2)); 75 | } 76 | 77 | 78 | 79 | /* Resize icon */ 80 | .window_resize_grip { 81 | opacity: 0 !important; 82 | } -------------------------------------------------------------------------------- /src/css/root.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --accent-1: 102, 108, 255; 3 | --accent-2: 135, 140, 255; 4 | --color-1: 17, 17, 17; 5 | --color-2: 30, 30, 30; 6 | --color-3: 20, 20, 20; 7 | --color-4: 24, 24, 24; 8 | --color-5: 38, 41, 44; 9 | --color-6: 38, 38, 41; 10 | --background: 10, 10, 10; 11 | --red: 240, 74, 74; 12 | --red-hover: 242, 99, 99; 13 | --green: 36, 166, 90; 14 | --green-hover: 39, 185, 100; 15 | --blue: 75, 137, 239; 16 | --blue-hover: 100, 154, 242; 17 | --yellow: 239, 141, 75; 18 | --yellow-hover: 239, 141, 75; 19 | } -------------------------------------------------------------------------------- /src/css/startupLogin.custom.css: -------------------------------------------------------------------------------- 1 | .Rp8QOGJ2DypeDniMnRBhr .VZ6x_grhNkIYJG__jEEyp.DesktopUI { 2 | display: flex; 3 | flex-direction: column; 4 | border: unset; 5 | background: unset; 6 | background-color: rgb(var(--background)); 7 | box-shadow: none; 8 | animation: none; 9 | } 10 | 11 | 12 | 13 | /* 14 | & Loading Window 15 | */ 16 | .Rp8QOGJ2DypeDniMnRBhr ._1TR3CCCdSmI-0MXucYBuP2 { 17 | width: -webkit-fill-available; 18 | height: -webkit-fill-available; 19 | margin: 0 16px 16px; 20 | border-radius: 8px; 21 | background-color: rgb(var(--color-1)); 22 | } 23 | 24 | 25 | /* 26 | ! Loading spinner 27 | */ 28 | .Rp8QOGJ2DypeDniMnRBhr ._1DWH_4M4yAq8O2T06-3ckY { 29 | display: none; 30 | } 31 | 32 | 33 | .Rp8QOGJ2DypeDniMnRBhr ._3CN5DkgNMvdtT9fJhNOj_v::before { 34 | content: ""; 35 | display: block; 36 | width: 54px; 37 | height: 54px; 38 | border: 8px solid rgba(var(--color-2)); 39 | border-top: 8px solid rgb(var(--accent-1)); 40 | border-radius: 50%; 41 | animation: spin .6s linear infinite; 42 | } 43 | 44 | @keyframes spin { 45 | 0% { 46 | transform: rotate(0deg); 47 | } 48 | 100% { 49 | transform: rotate(360deg); 50 | } 51 | } 52 | 53 | 54 | /* 55 | ! Loading bar 56 | */ 57 | .Rp8QOGJ2DypeDniMnRBhr ._191qxA6UisOKSvaq9gM4W6 { 58 | display: none; 59 | } 60 | 61 | 62 | /* 63 | ! Avatar & Username 64 | */ 65 | .Rp8QOGJ2DypeDniMnRBhr ._6Z2AOU-R-8aK7KZevey0W { 66 | display: none; 67 | } 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | /* 78 | & Select User Window 79 | */ 80 | .Rp8QOGJ2DypeDniMnRBhr ._27A5ub1QLLIMmgywKVMg4z { 81 | width: -webkit-fill-available; 82 | margin: 0 16px 16px; 83 | padding: 0; 84 | border-radius: 8px; 85 | background-color: rgb(var(--color-1)); 86 | } 87 | 88 | 89 | 90 | 91 | .Rp8QOGJ2DypeDniMnRBhr ._27A5ub1QLLIMmgywKVMg4z ._29VQq5eE-j95L-SafIOc1T { 92 | padding: 0; 93 | } 94 | 95 | 96 | .Rp8QOGJ2DypeDniMnRBhr ._27A5ub1QLLIMmgywKVMg4z ._1Tsmp8q3Beodvix_OSedxk { 97 | justify-content: center; 98 | margin: 0; 99 | } 100 | 101 | 102 | 103 | 104 | /* 105 | ! Steam Logo 106 | */ 107 | .Rp8QOGJ2DypeDniMnRBhr ._27A5ub1QLLIMmgywKVMg4z ._14exBrSFDthVqeknXgFh4X { 108 | display: none; 109 | } 110 | 111 | 112 | /* 113 | ! Title (Who's Playing?) 114 | */ 115 | .Rp8QOGJ2DypeDniMnRBhr ._27A5ub1QLLIMmgywKVMg4z ._2OLQBEFErC3eaxHeD7--LU { 116 | padding: 12px 0 !important; 117 | text-transform: uppercase; 118 | } 119 | 120 | 121 | /* 122 | ! Users 123 | */ 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | /* 136 | & Login Window 137 | */ 138 | 139 | 140 | .Rp8QOGJ2DypeDniMnRBhr .lat0M-V5X4uYd6Mpm1DJ1 { 141 | flex-direction: unset; 142 | height: -webkit-fill-available; 143 | margin: 0 16px 16px; 144 | } 145 | 146 | 147 | .Rp8QOGJ2DypeDniMnRBhr .lat0M-V5X4uYd6Mpm1DJ1 ._2v9dClMg2Lmn8UVv6GUeJt { 148 | border-radius: 8px; 149 | background: unset; 150 | background-color: rgb(var(--color-1)); 151 | } 152 | 153 | 154 | 155 | /* *** */ 156 | 157 | 158 | 159 | 160 | /* 161 | ! QR Login Code 162 | */ 163 | .Rp8QOGJ2DypeDniMnRBhr .lat0M-V5X4uYd6Mpm1DJ1 .xlEVpBeYO1h2tOqErt9fj { 164 | padding: 16px; 165 | border: none; 166 | border-radius: 8px; 167 | background-color: rgb(var(--color-2)); 168 | } 169 | 170 | .Rp8QOGJ2DypeDniMnRBhr .lat0M-V5X4uYd6Mpm1DJ1 .xlEVpBeYO1h2tOqErt9fj ._1YVDTFYSTDWouyIbRs_hN_:not(._1zNnNw2BDhrN6ML6YxBYJE) { 171 | background-color: rgb(var(--color-2)) !important; 172 | } 173 | .Rp8QOGJ2DypeDniMnRBhr .lat0M-V5X4uYd6Mpm1DJ1 .xlEVpBeYO1h2tOqErt9fj ._1YVDTFYSTDWouyIbRs_hN_._1zNnNw2BDhrN6ML6YxBYJE { 174 | background-color: rgb(var(--accent-1)) !important; 175 | } -------------------------------------------------------------------------------- /src/css/steam/achievementsModal.css: -------------------------------------------------------------------------------- 1 | /* Backdrop */ 2 | ._37MAYpIjl0IDA1xVhhsuX8 ._19eb8NMS53lqZR33su0kTr { 3 | backdrop-filter: brightness(0.2); 4 | } 5 | 6 | 7 | 8 | /* 9 | ! Side controls 10 | */ 11 | .HruWVPwIDh2FFOOH7OiSs .gioyPMOZttYFcnmgLnsWf .iYW5hWQwg14WYT4PV3xe_ { 12 | top: 16px; 13 | right: -64px; 14 | outline: 2px solid rgb(var(--color-5)) !important; 15 | border: none !important; 16 | border-radius: 8px; 17 | background-image: none; 18 | background-color: rgb(var(--color-1)); 19 | box-shadow: 0px 0px 16px 0px rgb(0, 0, 0); 20 | } 21 | .HruWVPwIDh2FFOOH7OiSs .gioyPMOZttYFcnmgLnsWf .iYW5hWQwg14WYT4PV3xe_:hover { 22 | background-color: rgb(var(--color-3)); 23 | } 24 | 25 | 26 | 27 | /* 28 | ! Main 29 | */ 30 | /* Base */ 31 | .HruWVPwIDh2FFOOH7OiSs .gioyPMOZttYFcnmgLnsWf { 32 | margin: 16px auto; 33 | } 34 | 35 | .HruWVPwIDh2FFOOH7OiSs .gioyPMOZttYFcnmgLnsWf ._2FqpD91Xarb7f0uIOuXFOR { 36 | outline: 3px solid rgb(var(--color-5)); 37 | border-radius: 8px; 38 | background-image: none; 39 | background-color: rgb(var(--color-1)); 40 | box-shadow: 0px 0px 16px 0px rgb(0, 0, 0); 41 | } 42 | 43 | ._3FQHgRosfNJYE44Fsd_U6z { 44 | background-color: unset; 45 | } 46 | 47 | .ODpLjkbgMnhnQTcm8ZCMO ._3Fjw7Sm_QUgOr8r3khWTSm { 48 | background: unset; 49 | backdrop-filter: unset; 50 | } 51 | 52 | ._3FQHgRosfNJYE44Fsd_U6z ._11Z-tk3z56AMAn01e-PyBL { 53 | padding: 0 !important; 54 | } 55 | 56 | 57 | /* Banner */ 58 | .ODpLjkbgMnhnQTcm8ZCMO ._294HV0se7vdDLPe-RvRZbb { 59 | display: none; 60 | } 61 | 62 | 63 | /* Header */ 64 | ._36Dp_CLuZbFCm7KDc9tbCv { 65 | margin: 16px; 66 | padding: 12px; 67 | border-radius: 8px; 68 | background-color: rgb(var(--color-2)); 69 | } 70 | 71 | ._2iGYYePQN5QQzHWNLybmd4 .Pr0VCo6YB9GN5VnGd_wvF { 72 | gap: 12px !important; 73 | } 74 | 75 | 76 | /* Progress */ 77 | ._gDkIgrqhJq-FtbuR9wJi { 78 | padding: 0; 79 | background-color: transparent; 80 | } 81 | 82 | 83 | ._3CaVUwIuq04vtlXl8IK-p1 { 84 | margin-top: 6px; 85 | } 86 | 87 | ._1-nHjRywUoX7Mpyc6JOPaQ { 88 | background-color: rgb(var(--background)); 89 | } 90 | ._1-nHjRywUoX7Mpyc6JOPaQ ._2_0JonK7eKEvh8IoOvq0-B { 91 | background-color: rgb(var(--accent-1)) !important; 92 | } 93 | 94 | 95 | 96 | /* 97 | ! List 98 | */ 99 | .gxNvErGV7FhJ3lnOa5htx { 100 | margin: 0 16px 16px; 101 | border-radius: 8px; 102 | background-color: rgb(var(--color-2)); 103 | } 104 | 105 | ._1X4dtbZ_AMX_DXT-SGiK01 { 106 | margin: 12px; 107 | padding: 12px !important; 108 | border-radius: 8px; 109 | background-color: rgb(var(--color-1)); 110 | } 111 | 112 | ._1UXC2lGcmNTGepRJTwtuH0 { 113 | gap: 12px; 114 | padding: 0; 115 | background-color: transparent; 116 | } 117 | 118 | 119 | /* Tabs */ 120 | ._2JobstxtZVYF3078DblN2M { 121 | padding: 0 16px; 122 | } 123 | ._2JobstxtZVYF3078DblN2M._1jNhbFODJy7sNdcnEeZkz4::before { 124 | display: none; 125 | } 126 | 127 | 128 | /* List Items */ 129 | ._2Kmn7fJOkLT4KyWl467a9M, 130 | ._316Uo4SBrQ_beBdSYn2HNO { 131 | border-radius: 8px; 132 | background-color: rgb(var(--color-4)); 133 | } 134 | ._2Kmn7fJOkLT4KyWl467a9M .cvw8DHMUBKuZs5DeLJOQ2 { 135 | gap: 12px; 136 | padding: 12px; 137 | } 138 | 139 | /* Global % of all player */ 140 | ._316Uo4SBrQ_beBdSYn2HNO .UWkKthLfz_5MM3NdASE2W ._2lgHVJbZwxb10Md7bZ6USU { 141 | border-radius: 8px; 142 | background-color: rgb(var(--accent-1), .1); 143 | } 144 | 145 | /* Item Icon */ 146 | .gxNvErGV7FhJ3lnOa5htx ._1fEbX-PfpZ2FhkhttWcm-V img { 147 | border-radius: 8px; 148 | } 149 | 150 | /* Compared text */ 151 | ._3eXGQY1UQSHRwf-0Ouzrlj { 152 | gap: 0; 153 | } -------------------------------------------------------------------------------- /src/css/steam/downloadPage.css: -------------------------------------------------------------------------------- 1 | ._1bq4x9pa4-9RLY-dXWUZTp { 2 | background: unset; 3 | background-color: rgb(var(--color-1)); 4 | } 5 | 6 | 7 | 8 | /* 9 | & Header 10 | */ 11 | ._373v1eWNyaPKhgnea9FZSt { 12 | margin: 12px; 13 | } 14 | 15 | 16 | ._1VNuYHM6BPBOJspC6zPf5r.IbePLaw-vSvhG1GTenYFg { 17 | border-radius: 8px; 18 | background-color: rgb(var(--color-2)); 19 | } 20 | 21 | 22 | 23 | /* 24 | ! Banner 25 | */ 26 | ._3KDkLoCR8OM8xfdQysKn9t._1ashwbbBZrppDqaals3644 { 27 | overflow: hidden; 28 | height: -webkit-fill-available; 29 | margin: 12px 0 12px 12px; 30 | border-radius: 8px; 31 | } 32 | 33 | 34 | ._3mZ2rKd2RECK4q4ufmsDYX ._2NqL3nV35eJFAu56_Yu-WM { 35 | transform: scale(1); 36 | } 37 | 38 | 39 | ._3mZ2rKd2RECK4q4ufmsDYX ._3WauYi7bNDSGIogMLPVYES .edQzwM57P-T5K3eDGkyvZ { 40 | background: linear-gradient(to right, transparent 15%, rgb(var(--color-2)) 90%); 41 | } 42 | 43 | 44 | /* Download Speed */ 45 | ._1BxZDLT8KveuJzn-1q4NTP .OS07NfYlp6v-Eh5oQ7dwn { 46 | color: rgb(var(--accent-1)); 47 | } 48 | 49 | 50 | ._3KDkLoCR8OM8xfdQysKn9t ._30N3oYMkrAbxU-Vxc_1l6C { 51 | opacity: 0; 52 | } 53 | 54 | 55 | .Rgy-7t7i1Yv97qhWQae7K { 56 | display: none; 57 | color: #b8bcbf; 58 | } 59 | .Rgy-7t7i1Yv97qhWQae7K:has(.-OgRzXqfwOvAWFZS3Rk_N.-PT6mGyvgBJXK-uaK2cRV) { 60 | display: flex; 61 | } 62 | 63 | 64 | 65 | /* 66 | ! Stats 67 | */ 68 | ._20JlDJD9-uoCjNLGp_8mY6 { 69 | padding: 12px; 70 | } 71 | 72 | 73 | 74 | .Ayu--dDVVaKmP2gNYPAQ0 ._33jqEbo2sBXJZ08w9BkdEM svg { 75 | color: rgb(var(--accent-1)); 76 | } 77 | 78 | 79 | ._1VNuYHM6BPBOJspC6zPf5r.IbePLaw-vSvhG1GTenYFg ._1SyggnJY6qbRSmbZpkK3-H { 80 | order: 1; 81 | } 82 | 83 | 84 | ._2sCvZTD6ZTZz3p9_ekH_gI ._1r3ouwFT2-tsTAcnXYZ6NU ._1-Mr1M0nO5UEnqLWSR-uki { 85 | font-weight: normal; 86 | color: #fff; 87 | } 88 | 89 | ._2sCvZTD6ZTZz3p9_ekH_gI ._1r3ouwFT2-tsTAcnXYZ6NU ._1-Mr1M0nO5UEnqLWSR-uki ._3tEPpl-d9-fiCX5AdJiXJL { 90 | font-weight: bolder; 91 | } 92 | 93 | 94 | 95 | ._22WcrscaQSqK56PQKgf5YG .sv3ZHPWbrD7yjwx5Mi3u5 ._3a973VY2X3US_cZqA9ZgNF { 96 | display: none; 97 | } 98 | 99 | 100 | ._1SyggnJY6qbRSmbZpkK3-H ._1vMU1vG5ZtLihr3mfXUymR { 101 | background-color: rgb(var(--background)); 102 | } 103 | ._1VNuYHM6BPBOJspC6zPf5r:hover ._1SyggnJY6qbRSmbZpkK3-H ._1vMU1vG5ZtLihr3mfXUymR { 104 | background-color: rgb(var(--background)); 105 | } 106 | 107 | ._1SyggnJY6qbRSmbZpkK3-H ._1vMU1vG5ZtLihr3mfXUymR._2mLZnQr2HzWQ1K8D8xouc- div { 108 | background-color: rgb(var(--accent-1)); 109 | } 110 | 111 | 112 | 113 | /* 114 | ! Settings icon 115 | */ 116 | .lzk4zNVWG2zPV5Mk_o5GL { 117 | top: 24px; 118 | right: 24px; 119 | } 120 | 121 | ._3Tfp8-wTAttW3WVa_X9JVC._3Tfp8-wTAttW3WVa_X9JVC._3Tfp8-wTAttW3WVa_X9JVC { 122 | opacity: .5; 123 | padding: 0 !important; 124 | background: unset !important; 125 | } 126 | ._3Tfp8-wTAttW3WVa_X9JVC._3Tfp8-wTAttW3WVa_X9JVC._3Tfp8-wTAttW3WVa_X9JVC:hover { 127 | opacity: 1; 128 | } 129 | 130 | 131 | 132 | 133 | /* 134 | & List 135 | */ 136 | /* Divider */ 137 | .SEmVpmXrYVl3OxL1sDFTg { 138 | display: none; 139 | } 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | /* 157 | & List 158 | */ 159 | 160 | /* Divider *//* 161 | .SEmVpmXrYVl3OxL1sDFTg { 162 | display: none; 163 | } 164 | 165 | 166 | 167 | /* 168 | ! Installing now 169 | *//* 170 | .IbePLaw-vSvhG1GTenYFg .OINnOU8K5HzPe2nzczpZi { 171 | border: none; 172 | } 173 | 174 | ._1VNuYHM6BPBOJspC6zPf5r.IbePLaw-vSvhG1GTenYFg { 175 | margin: 0 12px; 176 | padding: 12px 0 12px 12px; 177 | border-radius: 8px; 178 | background-color: rgb(var(--accent-2), .15); 179 | } 180 | ._1VNuYHM6BPBOJspC6zPf5r.IbePLaw-vSvhG1GTenYFg:hover { 181 | border-radius: 8px; 182 | background-color: rgb(var(--accent-2), .3); 183 | } -------------------------------------------------------------------------------- /src/css/steam/gamepage.css: -------------------------------------------------------------------------------- 1 | /* 2 | & Gamepage 3 | */ 4 | 5 | ._3FmxxjyWNHU1PrBGnBe6tm._2l416KfEtI4CL0mCUEmOBw { 6 | overflow-y: overlay; 7 | padding: 16px 0 16px 16px; 8 | background-image: none; 9 | background-color: rgb(var(--color-1)); 10 | } 11 | 12 | ._2OOzYVWIHaKXm6_7sscT9i ._1Qa-Aq8WFiF9584yU_1xuC { 13 | display: none; 14 | } 15 | 16 | 17 | 18 | /* 19 | & Gamepage Banner 20 | */ 21 | .NZMJ6g2iVnFsOOp-lDmIP { 22 | overflow: hidden !important; 23 | max-height: 420px !important; 24 | margin-bottom: 12px; 25 | } 26 | ._1IX7FPSY9Jb82KhBVBSkZa { 27 | max-height: 420px !important; 28 | transform: none !important; 29 | } 30 | 31 | .QlR9EFwTdUNm_J5vx54_Z { 32 | overflow: hidden; 33 | height: 100%; 34 | border-radius: 8px; 35 | } 36 | .HNbe3eZf6H7dtJ042x1vM { 37 | width: 100%; 38 | max-width: unset; 39 | mask-image: none; 40 | -webkit-mask-image: none; 41 | } 42 | 43 | .HNbe3eZf6H7dtJ042x1vM._3_IUVzR9tpG_JKEjhwXEAb, 44 | .HNbe3eZf6H7dtJ042x1vM.HSQWw9HUAP6jtA2OZjS-u { 45 | display: none; 46 | } 47 | 48 | 49 | 50 | /* 51 | ! Demo Tag 52 | */ 53 | ._3EXklzsbt_QeypOM4_vp1K { 54 | padding: 12px calc(var(--banner-top-offset)* sqrt(2)); 55 | font-size: 22px; 56 | font-weight: 900; 57 | letter-spacing: 6px; 58 | background-color: rgb(var(--green)); 59 | box-shadow: 0px 0px 16px 0px rgb(0, 0, 0); 60 | } 61 | 62 | 63 | /* 64 | ! Logo align 65 | */ 66 | 67 | 68 | 69 | /* 70 | ! Collection tags 71 | */ 72 | ._2b6WkTnmJxMuX1biL7aS3C { 73 | overflow: visible; 74 | gap: 6px; 75 | max-width: 50%; 76 | } 77 | 78 | ._1HS4twEHtDJ_8MWgJT4VBd { 79 | margin: 0; 80 | padding: 6px 12px; 81 | border-radius: 8px; 82 | background-color: rgb(var(--color-1), .65); 83 | /*backdrop-filter: blur(4px);*/ 84 | box-shadow: 0px 4px 8px 0px rgb(0 0 0 / 50%); 85 | } 86 | ._1HS4twEHtDJ_8MWgJT4VBd:hover { 87 | background-color: rgb(var(--color-2), .65); 88 | } 89 | 90 | 91 | 92 | /* 93 | ! Text Logo 94 | */ 95 | ._30acA_E0q_GuOxBqxgDJj4 { 96 | align-items: flex-end; 97 | } 98 | 99 | 100 | ._30acA_E0q_GuOxBqxgDJj4 ._3sUYxfgWcbeGFzYMkx1YDG { 101 | padding: 22px; 102 | } 103 | 104 | 105 | 106 | /* 107 | ! VR required tag 108 | */ 109 | ._30acA_E0q_GuOxBqxgDJj4 { 110 | padding: 0; 111 | } 112 | 113 | ._30acA_E0q_GuOxBqxgDJj4 .fqwOycZBL_zQfcUiVVWyz { 114 | height: -webkit-fill-available; 115 | padding: 16px; 116 | } 117 | 118 | ._30acA_E0q_GuOxBqxgDJj4 ._3STfNQAZpe1U2ToD52S4dU { 119 | height: unset; 120 | margin: 0; 121 | padding: 12px; 122 | outline: 2px solid rgb(var(--yellow)); 123 | border-radius: 8px; 124 | background-color: rgb(var(--color-1), .6); 125 | box-shadow: 0px 4px 8px 0px rgba(var(--background), 0.5); 126 | } 127 | 128 | /* Icon */ 129 | ._30acA_E0q_GuOxBqxgDJj4 .lKkF8MY2dBQlRkaHwjbqW { 130 | display: none; 131 | } 132 | 133 | /* Text */ 134 | ._30acA_E0q_GuOxBqxgDJj4 ._1t7927CfvHZSxoXBLDiDaR { 135 | padding: 0; 136 | font-weight: 900; 137 | letter-spacing: .6px; 138 | text-transform: uppercase; 139 | color: rgb(var(--red)); 140 | background: unset; 141 | box-shadow: unset; 142 | text-shadow: unset; 143 | } 144 | 145 | 146 | 147 | /* 148 | ! Info tags 149 | */ 150 | /*! adding soon 151 | ._30acA_E0q_GuOxBqxgDJj4 .nkIX48cHLbjc0eaP5CNmM._1uS70KI6ZbUE94jUB27ioB { 152 | position: relative; 153 | display: flex; 154 | padding: 12px; 155 | border-radius: 8px; 156 | background-color: rgb(var(--color-1), .6); 157 | box-shadow: 0px 4px 8px 0px rgba(var(--background), 0.5); 158 | } 159 | 160 | 161 | ._30acA_E0q_GuOxBqxgDJj4 .nkIX48cHLbjc0eaP5CNmM._1uS70KI6ZbUE94jUB27ioB ._1SIa8xLHqCJGyeA9sQ4yK_ ._1VoVzLPXjhlaguJLgO8htG { 162 | position: absolute; 163 | top: -50px; 164 | left: 50%; 165 | padding: 6px 12px; 166 | border-radius: 8px; 167 | background: rgb(var(--color-1), .6); 168 | transform: translateX(-50%); 169 | opacity: 0; 170 | } 171 | ._30acA_E0q_GuOxBqxgDJj4 .nkIX48cHLbjc0eaP5CNmM._1uS70KI6ZbUE94jUB27ioB ._1SIa8xLHqCJGyeA9sQ4yK_:hover ._1VoVzLPXjhlaguJLgO8htG { 172 | opacity: 1; 173 | } 174 | */ 175 | 176 | 177 | 178 | /* 179 | & Gamepage info bar 180 | */ 181 | 182 | /* 183 | ! Better Sticky info bar 184 | */ 185 | ._2L3s2nzh7yCnNESfI5_dN1.jnXtv79jL6SXXwlJYPtQz { 186 | z-index: -999; 187 | opacity: 0; 188 | } 189 | 190 | ._3Yf8b2v5oOD8Wqsxu04ar._1U7LKpx70kEsz3jJwAFOi- { 191 | border-radius: 8px; 192 | } 193 | ._3Yf8b2v5oOD8Wqsxu04ar._1U7LKpx70kEsz3jJwAFOi-._3SSPIdErMyF10Bul9E0qhX { 194 | opacity: 1; 195 | z-index: 2; 196 | position: sticky; 197 | box-shadow: 0px 0px 16px 0px rgb(0, 0, 0); 198 | } 199 | 200 | ._2_86QNCjVvJTL3Qe6Xztx_._2sKVnd_AUg44QSdoAp8Lne { 201 | opacity: 0; 202 | } 203 | 204 | 205 | ._39RheXihcN6H2k2muQTjkI ._1YbtIWcfkQJOysLXQbwzRf { 206 | flex-wrap: wrap; 207 | height: unset; 208 | } 209 | 210 | ._39RheXihcN6H2k2muQTjkI ._1YbtIWcfkQJOysLXQbwzRf ._2MBVRXpsw6DUjs7937DWZW { 211 | opacity: 0; 212 | } 213 | 214 | ._39RheXihcN6H2k2muQTjkI ._1YbtIWcfkQJOysLXQbwzRf .zjtAIAWI6HE0oCtJzw6Qt { 215 | min-width: unset; 216 | } 217 | 218 | ._39RheXihcN6H2k2muQTjkI ._1YbtIWcfkQJOysLXQbwzRf ._1mDAVT4sTzFRwJtlKCw2Ws { 219 | opacity: 1; 220 | width: unset; 221 | transform: unset; 222 | } 223 | 224 | ._39RheXihcN6H2k2muQTjkI ._34lrt5-Fc3usZU6trA1P0- { 225 | font-size: 14px; 226 | line-height: 16px; 227 | } 228 | ._39RheXihcN6H2k2muQTjkI ._2TYVGoD27ZMfjRirKQNLfk { 229 | font-size: 13px; 230 | } 231 | ._39RheXihcN6H2k2muQTjkI ._25YVDTaClw6Y2COPsU0UaV { 232 | height: 4px; 233 | border-radius: 3px; 234 | } 235 | 236 | 237 | 238 | ._3DeO92O5aVkcdwEBCJDjWm._3fLo166MlaNqP8r8tTyRz { 239 | background: unset !important; 240 | margin-bottom: 0; 241 | } 242 | 243 | ._3Y87YQY56ZCOqhgcZFaDc5 { 244 | padding: 12px; 245 | border-radius: 8px; 246 | background-color: rgb(var(--color-2)); 247 | } 248 | 249 | 250 | /* 251 | ! Play/Install/... button 252 | */ 253 | ._1FnJ6dPuknQFQ2RTpKTI16 { 254 | gap: 6px; 255 | min-width: unset !important; 256 | } 257 | 258 | ._3ydigb6zZAjJ0JCDgHwSYA._2AzIX5kl9k6JnxLfR5H4kX { 259 | min-width: 180px; 260 | gap: 6px; 261 | justify-content: flex-start; 262 | padding: 12px 16px; 263 | border-radius: 8px; 264 | background: unset; 265 | background-color: #4B89EF; 266 | } 267 | ._3ydigb6zZAjJ0JCDgHwSYA._2AzIX5kl9k6JnxLfR5H4kX:hover { 268 | background: unset; 269 | background-color: #649af2; 270 | } 271 | ._3ydigb6zZAjJ0JCDgHwSYA._2AzIX5kl9k6JnxLfR5H4kX:has(.SVGIcon_Play) { 272 | background-color: #23A559; 273 | } 274 | ._3ydigb6zZAjJ0JCDgHwSYA._2AzIX5kl9k6JnxLfR5H4kX:has(.SVGIcon_Play):hover { 275 | background: none !important; 276 | background-color: #27b964 !important; 277 | } 278 | ._3ydigb6zZAjJ0JCDgHwSYA._2AzIX5kl9k6JnxLfR5H4kX:has(.SVGIcon_Trash) { 279 | background-color: #EF4B4B; 280 | } 281 | ._3ydigb6zZAjJ0JCDgHwSYA._2AzIX5kl9k6JnxLfR5H4kX:has(.SVGIcon_Trash):hover { 282 | background-color: #f26464; 283 | } 284 | 285 | ._3ydigb6zZAjJ0JCDgHwSYA._2AzIX5kl9k6JnxLfR5H4kX svg { 286 | width: 22px; 287 | height: 22px; 288 | margin: 0; 289 | color: #fff !important; 290 | fill: #fff !important; 291 | } 292 | 293 | ._3ydigb6zZAjJ0JCDgHwSYA._2AzIX5kl9k6JnxLfR5H4kX ._33cnXIqTRgRr49_FNXIHj6 { 294 | font-weight: 500; 295 | line-height: 20px; 296 | letter-spacing: 0; 297 | } 298 | 299 | 300 | ._2AzIX5kl9k6JnxLfR5H4kX._2q-gZ3XJzlvSGHSF-GvSmi { 301 | margin: 0; 302 | border-radius: 8px; 303 | background: unset; 304 | background-color: #4B89EF; 305 | } 306 | ._2AzIX5kl9k6JnxLfR5H4kX._2q-gZ3XJzlvSGHSF-GvSmi:hover { 307 | background: unset; 308 | background-color: #649af2; 309 | } 310 | ._1FnJ6dPuknQFQ2RTpKTI16:has(.SVGIcon_Play) ._2AzIX5kl9k6JnxLfR5H4kX._2q-gZ3XJzlvSGHSF-GvSmi { 311 | background: none; 312 | background-color: #23A559; 313 | } 314 | ._1FnJ6dPuknQFQ2RTpKTI16:has(.SVGIcon_Play) ._2AzIX5kl9k6JnxLfR5H4kX._2q-gZ3XJzlvSGHSF-GvSmi:hover { 315 | background-color: #27b964; 316 | } 317 | ._1FnJ6dPuknQFQ2RTpKTI16:has(.SVGIcon_Trash) ._2AzIX5kl9k6JnxLfR5H4kX._2q-gZ3XJzlvSGHSF-GvSmi { 318 | background-color: #EF4B4B; 319 | } 320 | ._1FnJ6dPuknQFQ2RTpKTI16:has(.SVGIcon_Trash) ._2AzIX5kl9k6JnxLfR5H4kX._2q-gZ3XJzlvSGHSF-GvSmi:hover { 321 | background-color: #f26464; 322 | } 323 | 324 | 325 | /* 326 | ! Achievements progressbar 327 | */ 328 | ._25YVDTaClw6Y2COPsU0UaV { 329 | background-color: rgb(var(--background)); 330 | } 331 | 332 | ._25YVDTaClw6Y2COPsU0UaV ._1FnTqlsi2_-TJf1d5apoS6 { 333 | background-color: rgb(var(--accent-1)); 334 | } 335 | 336 | 337 | /* 338 | ! Settings/Info/Favorites buttons 339 | */ 340 | .lO1IF132jJ1gc9yz2HYvV { 341 | gap: 6px; 342 | } 343 | 344 | .lO1IF132jJ1gc9yz2HYvV ._3qDWQGB0rtwM3qpXTb11Q- { 345 | margin: 0; 346 | padding: 6px; 347 | border-radius: 8px; 348 | background-color: rgb(var(--color-1)); 349 | } 350 | .lO1IF132jJ1gc9yz2HYvV ._3qDWQGB0rtwM3qpXTb11Q-:hover { 351 | background-color: rgb(var(--color-3)); 352 | } 353 | 354 | 355 | 356 | /* 357 | & Gamepage game info box 358 | */ 359 | ._2QAgOXmzdXYGH8vI6S2sHw._25oBZpa3dUcMw8QAsa2u67 { 360 | z-index: 1; 361 | padding: 0; 362 | border-radius: 8px; 363 | background-color: rgb(var(--color-2)); 364 | } 365 | ._2QAgOXmzdXYGH8vI6S2sHw._25oBZpa3dUcMw8QAsa2u67:not([style*="height: 0px;"]) { 366 | height: unset !important; 367 | margin: 6px 0 0; 368 | } 369 | 370 | ._2jPMy2QZr8bWi6yrk5ZzHA { 371 | background-color: unset; 372 | transform: scale(1) !important; 373 | } 374 | 375 | ._25oBZpa3dUcMw8QAsa2u67 ._1FXWy2UilVZIppT-PetDWw { 376 | display: none; 377 | } 378 | 379 | ._2jPMy2QZr8bWi6yrk5ZzHA ._37mmOlZM_8n5yJAG5CHiW7 { 380 | padding: 12px; 381 | gap: 12px; 382 | border-radius: 8px; 383 | } 384 | 385 | 386 | ._2jPMy2QZr8bWi6yrk5ZzHA ._1uS70KI6ZbUE94jUB27ioB { 387 | padding: 6px 0; 388 | } 389 | 390 | 391 | /* Portrait */ 392 | ._1Id6ZFEUVa5PKEMIvSg4nE { 393 | border-radius: 8px; 394 | border: none; 395 | } 396 | 397 | ._3JzkHhrsBKThuVrwsu3Q7T._3JzkHhrsBKThuVrwsu3Q7T { 398 | border-radius: 8px; 399 | } 400 | 401 | 402 | /* Steam Play/Proton message */ 403 | ._2UN73dmbVcWzIR2ZCr8KID { 404 | margin: 0; 405 | padding: 12px; 406 | } 407 | 408 | 409 | 410 | /* 411 | ! Gamepage game links bar 412 | */ /*todo: add comments*/ 413 | ._2r4TK4BAuU-J4FuF_O7v_5 { 414 | z-index: unset !important; 415 | padding: 0; 416 | } 417 | 418 | ._3-V8vjmrwuJM6Ws3tsjFJj>div { 419 | margin: 6px 0 16px; 420 | border-image: none !important; 421 | border-radius: 8px; 422 | background: none !important; 423 | background-color: rgb(var(--color-2)) !important; 424 | } 425 | 426 | ._3-V8vjmrwuJM6Ws3tsjFJj ._25f0fX6qbgdB7O_lMrbhCN { 427 | padding: 6px 12px; 428 | } 429 | 430 | ._3-V8vjmrwuJM6Ws3tsjFJj .DgVQapkBmhAW6oPY5rPZo { 431 | display: flex; 432 | height: unset !important; 433 | } 434 | 435 | 436 | ._7k4qmaN8SUMvv6u-L81uk { 437 | position: unset; 438 | margin-right: 6px; 439 | padding: 0; 440 | } 441 | 442 | .DY4_wSF8h9T5o46hO5I9V ._1b6LYWVijW-9E4YV0keDWZ { 443 | padding: 6px 12px; 444 | border-radius: 8px; 445 | background-color: rgb(var(--color-4)); 446 | } 447 | .DY4_wSF8h9T5o46hO5I9V ._1b6LYWVijW-9E4YV0keDWZ:hover { 448 | background-color: rgb(var(--color-3)); 449 | } 450 | 451 | ._1bIMOmWaxKrMdVMWU21ku { 452 | position: absolute; 453 | right: 0; 454 | } 455 | 456 | 457 | /* 458 | ! Gamepage main 459 | */ 460 | ._27RcNu8aXKBpYkHcNNrt-X .OhSdLYuggDtBcWjYP0j_9 { 461 | padding: 0; 462 | } 463 | 464 | 465 | 466 | /* 467 | & Recommend & post-game summary 468 | */ 469 | ._27RcNu8aXKBpYkHcNNrt-X ._11kuVRYZvWXn-3rBJ_6yL8 { 470 | display: flex !important; 471 | flex-direction: column; 472 | gap: 12px; 473 | width: unset !important; 474 | padding: 0 !important; 475 | } 476 | ._27RcNu8aXKBpYkHcNNrt-X ._11kuVRYZvWXn-3rBJ_6yL8:has(div) { 477 | margin-bottom: 16px; 478 | } 479 | ._27RcNu8aXKBpYkHcNNrt-X ._11kuVRYZvWXn-3rBJ_6yL8>div:last-child { 480 | margin: 0; 481 | } 482 | 483 | 484 | 485 | /* 486 | ! Recommend 487 | */ /*todo: add comments*/ 488 | ._3LE-6w1ItIAB4CKJFCa3Od { 489 | padding: 16px; 490 | border-radius: 8px; 491 | background: linear-gradient(45deg,rgba(var(--accent-1),0)0%,rgba(var(--accent-1),.15)100%),linear-gradient(225deg,rgba(var(--accent-2),0)0%,rgba(var(--accent-2),.15)100%),rgb(var(--color-2)); 492 | } 493 | ._3LE-6w1ItIAB4CKJFCa3Od ._2z8Na_s9JosX48wHF4HPiA { 494 | width: unset; 495 | } 496 | ._2SAb6geDpe6toA1GaP0GjH { 497 | display: flex; 498 | margin: 0; 499 | padding: 0; 500 | background-color: unset; 501 | align-items: center; 502 | } 503 | 504 | 505 | 506 | ._2SAb6geDpe6toA1GaP0GjH ._2aeAnRfwltWfd9Hb9M_1uE .qX4kNo6O0M-mYntdErKSJ { 507 | font-weight: 700; 508 | color: rgb(var(--accent-1)); 509 | } 510 | 511 | ._2SAb6geDpe6toA1GaP0GjH ._2aeAnRfwltWfd9Hb9M_1uE .My1beniJXh9pXud8rxYLK { 512 | font-weight: 400; 513 | } 514 | 515 | 516 | ._1E6Ivnp3A4apXqQYtlQHEc { 517 | display: flex; 518 | gap: 6px; 519 | } 520 | 521 | ._1kCN0pAntrcGCSmcc-vYdk { 522 | margin: 0; 523 | padding: 6px 16px; 524 | border-radius: 8px; 525 | color: rgb(var(--accent-1)); 526 | background-color: rgba(var(--accent-1), .2); 527 | } 528 | ._1kCN0pAntrcGCSmcc-vYdk:not(.Z3L6KGVxi4ZjGUzbYUjBC):hover { 529 | color: rgb(var(--accent-2)) !important; 530 | background: none; 531 | background-color: rgba(var(--accent-1), .2); 532 | } 533 | 534 | ._1kCN0pAntrcGCSmcc-vYdk span { 535 | display: none; 536 | } 537 | ._1kCN0pAntrcGCSmcc-vYdk._2bF4k-NqETM87LmHPN-Jp3 span { 538 | display: block; 539 | } 540 | 541 | ._1kCN0pAntrcGCSmcc-vYdk ._2Jkk-4RGWzhce22lSnA9Em { 542 | position: unset; 543 | display: block; 544 | height: 22px; 545 | fill: rgb(var(--accent-1)); 546 | transform: scale(1.4); 547 | } 548 | ._1kCN0pAntrcGCSmcc-vYdk:not(.Z3L6KGVxi4ZjGUzbYUjBC):hover ._2Jkk-4RGWzhce22lSnA9Em { 549 | fill: rgb(var(--accent-2)); 550 | } 551 | ._1kCN0pAntrcGCSmcc-vYdk ._2Jkk-4RGWzhce22lSnA9Em._32G01cdyGED_NiCadEgWAL { 552 | transform: rotate(180deg) scale(1.4); 553 | } 554 | 555 | /*._1kCN0pAntrcGCSmcc-vYdk._2bF4k-NqETM87LmHPN-Jp3::before { 556 | content: ""; 557 | display: block; 558 | width: 16px; 559 | height: 22px; 560 | background: url("src/icons/xmark.svg") no-repeat; 561 | }*/ 562 | 563 | 564 | 565 | /* 566 | ! Summary 567 | */ 568 | ._1OMmVJHDgNwOt0Wqn0hrf9 { 569 | width: auto !important; 570 | margin: 0 !important; 571 | padding: 12px; 572 | border-radius: 8px; 573 | background-color: rgb(var(--color-2)); 574 | } 575 | 576 | 577 | /*? IDK xd */ 578 | ._2pAbUZVnG9Q1TYOfdvFmtX { 579 | margin-bottom: 6px; 580 | padding: 0 !important; 581 | } 582 | 583 | 584 | /* Topbar */ 585 | ._2o5c89vAnrXN8C60QTSMqO { 586 | margin-bottom: 6px; 587 | padding: 0 !important; 588 | } 589 | .P_gQ8X-yCsgXeXpP68KS0 { 590 | line-height: unset ; 591 | } 592 | 593 | 594 | /*? IDK xd */ 595 | ._2K2No5eH-XS6QwrXUtzo2x { 596 | margin-left: 12px; 597 | } 598 | 599 | 600 | /* Content Container */ 601 | ._2MKO5j24KqDdD-92hH5FXi { 602 | height: unset !important; 603 | padding: 0; 604 | background: none; 605 | } 606 | ._2MKO5j24KqDdD-92hH5FXi:after { 607 | display: none; 608 | } 609 | 610 | /* Day Containers */ 611 | ._1iO7MC6rgUjbDf49AE6hCm { 612 | height: unset !important; 613 | padding: 12px; 614 | border-radius: 8px; 615 | background-color: rgb(var(--color-1)); 616 | } 617 | ._1iO7MC6rgUjbDf49AE6hCm:first-child { 618 | margin: 0; 619 | } 620 | 621 | /* Date Title */ 622 | ._3ugJ_KPVlOd9oeYm-fYC_w { 623 | font-weight: 500; 624 | text-transform: uppercase; 625 | color: #94a1a6; 626 | } 627 | 628 | /* Achievements */ 629 | ._1r3z58m4uvAtp2Nfee0kDg { 630 | margin: 0; 631 | } 632 | 633 | /* Screenshots */ 634 | ._3OGeKUgr_1EvormVh8S7uH ._22q2XMkRbHZD96i_GXOaHh { 635 | box-shadow: none; 636 | } 637 | ._3OGeKUgr_1EvormVh8S7uH ._22q2XMkRbHZD96i_GXOaHh img { 638 | border-radius: 8px; 639 | } 640 | 641 | /* Dot Divider */ 642 | ._1ms0i1dxwTqiqcXV59nenw { 643 | width: 0; 644 | height: 0; 645 | margin: 0 !important; 646 | margin-left: 6px !important; 647 | } 648 | 649 | /* Divider */ 650 | ._284XbL-B7aHiK4XgyI2DPS { 651 | width: 3px; 652 | margin: 24px 6px; 653 | border-radius: 8px; 654 | background-color: rgb(var(--background)); 655 | } 656 | 657 | 658 | 659 | /* 660 | ! Check out the full game 661 | */ 662 | ._11kuVRYZvWXn-3rBJ_6yL8._3wbndu1paxHkciYr4rFJH5 .xYbDdgox9mzrraWWYN3_- { 663 | flex-direction: unset; 664 | padding: 12px; 665 | border-radius: 8px; 666 | background: unset; 667 | background-color: rgb(var(--color-2)); 668 | } 669 | 670 | 671 | /* Content */ 672 | ._11kuVRYZvWXn-3rBJ_6yL8._3wbndu1paxHkciYr4rFJH5 .xYbDdgox9mzrraWWYN3_- ._1AazHUNJbyL5SIWE5jC4Tz { 673 | position: relative; 674 | display: flex; 675 | padding: 0 12px; 676 | flex-direction: column; 677 | } 678 | 679 | 680 | /* Button */ 681 | ._11kuVRYZvWXn-3rBJ_6yL8._3wbndu1paxHkciYr4rFJH5 .xYbDdgox9mzrraWWYN3_- ._3f3yVG8Ru4B_jb4FbJ1l-i { 682 | padding-top: 12px; 683 | } 684 | 685 | ._11kuVRYZvWXn-3rBJ_6yL8._3wbndu1paxHkciYr4rFJH5 .xYbDdgox9mzrraWWYN3_- ._3f3yVG8Ru4B_jb4FbJ1l-i ._3SdsgvPAsO-ewAaupsOhHy { 686 | margin: 0; 687 | padding: 0 16px; 688 | } 689 | 690 | 691 | 692 | /* 693 | & Gamepage main list 694 | */ 695 | 696 | ._3yTl3RiWfo-Itg-xp967wP { 697 | max-width: 67%; 698 | } 699 | 700 | 701 | ._3yTl3RiWfo-Itg-xp967wP ._31ptFGGMZrSQc5BCX1e5lm { 702 | margin: 6px 0 0; 703 | } 704 | 705 | /* 706 | ! Cards 707 | */ 708 | .S2Fu9HxHCA5MaCLGrN2ib { 709 | margin-bottom: 12px; 710 | padding: 12px; 711 | border: none; 712 | border-radius: 8px; 713 | background-color: rgb(var(--color-2)); 714 | } 715 | 716 | .S2Fu9HxHCA5MaCLGrN2ib>div:not(._19LfMT7PFWg2xHOqNjR99q) { 717 | display: flex; 718 | flex-direction: column; 719 | gap: 12px; 720 | } 721 | 722 | /* Date divider */ 723 | .S2Fu9HxHCA5MaCLGrN2ib ._19LfMT7PFWg2xHOqNjR99q ._3pcPRPvuGH7hEM33zLknZO { 724 | display: none; 725 | } 726 | 727 | 728 | /* Update/News card */ 729 | .UVeN0kaD3zv1feMj_mMw5 ._1WdC0YUP8FT0dYWZ-QIVZL { 730 | margin: 0; 731 | padding: 0 0 6px; 732 | line-height: unset; 733 | background: unset; 734 | } 735 | 736 | .UVeN0kaD3zv1feMj_mMw5 .UVeN0kaD3zv1feMj_mMw5 { 737 | padding: 12px; 738 | border: none; 739 | border-radius: 8px; 740 | background: none; 741 | background-color: rgb(var(--color-1)); 742 | transition: background-color 0.2s; 743 | } 744 | .UVeN0kaD3zv1feMj_mMw5 .UVeN0kaD3zv1feMj_mMw5:hover { 745 | background-color: rgb(var(--color-3)); 746 | } 747 | .UVeN0kaD3zv1feMj_mMw5._39Zk32AvV5cr6g-83IVRVS { 748 | background-color: #199fff33; 749 | } 750 | .UVeN0kaD3zv1feMj_mMw5._39Zk32AvV5cr6g-83IVRVS:hover { 751 | background-color: #199fff40; 752 | } 753 | 754 | ._3oMUSjOFNB0E9LWcL2sE7 { 755 | display: none; 756 | } 757 | 758 | ._2gv3EsHSu5dMQyMqaz-W9t, 759 | ._1wJJQwnV-ssGrL0xveFujy { 760 | padding: 0; 761 | } 762 | 763 | 764 | /* Update/News card background gradient/image */ 765 | ._1HZy7BvOZuPT8feUwadL4W, 766 | .LibriMVXcLl1HB60ZUp78 { 767 | background: none !important; 768 | } 769 | .fGDsmh9vz8h0RMEoRoAvF._3cX_vEKsN9S9EmR0O5w1Ol { 770 | display: none; 771 | } 772 | 773 | /* Update/News card icon */ 774 | ._1-llQnFWxBo1kyWdkDFyXp { 775 | width: 42px; 776 | height: 42px; 777 | margin: 0 12px 0 0; 778 | } 779 | 780 | /* Update/News card image */ 781 | .ddB5GVHCwLezhshXUMCNL, 782 | ._1XpBItdUymdlwPZzvvOnyW { 783 | margin-right: 12px; 784 | padding: 0; 785 | } 786 | .VytJzt3Z_t6332-n24Yrc, 787 | .fGDsmh9vz8h0RMEoRoAvF { 788 | border-radius: 8px; 789 | } 790 | .fGDsmh9vz8h0RMEoRoAvF { 791 | max-width: unset; 792 | } 793 | 794 | /* Update/News card text */ 795 | ._2HzKE96Sc4z6KHN68gr4DS { 796 | margin: 0; 797 | } 798 | 799 | 800 | /* Card activity footer */ 801 | ._1yWgPveQ73QeYCdLcs6oFQ, 802 | .EhWKRN0QCGwfB7zcx7DwQ { 803 | opacity: 1; 804 | margin: 6px 0 0; 805 | } 806 | 807 | 808 | 809 | /* 810 | & Gamepage sidebar base 811 | */ 812 | 813 | ._27RcNu8aXKBpYkHcNNrt-X ._2aor4XVOYzN1PBSREk0UbO { 814 | margin-left: 16px; 815 | } 816 | 817 | /* 818 | ! Base card 819 | */ 820 | ._31ptFGGMZrSQc5BCX1e5lm._2G5B7o_YoI__u11--EFjal._3KfxIwlXEvum7FCD_AM2_t { 821 | display: flex; 822 | flex-direction: column; 823 | margin: 6px 0 0; 824 | border-image: none; 825 | border-radius: 8px; 826 | background-image: none; 827 | background-color: rgb(var(--color-2)); 828 | } 829 | 830 | /* Card header */ 831 | ._38t1mljBjmJfqjpVzMT1CG { 832 | margin: 12px 12px 0; 833 | border-radius: 8px; 834 | background: unset; 835 | background-color: rgb(var(--color-1)); 836 | } 837 | 838 | /* Card content base */ 839 | ._31ptFGGMZrSQc5BCX1e5lm._2G5B7o_YoI__u11--EFjal._3KfxIwlXEvum7FCD_AM2_t ._5uvIN6jXDXzzck59F-nhv { 840 | padding: 12px; 841 | } 842 | 843 | 844 | /* 845 | ! Achievements 846 | */ 847 | /* 100% Star */ 848 | ._2YS0EBJmY2Rvs07zZ90UIJ svg { 849 | width: 42px; 850 | height: 42px; 851 | left: 4px; 852 | top: 6px; 853 | } 854 | ._2YS0EBJmY2Rvs07zZ90UIJ svg path { 855 | stroke: unset; 856 | fill: rgb(var(--accent-1), .7); 857 | d: path("M4.14 11.85L4.46 11.53L4.46 11.07L4.46 5.15L10.37 5.15L10.84 5.15L11.18 4.81L16 0L20.81 4.81L21.15 5.15L21.62 5.15L27.53 5.15L27.53 11.07L27.53 11.53L27.85 11.85L32 16L27.85 20.14L27.53 20.46L27.53 20.92L27.53 26.84L21.62 26.84L21.15 26.84L20.81 27.18L16 32L11.18 27.18L10.84 26.84L10.37 26.84L4.46 26.84L4.46 20.92L4.46 20.46L4.14 20.14L0 16L4.14 11.85Z"); 858 | } 859 | ._2YS0EBJmY2Rvs07zZ90UIJ svg circle { 860 | cx: 16; 861 | cy: 16; 862 | r: 6; 863 | stroke: unset; 864 | fill: rgb(var(--accent-2)); 865 | } 866 | 867 | /* Progressbar */ 868 | ._3ns9185LizH61StaAXuAp6 { 869 | height: 6px; 870 | margin: 6px 0 0; 871 | border-radius: 8px; 872 | background-color: rgb(var(--background)); 873 | } 874 | 875 | ._3ns9185LizH61StaAXuAp6 ._3Rm36_oeAhvIg6ZYP9l1Jj { 876 | border-radius: 8px; 877 | background-color: rgb(var(--accent-1)); 878 | } 879 | 880 | /* More */ 881 | ._2aVnDeExEHiUFX0zwr_BTO:has(._2gISWIeEzZ9PNuAzVuMaWd) { 882 | border-radius: 8px; 883 | background-color: rgb(var(--color-1)); 884 | } 885 | 886 | /* Divider */ 887 | ._3ca11X3AK6npLS3emMa5Lr._3i6PczGBBYzCDZXkCDbJAD { 888 | border: none; 889 | } 890 | 891 | 892 | /* 893 | ! Notes 894 | */ 895 | ._2L6IIbLCMWUJcOhliUVqKb { 896 | margin: 0; 897 | padding: 12px; 898 | border-radius: 8px; 899 | background-color: rgb(var(--color-4)); 900 | } 901 | ._2L6IIbLCMWUJcOhliUVqKb:not(:first-child) { 902 | margin-top: 6px; 903 | } 904 | 905 | 906 | /* 907 | ! Trading Cards 908 | */ 909 | /* Header */ 910 | .RPcyJMJC7chgPFkD4KWtO { 911 | width: 42px; 912 | height: 42px; 913 | margin: 6px 12px 6px 6px; 914 | } 915 | .RPcyJMJC7chgPFkD4KWtO._2feGA5T49Nk1_dTnwfOnL { 916 | border-radius: 50%; 917 | border: 4px dashed rgb(var(--color-2)); 918 | } 919 | 920 | /* Card grid */ 921 | ._21DlIyo8Kp99Kz3KmWiFno { 922 | gap: 6px; 923 | margin: 0; 924 | } 925 | 926 | /* Cards */ 927 | ._1WsOngnf2RD4f5N-38rPLZ { 928 | margin: 0; 929 | } 930 | 931 | ._1WsOngnf2RD4f5N-38rPLZ ._2DUDvAhXoEOSsd8GTIsKLY { 932 | border: none !important; 933 | border-radius: 8px !important; 934 | background-color: rgb(var(--color-2)) !important; 935 | } 936 | 937 | 938 | /* 939 | ! Steam Workshop 940 | */ 941 | /* Image */ 942 | ._1W34WpqfvufNgueNdZozwC { 943 | align-items: start; 944 | } 945 | 946 | /* Footer */ 947 | ._176QJCynkEUSdR_-9btdAW { 948 | padding-top: 0 !important; 949 | background: none; 950 | } 951 | 952 | 953 | /* 954 | ! Screenshots 955 | */ 956 | ._2_TE0KLOU7kWWxa9LS7iXA ._2fgcqIGs6BXH_KJiTLhJX5 { 957 | gap: 6px; 958 | margin: 0; 959 | } 960 | 961 | ._2_TE0KLOU7kWWxa9LS7iXA ._2B8NkDc3EmF3XM6hl1qpQ8, 962 | ._2_TE0KLOU7kWWxa9LS7iXA ._2B8NkDc3EmF3XM6hl1qpQ8 ._21yM8Jxi06nOAC-Lr1vfOh { 963 | border-radius: 8px; 964 | } 965 | 966 | 967 | /* 968 | ! My Review 969 | */ 970 | /* Header */ 971 | ._1izIEyRuLgphVa7NKAGtIb { 972 | margin-right: 12px; 973 | border-radius: 8px; 974 | } 975 | 976 | .BDa6lbTAdR4RwtqgRNUnO { 977 | padding: 0; 978 | } 979 | 980 | /* Likes & Comments */ 981 | ._2Z3ghRCL5qh2cqXrrd9l8Z { 982 | gap: 6px; 983 | flex-flow: unset; 984 | justify-content: flex-end; 985 | padding-right: 12px; 986 | } 987 | 988 | ._2Z3ghRCL5qh2cqXrrd9l8Z ._17u7kJzj4gno8unUOzRaz- ._2cFKqVak8vsZdvk9mKdum_, 989 | ._2Z3ghRCL5qh2cqXrrd9l8Z ._17u7kJzj4gno8unUOzRaz- .szq-QUt-0soxUfoD65BC7 { 990 | margin: 0; 991 | padding: 0; 992 | } 993 | 994 | ._2Z3ghRCL5qh2cqXrrd9l8Z ._17u7kJzj4gno8unUOzRaz- ._2EyEa4GxazAthx5c83AUGO { 995 | display: none; 996 | } 997 | 998 | ._2Z3ghRCL5qh2cqXrrd9l8Z ._17u7kJzj4gno8unUOzRaz- ._2FYBwhP98BAjYNtW0mlkR7 { 999 | margin: 0; 1000 | } 1001 | 1002 | 1003 | 1004 | /* 1005 | & Community Content 1006 | */ 1007 | 1008 | /* 1009 | ! Header 1010 | */ 1011 | .A6G1leLXs7Vqw45hoXg-l ._1Q2q_tQ9_Eq8YdEHNAHS3F._3jY6xWI4URhFyYsanh9VKL { 1012 | margin: 0; 1013 | padding: 12px; 1014 | border-radius: 8px; 1015 | background: none; 1016 | background-color: rgb(var(--color-2)); 1017 | } 1018 | 1019 | /* Space between text and icon */ 1020 | ._1SQ30LQnUhED7sXI79rmas { 1021 | justify-content: space-between; 1022 | width: 100%; 1023 | } 1024 | 1025 | /* Help/Info icon */ 1026 | ._34I5HgBL6QP2CcuI4emtaM { 1027 | margin: 0; 1028 | } 1029 | 1030 | 1031 | 1032 | /* 1033 | ! Cards 1034 | */ 1035 | ._31ptFGGMZrSQc5BCX1e5lm._2G5B7o_YoI__u11--EFjal:has(._3Uy7tGY-DstlA3jV6dGEfB) { 1036 | margin: 12px 0 0; 1037 | } 1038 | 1039 | 1040 | /* Grid */ 1041 | ._1I55h8ejmOddwvE4LFbSEq._290KSp85s48oovzIXHpZ1k { 1042 | gap: 12px; 1043 | padding: 0 0 12px; 1044 | } 1045 | 1046 | 1047 | /* Main */ 1048 | ._3QS6OBHpvI5bXsSQA2zQuW { 1049 | gap: 6px; 1050 | padding: 6px; 1051 | border-radius: 8px; 1052 | background-color: rgb(var(--color-2)); 1053 | box-shadow: none; 1054 | } 1055 | 1056 | 1057 | /* Setting icon */ 1058 | .CwZqp0ZwInfY8H9jUO4Xy { 1059 | border-radius: 8px; 1060 | } 1061 | 1062 | 1063 | /* Image & Video */ 1064 | ._1aP1bu_l_kDbKMN7XDNmzg .AxZMHRu3YIxDFr0a-MP6n, 1065 | ._1aP1bu_l_kDbKMN7XDNmzg .jjN9CtYfeIJoHpKOCmKOx { 1066 | border-radius: 8px; 1067 | } 1068 | 1069 | /* Vidoe Play icon */ 1070 | .jjN9CtYfeIJoHpKOCmKOx ._2co0ek5jbAvxuML8CcgsBy { 1071 | display: none; 1072 | } 1073 | ._1aP1bu_l_kDbKMN7XDNmzg .jjN9CtYfeIJoHpKOCmKOx::after { 1074 | content: ""; 1075 | position: absolute; 1076 | top: 50%; 1077 | left: 50%; 1078 | display: block; 1079 | height: 64px; 1080 | width: 64px; 1081 | border-radius: 100%; 1082 | background: url("../../icons/play.svg") center; 1083 | background-size: cover; 1084 | box-shadow: 0 0 20px #fff; 1085 | transform: translate(-50%, -50%); 1086 | } 1087 | 1088 | /* Image & Video Disc */ 1089 | ._1aP1bu_l_kDbKMN7XDNmzg ._3uabislt81gdMksbxzc-iN { 1090 | position: unset; 1091 | padding: 0; 1092 | background: none; 1093 | box-shadow: none; 1094 | } 1095 | 1096 | ._1aP1bu_l_kDbKMN7XDNmzg .UhvgnRdPkZbRLaSD8iqLd { 1097 | margin: 0; 1098 | } 1099 | 1100 | 1101 | /* Guides */ 1102 | ._-85o5-M_cGo-fefOuWwER ._33Cd4gWWUSqwn-dCRv_9Ko { 1103 | margin: 0; 1104 | } 1105 | 1106 | ._-85o5-M_cGo-fefOuWwER ._1dJuvQ4rvlB0q8vmLJH3l2 { 1107 | padding: 6px; 1108 | border-radius: 8px; 1109 | background: none; 1110 | background-color: rgb(var(--color-1)); 1111 | } 1112 | 1113 | /* Guide Image */ 1114 | .AxZMHRu3YIxDFr0a-MP6n { 1115 | border-radius: 8px; 1116 | } 1117 | 1118 | 1119 | /* Stats */ 1120 | ._3lh8aaHNMcFvupuNhQDfFt { 1121 | order: 1; 1122 | position: unset; 1123 | flex-wrap: wrap; 1124 | gap: 6px; 1125 | transform: none; 1126 | } 1127 | ._3lh8aaHNMcFvupuNhQDfFt::before { 1128 | content: ""; 1129 | width: 100%; 1130 | height: 4px; 1131 | border-radius: 8px; 1132 | background-color: rgb(var(--color-1)); 1133 | } 1134 | 1135 | ._3lh8aaHNMcFvupuNhQDfFt ._1GfHtX6GRZ_5BukahmkQp4 { 1136 | opacity: 1; 1137 | margin: 0; 1138 | border-radius: 8px; 1139 | background-color: rgb(var(--color-1)); 1140 | transform: none; 1141 | } 1142 | 1143 | 1144 | /* User */ 1145 | ._1ul9ZRBfhF0vyj-hrit6nU { 1146 | order: 2; 1147 | padding: 6px; 1148 | border-radius: 8px; 1149 | background: none; 1150 | background-color: rgb(var(--color-1)); 1151 | } 1152 | 1153 | 1154 | 1155 | 1156 | /* 1157 | & Scroll to top 1158 | */ 1159 | div:has(>._1J21tLst5SEhBPkVRT53UV._28ZR8gHitOrJaSLxcIAl2p) { 1160 | left: unset !important; 1161 | margin: 16px 24px; 1162 | } 1163 | 1164 | ._1J21tLst5SEhBPkVRT53UV._28ZR8gHitOrJaSLxcIAl2p { 1165 | overflow: unset; 1166 | height: unset; 1167 | padding: 0; 1168 | } 1169 | 1170 | ._1J21tLst5SEhBPkVRT53UV._28ZR8gHitOrJaSLxcIAl2p div { 1171 | padding: 12px; 1172 | font-size: 0; 1173 | letter-spacing: 0; 1174 | border: 3px solid rgb(var(--blue)); 1175 | border-radius: 8px; 1176 | background: unset; 1177 | background-color: rgb(var(--color-2)); 1178 | box-shadow: 0px 4px 8px 0px rgba(var(--background), 0.5); 1179 | } -------------------------------------------------------------------------------- /src/css/steam/libHome.css: -------------------------------------------------------------------------------- 1 | /* 2 | & Game main list header 3 | */ 4 | 5 | /* 6 | ! Base 7 | */ 8 | ._2Dd4T78PcCTUVgOtDGFY5j { 9 | border-radius: 8px; 10 | background-color: transparent; 11 | } 12 | ._2Nq6ov7A1hGcHXVOXNt_OE { 13 | border-top: none; 14 | } 15 | ._2gSXCB6PbOlMxslr8hm6dm, 16 | .u1xD3KJEgksF_J_5TLZzO, 17 | ._2sNr7PFYcJZWNkEMCDVVPR { 18 | background-color: rgb(var(--color-1)); 19 | background-image: none; 20 | } 21 | ._2AUVZlzQq67qe3yhLZsPPB { 22 | overflow-y: overlay; 23 | } 24 | ._2AUVZlzQq67qe3yhLZsPPB::-webkit-scrollbar { 25 | background: transparent; 26 | } 27 | 28 | 29 | /* 30 | ! Sticky hr in collection view 31 | */ 32 | ._3bWISeqP3H2j6YJnFwVEwu:not(.E5k6bKwdV9GHvwwZHYfzA) { 33 | position: unset; 34 | } 35 | ._3bWISeqP3H2j6YJnFwVEwu::after { 36 | display: none; 37 | } 38 | 39 | 40 | /* 41 | ! Preload 42 | */ 43 | ._2Ae5emb7JLG4NvS2OmutTx { 44 | margin: 16px 16px 0; 45 | padding: 12px; 46 | border: 3px solid rgb(var(--blue)); 47 | border-radius: 8px; 48 | background: unset; 49 | background-color: rgb(var(--blue), .3); 50 | } 51 | 52 | 53 | /* Bottom shine effect */ 54 | ._2Ae5emb7JLG4NvS2OmutTx ._2K0aVYjPsk-WFUDacCkX8L { 55 | display: none; 56 | } 57 | 58 | 59 | /* Cover */ 60 | ._2Ae5emb7JLG4NvS2OmutTx ._37l5FTA5EO0ZytepF_hg2l._2G2BLAN5T5KQSgbJPU3m1v, 61 | ._2Ae5emb7JLG4NvS2OmutTx ._37l5FTA5EO0ZytepF_hg2l._2idzxhV0W7v2sGaM0tlHla { 62 | display: none; 63 | } 64 | 65 | 66 | ._2Ae5emb7JLG4NvS2OmutTx ._1moqKkq1K4nAp1XqDtnRdQ .rglD9tOi-qd15GgYT2iJK { 67 | margin: 16px; 68 | } 69 | 70 | 71 | /* Header text */ 72 | ._2Ae5emb7JLG4NvS2OmutTx ._1moqKkq1K4nAp1XqDtnRdQ .rglD9tOi-qd15GgYT2iJK ._2qOwIl4yej_1OQJ8ktG7sU { 73 | margin: 0; 74 | font-weight: 800; 75 | color: rgb(var(--blue)); 76 | } 77 | 78 | /* Disc text */ 79 | ._2Ae5emb7JLG4NvS2OmutTx ._1moqKkq1K4nAp1XqDtnRdQ .rglD9tOi-qd15GgYT2iJK ._2mJ1x_fd1_A4B3kUytjUVD { 80 | margin: 12px 0 0; 81 | } 82 | 83 | 84 | /* Buttons */ 85 | ._2Ae5emb7JLG4NvS2OmutTx ._1moqKkq1K4nAp1XqDtnRdQ .rglD9tOi-qd15GgYT2iJK .y1gug7JSW8Vst7YSxkKV- { 86 | gap: 16px; 87 | margin: auto 0 0; 88 | } 89 | 90 | ._2Ae5emb7JLG4NvS2OmutTx ._1moqKkq1K4nAp1XqDtnRdQ .rglD9tOi-qd15GgYT2iJK .y1gug7JSW8Vst7YSxkKV- .p9KmcbRBNrAiCVV-9x7FJ { 91 | margin: 0; 92 | background: unset; 93 | } 94 | ._2Ae5emb7JLG4NvS2OmutTx ._1moqKkq1K4nAp1XqDtnRdQ .rglD9tOi-qd15GgYT2iJK .y1gug7JSW8Vst7YSxkKV- .p9KmcbRBNrAiCVV-9x7FJ:hover { 95 | background: unset; 96 | } 97 | ._2Ae5emb7JLG4NvS2OmutTx ._1moqKkq1K4nAp1XqDtnRdQ .rglD9tOi-qd15GgYT2iJK .y1gug7JSW8Vst7YSxkKV- .p9KmcbRBNrAiCVV-9x7FJ:hover::before { 98 | display: none; 99 | } 100 | ._2Ae5emb7JLG4NvS2OmutTx ._1moqKkq1K4nAp1XqDtnRdQ .rglD9tOi-qd15GgYT2iJK .y1gug7JSW8Vst7YSxkKV- .p9KmcbRBNrAiCVV-9x7FJ.Secondary { 101 | background-color: rgb(var(--color-2), .4) !important; 102 | } 103 | 104 | 105 | 106 | /* 107 | ! What's new 108 | */ 109 | ._17uEBe5Ri8TMsnfELvs8-N { 110 | height: unset !important; 111 | margin: 16px 0 0 16px; 112 | padding: 16px 16px 0; 113 | border-radius: 8px; 114 | background-color: rgb(var(--color-2)); 115 | background-image: none; 116 | } 117 | 118 | ._11cYvnWDwOeGdlUpfGNlYt { 119 | margin: 0; 120 | } 121 | 122 | /* List */ 123 | ._3CJctA7pLVdwHzNF5JmORE._1urF0O1V4DZOkjI28mDvRK { 124 | gap: 12px; 125 | } 126 | 127 | /* Day text */ 128 | ._2rlKqvybYupc-uk64cdQ8D { 129 | position: absolute; 130 | top: -18px; 131 | left: 0; 132 | } 133 | 134 | /* Cards */ 135 | ._3YO5BpDmZERh_G8kaWbaSJ { 136 | overflow: unset !important; 137 | position: relative; 138 | height: auto; 139 | margin: 16px 0 !important; 140 | padding: 12px; 141 | border-radius: 8px; 142 | background-color: rgb(var(--color-1)); 143 | box-shadow: 0px 4px 8px 0px rgb(0 0 0 / 25%); 144 | transition: all 0.2s ease-in-out; 145 | } 146 | ._3YO5BpDmZERh_G8kaWbaSJ:hover { 147 | cursor: pointer; 148 | background-color: rgb(var(--color-3)); 149 | transform: scale(1.02); 150 | } 151 | 152 | /* Card hover info */ 153 | .B-vCdL38RiJlhfSRgZv78 ._3Rb_j3lgHaVVIud4Gla7_m { 154 | border-radius: 8px; 155 | } 156 | 157 | /* Card image */ 158 | .B-vCdL38RiJlhfSRgZv78 .SPz0ipLqfF1oAO7tdrkdY { 159 | margin-bottom: 3px; 160 | border-radius: 8px; 161 | } 162 | .B-vCdL38RiJlhfSRgZv78._278jFDApipeB4kFsi44_F5:hover ._1-W_ZQ4XyImc86SJFamGha, 163 | .gpfocus>.B-vCdL38RiJlhfSRgZv78._278jFDApipeB4kFsi44_F5 ._1-W_ZQ4XyImc86SJFamGha { 164 | transform: scale(1); 165 | } 166 | 167 | /* Event date */ 168 | .B-vCdL38RiJlhfSRgZv78 ._3OSZu24hLN7YKjqGi7I2Xp { 169 | width: -webkit-fill-available; 170 | margin: 6px; 171 | padding: 8px; 172 | border-radius: 8px; 173 | background-color: rgba(1, 169, 234); 174 | box-shadow: 0px 4px 8px 0px rgb(0 0 0 / 50%); 175 | } 176 | 177 | /* Card title */ 178 | .aqYQCF7Ny9x3EKcjCOTRY { 179 | margin-bottom: 38px; 180 | padding: 0; 181 | } 182 | 183 | /* Card game */ 184 | ._3_xMyCJAh_Dv99KgZ54P3j { 185 | position: absolute; 186 | bottom: 12px; 187 | margin: 0; 188 | padding: 4px 12px 4px 4px; 189 | border-radius: 4px; 190 | background-color: rgb(var(--color-2)); 191 | } 192 | ._3_xMyCJAh_Dv99KgZ54P3j:hover { 193 | background-color: rgb(var(--color-6)); 194 | } 195 | ._3tdftHFf8tvdJW34S-KwjR ._3d_bT685lnWotXxgzKW6am.yDr03475kalWBTwAE-Rnw { 196 | border-radius: 4px !important; 197 | } 198 | 199 | 200 | /* 201 | ! Add shelf 202 | */ 203 | ._3SkuN_ykQuWGF94fclHdhJ { 204 | margin: 0 !important; 205 | } 206 | ._3SkuN_ykQuWGF94fclHdhJ ._2aw5aUUo3lrK6wxJb4_ms5 { 207 | justify-content: center; 208 | opacity: 1; 209 | width: 100%; 210 | margin: 0 0 16px; 211 | padding: 8px; 212 | border-radius: 8px; 213 | background-color: rgb(var(--color-2)); 214 | } 215 | ._3SkuN_ykQuWGF94fclHdhJ ._1PhK8scyztOxjJwWUpkiLJ { 216 | display: none; 217 | } 218 | 219 | /* New shelf */ 220 | .mzPGHdgk9pc3JvhdUg0cl .UOfJ-NXoaml5lmTtRdkSo { 221 | position: unset; 222 | } 223 | 224 | 225 | 226 | /* 227 | & Game main list 228 | */ 229 | 230 | ._3Sb2o_mQ30IDRh0C72QUUu { 231 | padding: 16px 0 16px 16px; 232 | background-image: none; 233 | } 234 | 235 | ._2Z9gJ6Pd7eZn-kfODcXJuR { 236 | display: flex; 237 | flex-direction: column; 238 | gap: 16px; 239 | } 240 | 241 | 242 | /* 243 | ! Game shelf 244 | */ 245 | ._2tC_c87MH67xQM7Y0pVyXm { 246 | padding: 16px; 247 | border-radius: 8px; 248 | background-color: rgb(var(--color-2)); 249 | } 250 | ._2tC_c87MH67xQM7Y0pVyXm:has(._3VOR2AeYATx3qSE0I-Pm-5) { 251 | padding: 16px 16px 0; 252 | } 253 | 254 | .V7RuDNUxhxoBRaiGWbk3B { 255 | padding: 0; 256 | border: none; 257 | } 258 | 259 | .V7RuDNUxhxoBRaiGWbk3B ._1VMQWnw-9FBp-MVXUbWfS_ { 260 | margin: 0; 261 | } 262 | ._23SnllqT_AqZ1C_QHcNQ4Z { 263 | padding: 0; 264 | margin: 0 0 6px; 265 | border: none; 266 | } 267 | 268 | .V7RuDNUxhxoBRaiGWbk3B ._3DJLGrqzoQ5vMDI_4VG502 { 269 | padding: 6px 0 0 !important; 270 | } 271 | 272 | ._1RLnyCu6_DW-NTlpHTBhig, 273 | .DGRkX_HYUzbFaqRysWQVi { 274 | height: unset !important; 275 | margin: 0; 276 | } 277 | 278 | ._3fiHsLeD_6rtm6bM9lHlVL._3iXvgnyrIW0ldDNbrIhAyc { 279 | height: unset !important; 280 | } 281 | 282 | ._3fiHsLeD_6rtm6bM9lHlVL._1RLnyCu6_DW-NTlpHTBhig ._3CJctA7pLVdwHzNF5JmORE._1urF0O1V4DZOkjI28mDvRK, 283 | ._3fiHsLeD_6rtm6bM9lHlVL._3iXvgnyrIW0ldDNbrIhAyc ._3CJctA7pLVdwHzNF5JmORE._1urF0O1V4DZOkjI28mDvRK { 284 | padding-bottom: 16px; 285 | } 286 | 287 | 288 | /* 289 | ! Slider Shelf last item 290 | */ 291 | ._1esfEVxhqNfh8fzr_kEGKa:not(:last-child), 292 | ._2a9SnCjTTOhX5y6SfbKFkC:not(:last-child) { 293 | margin-right: 0; 294 | } 295 | 296 | 297 | 298 | /* 299 | ! Last played first game card 300 | */ 301 | ._3VOR2AeYATx3qSE0I-Pm-5 { 302 | position: unset; 303 | height: -webkit-fill-available; 304 | padding: unset !important; 305 | } 306 | 307 | 308 | /* Image */ 309 | ._3VOR2AeYATx3qSE0I-Pm-5 ._3d_bT685lnWotXxgzKW6am.yDr03475kalWBTwAE-Rnw { 310 | position: unset; 311 | } 312 | 313 | /* Play/Install/... Button */ 314 | ._3AjoLnMNKxYmNTGTJCLfgs._3VOR2AeYATx3qSE0I-Pm-5 { 315 | position: absolute; 316 | bottom: 12px !important; 317 | left: 12px !important; 318 | width: 52px; 319 | height: 52px; 320 | border-radius: 8px; 321 | background: unset; 322 | background: rgb(var(--blue)); 323 | } 324 | ._3AjoLnMNKxYmNTGTJCLfgs._3VOR2AeYATx3qSE0I-Pm-5:hover { 325 | background: rgb(var(--blue-hover)); 326 | } 327 | ._3AjoLnMNKxYmNTGTJCLfgs._1_Bo2Ied5s2Od4YKYTOsau:not(._1aml4h4CSJbtrNbX4brUYs) { 328 | background: rgb(var(--green)); 329 | } 330 | ._3AjoLnMNKxYmNTGTJCLfgs._1_Bo2Ied5s2Od4YKYTOsau:not(._1aml4h4CSJbtrNbX4brUYs):hover { 331 | background: rgb(var(--green-hover)); 332 | } 333 | 334 | /* Info */ 335 | ._2XftMcBO9aY7VXCivzuW7-:has(._3VOR2AeYATx3qSE0I-Pm-5), 336 | ._2AcrNSWTpZfTiTG4z0ZQpk:has(._3VOR2AeYATx3qSE0I-Pm-5) { 337 | width: -webkit-fill-available !important; 338 | } 339 | 340 | ._3VOR2AeYATx3qSE0I-Pm-5 ._2d1hSvdpY5L2-GN1EnUb9Z { 341 | width: -webkit-fill-available; 342 | height: auto; 343 | margin: 6px; 344 | padding: 6px; 345 | border-radius: 8px; 346 | background-color: rgba(var(--color-1), 80%); 347 | /* backdrop-filter: blur(4px) !important; */ 348 | box-shadow: 0px 0px 3px 2px rgb(0 0 0 / 50%); 349 | } 350 | 351 | ._3bkuozxKIatrWG3aeisthc { 352 | display: flex; 353 | justify-content: space-between; 354 | height: 52px; 355 | padding: 0 0 0 64px; 356 | line-height: unset; 357 | } 358 | 359 | ._3bkuozxKIatrWG3aeisthc>._3bkuozxKIatrWG3aeisthc { 360 | height: unset; 361 | padding: 0; 362 | text-transform: unset; 363 | letter-spacing: 0; 364 | } 365 | ._3bkuozxKIatrWG3aeisthc.yGeS63NTeSwJCWS395eIb { 366 | justify-content: space-around; 367 | height: 40px; 368 | padding: 0 0 0 46px; 369 | } 370 | 371 | ._3bkuozxKIatrWG3aeisthc._2zIRlEsAfHhI-_3bZ3X60z { 372 | font-size: 14px; 373 | font-weight: 700; 374 | } 375 | ._3bkuozxKIatrWG3aeisthc.yGeS63NTeSwJCWS395eIb>._3bkuozxKIatrWG3aeisthc.yGeS63NTeSwJCWS395eIb { 376 | height: unset; 377 | padding: 0; 378 | } 379 | 380 | .RhmvOTLHkomDhCTDX9hLA { 381 | display: none; 382 | } 383 | 384 | 385 | 386 | 387 | /* 388 | ! Game card 389 | */ 390 | .WYgDg9NyCcMIVuMyZ_NBC { 391 | border: none; 392 | border-radius: 8px; 393 | } 394 | 395 | ._3d_bT685lnWotXxgzKW6am.yDr03475kalWBTwAE-Rnw { 396 | border-radius: 8px; 397 | } 398 | 399 | /* New to library */ 400 | ._2jj5TjFhHD1lvxMlpJYek6 { 401 | top: unset; 402 | bottom: 6px; 403 | } 404 | ._2jj5TjFhHD1lvxMlpJYek6 .N8aJrSpxQ6II4CY_aFdYI { 405 | max-width: 100%; 406 | width: 100%; 407 | margin: 0 6px; 408 | padding: 4px; 409 | border-radius: 8px; 410 | background-color: rgba(1, 169, 234); 411 | } 412 | 413 | /* Install button */ 414 | .WYgDg9NyCcMIVuMyZ_NBC ._2GRcKrPZsMSF6glMPRMZei { 415 | justify-content: unset; 416 | align-items: flex-end; 417 | } 418 | .WYgDg9NyCcMIVuMyZ_NBC ._8YrRmy_c6O0FCxFT8gjqo { 419 | max-width: unset; 420 | } 421 | 422 | /* Playtime/Date etc. */ 423 | ._1LJqx_qFOC8199RBQO5kU8 { 424 | width: -webkit-fill-available; 425 | margin: 6px; 426 | margin-top: -32px; 427 | padding: 4px; 428 | border-radius: 8px; 429 | background-color: rgba(var(--color-1), 80%); 430 | /* backdrop-filter: blur(4px) !important; */ 431 | box-shadow: 0px 0px 3px 2px rgb(0 0 0 / 50%); 432 | } 433 | /* Achievements */ 434 | ._1LJqx_qFOC8199RBQO5kU8._31wTtQjCH2ZSKgMiMZLhAM { 435 | background-color: rgba(1, 169, 234); 436 | } 437 | /* Metacritic */ 438 | ._1LJqx_qFOC8199RBQO5kU8._1KR40mXc7Z4Dss99aBDbyN, 439 | ._1LJqx_qFOC8199RBQO5kU8._1H3NRDhuiZh5xH5jZsiI38, 440 | ._1LJqx_qFOC8199RBQO5kU8._3lWVD8RYypVvbk60T5Vqcs { 441 | text-align: center; 442 | border-radius: 8px; 443 | color: #fff; 444 | } 445 | ._1LJqx_qFOC8199RBQO5kU8._1KR40mXc7Z4Dss99aBDbyN { 446 | background-color: rgba(0, 206, 122, 1); 447 | } 448 | ._1LJqx_qFOC8199RBQO5kU8._1H3NRDhuiZh5xH5jZsiI38 { 449 | background-color: rgba(255, 189, 63, 1); 450 | } 451 | ._1LJqx_qFOC8199RBQO5kU8._3lWVD8RYypVvbk60T5Vqcs { 452 | background-color: rgba(255, 104, 116, 1); 453 | } 454 | 455 | 456 | 457 | /* 458 | ! Collection cards 459 | */ /*todo: add comments*/ 460 | .u1xD3KJEgksF_J_5TLZzO { 461 | padding: 16px; 462 | } 463 | 464 | 465 | 466 | .DGRkX_HYUzbFaqRysWQVi:has(._3IWn-2rn7x98o5fDd0rAxb) { 467 | height: unset !important; 468 | } 469 | 470 | 471 | ._3vHkmRShhzwd67_MtEq8-n._3DJLGrqzoQ5vMDI_4VG502:has(._3IWn-2rn7x98o5fDd0rAxb), 472 | .u1xD3KJEgksF_J_5TLZzO .Ma65KR7z4XhZl4vJvxf4D:has(._3IWn-2rn7x98o5fDd0rAxb) { 473 | gap: 16px !important; 474 | grid-auto-rows: unset !important; 475 | } 476 | 477 | 478 | 479 | ._3IWn-2rn7x98o5fDd0rAxb { 480 | flex-direction: column; 481 | align-items: flex-end; 482 | border: none; 483 | border-radius: 8px; 484 | background-color: rgb(var(--color-1)); 485 | box-shadow: 0px 4px 8px 0px rgb(0 0 0 / 25%); 486 | } 487 | ._3IWn-2rn7x98o5fDd0rAxb:focus, 488 | ._3IWn-2rn7x98o5fDd0rAxb:hover { 489 | background: rgb(var(--color-4)); 490 | box-shadow: none; 491 | } 492 | 493 | ._3IWn-2rn7x98o5fDd0rAxb ._2ERAQD94mxjbyV0G5P9ic5 { 494 | position: unset; 495 | width: 100%; 496 | height: 100%; 497 | } 498 | 499 | ._3IWn-2rn7x98o5fDd0rAxb ._2ERAQD94mxjbyV0G5P9ic5 .akZKnBQkmOCFmiD2JWwfo { 500 | display: none; 501 | } 502 | 503 | ._3IWn-2rn7x98o5fDd0rAxb ._2ERAQD94mxjbyV0G5P9ic5 ._3n796D6GS1fdlXhRnRUfRv { 504 | position: unset; 505 | margin: 6px; 506 | padding: 0 0 16px; 507 | mask-image: none; 508 | -webkit-mask-image: none; 509 | } 510 | 511 | 512 | ._3IWn-2rn7x98o5fDd0rAxb ._2ERAQD94mxjbyV0G5P9ic5 ._3vMgn8Qn1EVGWMwVbRBBUA { 513 | width: 100%; 514 | height: 100%; 515 | margin: 0; 516 | transform-origin: 0; 517 | transform: rotateZ(0) rotateY(0) rotateX(0); 518 | } 519 | 520 | ._3IWn-2rn7x98o5fDd0rAxb ._2ERAQD94mxjbyV0G5P9ic5 ._2UWA0lTcI8lQgQsbWucD8x { 521 | display: grid; 522 | grid-template-columns: repeat(3, 1fr); 523 | grid-template-rows: repeat(2, 1fr); 524 | grid-column-gap: 6px; 525 | grid-row-gap: 6px; 526 | } 527 | 528 | ._3IWn-2rn7x98o5fDd0rAxb ._2ERAQD94mxjbyV0G5P9ic5 ._2zbkblS0wKex2zlrf1kmkQ { 529 | display: none; 530 | width: auto !important; 531 | margin: 0; 532 | border: none; 533 | filter: none; 534 | box-shadow: none; 535 | transform: unset !important; 536 | } 537 | ._3IWn-2rn7x98o5fDd0rAxb ._2ERAQD94mxjbyV0G5P9ic5 ._2zbkblS0wKex2zlrf1kmkQ:nth-child(1), 538 | ._3IWn-2rn7x98o5fDd0rAxb ._2ERAQD94mxjbyV0G5P9ic5 ._2zbkblS0wKex2zlrf1kmkQ:nth-child(2), 539 | ._3IWn-2rn7x98o5fDd0rAxb ._2ERAQD94mxjbyV0G5P9ic5 ._2zbkblS0wKex2zlrf1kmkQ:nth-child(3), 540 | ._3IWn-2rn7x98o5fDd0rAxb ._2ERAQD94mxjbyV0G5P9ic5 ._2zbkblS0wKex2zlrf1kmkQ:nth-child(4), 541 | ._3IWn-2rn7x98o5fDd0rAxb ._2ERAQD94mxjbyV0G5P9ic5 ._2zbkblS0wKex2zlrf1kmkQ:nth-child(5), 542 | ._3IWn-2rn7x98o5fDd0rAxb ._2ERAQD94mxjbyV0G5P9ic5 ._2zbkblS0wKex2zlrf1kmkQ:nth-child(6) { 543 | display: block; 544 | } 545 | 546 | 547 | ._3IWn-2rn7x98o5fDd0rAxb ._1J1LQ0vGtpM3n0xw7XwQM6 { 548 | bottom: 0; 549 | display: flex; 550 | flex-direction: column-reverse; 551 | width: calc(100% - 24px); 552 | margin: 0 6px 6px; 553 | padding: 6px; 554 | letter-spacing: 0; 555 | text-transform: unset; 556 | text-shadow: none; 557 | border-radius: 8px; 558 | background-color: rgb(var(--color-2)); 559 | box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.5); 560 | } 561 | ._3IWn-2rn7x98o5fDd0rAxb ._1J1LQ0vGtpM3n0xw7XwQM6 div:not(._36QQLBgXFUVTOhU9jMkCWD) { 562 | overflow: hidden; 563 | white-space: nowrap; 564 | text-overflow: ellipsis; 565 | } 566 | 567 | ._3IWn-2rn7x98o5fDd0rAxb .sZaUDqkKPd-EtHyaNfoKG svg { 568 | top: 8px; 569 | bottom: unset; 570 | } -------------------------------------------------------------------------------- /src/css/steam/millenniumSettings.css: -------------------------------------------------------------------------------- 1 | .MillenniumSettings.ModalDialogPopup { 2 | display: flex; 3 | flex-direction: column; 4 | margin: 0 !important; 5 | } 6 | 7 | 8 | 9 | /* 10 | & Side/Navbar 11 | */ 12 | .MillenniumSettings.ModalDialogPopup ._2kwFFHckg8jvnwJfg9-la8 { 13 | flex: unset; 14 | max-width: unset; 15 | padding: 12px 16px; 16 | } 17 | 18 | .MillenniumSettings.ModalDialogPopup ._18QCu-7MTzd51UpVbYysDy { 19 | flex-direction: row; 20 | padding: 0; 21 | } 22 | 23 | 24 | 25 | /* 26 | & Main 27 | */ 28 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 { 29 | width: unset; 30 | max-width: unset; 31 | } 32 | 33 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .DialogContent_InnerWidth { 34 | padding: 0 !important; 35 | } 36 | 37 | 38 | /* 39 | ! Title 40 | */ 41 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .DialogHeader { 42 | margin: 0 !important; 43 | padding: 16px 16px 0; 44 | } 45 | 46 | 47 | /* 48 | ! Body 49 | */ 50 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .aFxOaYcllWYkCfVYQJFs0 { 51 | padding: 16px !important; 52 | } 53 | 54 | 55 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .aFxOaYcllWYkCfVYQJFs0 { 56 | overflow: overlay; 57 | padding: 16px !important; 58 | -webkit-mask-image: linear-gradient(to bottom, transparent, black 16px), linear-gradient(to left, black 0px 14px, transparent 14px); 59 | } 60 | 61 | 62 | 63 | /* Title */ 64 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .aFxOaYcllWYkCfVYQJFs0 .SettingsDialogSubHeader { 65 | margin: 0 !important; 66 | padding: 12px; 67 | line-height: unset; 68 | border-radius: 8px 8px 0 0; 69 | background-color: rgb(var(--color-2)); 70 | } 71 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .aFxOaYcllWYkCfVYQJFs0 .SettingsDialogSubHeader:last-of-type { 72 | border-radius: 8px; 73 | } 74 | 75 | 76 | 77 | /* Items */ 78 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .aFxOaYcllWYkCfVYQJFs0 .eKmEXJCm_lgme24Fp_HWt { 79 | margin-bottom: 12px; 80 | padding: 6px 12px 12px; 81 | border-radius: 0 0 8px 8px; 82 | background-color: rgb(var(--color-2)); 83 | } 84 | 85 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .aFxOaYcllWYkCfVYQJFs0 .eKmEXJCm_lgme24Fp_HWt:last-of-type { 86 | margin-bottom: 0; 87 | border-bottom-left-radius: 8px; 88 | border-bottom-right-radius: 8px; 89 | } 90 | 91 | 92 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .aFxOaYcllWYkCfVYQJFs0 .eKmEXJCm_lgme24Fp_HWt.MillenniumThemes_ThemeItem, 93 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .aFxOaYcllWYkCfVYQJFs0 .eKmEXJCm_lgme24Fp_HWt.MillenniumPlugins_PluginField { 94 | padding: 12px; 95 | } 96 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .aFxOaYcllWYkCfVYQJFs0 .eKmEXJCm_lgme24Fp_HWt.MillenniumThemes_ThemeItem:has(:nth-last-child), 97 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .aFxOaYcllWYkCfVYQJFs0 .eKmEXJCm_lgme24Fp_HWt.MillenniumPlugins_PluginField:has(:nth-last-child) { 98 | padding: 6px 12px 12px; 99 | } 100 | 101 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .aFxOaYcllWYkCfVYQJFs0 .eKmEXJCm_lgme24Fp_HWt.MillenniumThemes_ThemeItem:nth-child(2), 102 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .aFxOaYcllWYkCfVYQJFs0 .eKmEXJCm_lgme24Fp_HWt.MillenniumPlugins_PluginField:nth-child(3) { 103 | border-top-left-radius: 8px; 104 | border-top-right-radius: 8px; 105 | } 106 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .aFxOaYcllWYkCfVYQJFs0 .eKmEXJCm_lgme24Fp_HWt.MillenniumThemes_ThemeItem:nth-child(2) { 107 | padding-bottom: 0; 108 | } 109 | 110 | 111 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .aFxOaYcllWYkCfVYQJFs0 .eKmEXJCm_lgme24Fp_HWt.MillenniumThemes_ThemeItem ._2VcTlXFC64Jtg9gvtT6cmY, 112 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .aFxOaYcllWYkCfVYQJFs0 .eKmEXJCm_lgme24Fp_HWt.MillenniumPlugins_PluginField ._2VcTlXFC64Jtg9gvtT6cmY { 113 | padding: 12px; 114 | border-radius: 8px; 115 | background-color: rgb(var(--color-3)); 116 | } 117 | 118 | 119 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .aFxOaYcllWYkCfVYQJFs0 .eKmEXJCm_lgme24Fp_HWt.GxgIyq8R5xTOeu4ftGrgX { 120 | margin-bottom: 0; 121 | border-radius: 0; 122 | } 123 | 124 | 125 | /* SpaceTheme Item */ 126 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .aFxOaYcllWYkCfVYQJFs0 .eKmEXJCm_lgme24Fp_HWt[data-theme-name="SpaceTheme for Steam"] ._2VcTlXFC64Jtg9gvtT6cmY { 127 | overflow: hidden; 128 | position: relative; 129 | background: linear-gradient(90.00deg, rgba(17, 17, 17, 0), rgb(var(--color-3), .4) 100%), linear-gradient(270.00deg, rgba(17, 17, 17, 0) 0%, rgb(var(--color-3)) 80%); 130 | } 131 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .aFxOaYcllWYkCfVYQJFs0 .eKmEXJCm_lgme24Fp_HWt[data-theme-name="SpaceTheme for Steam"] ._2VcTlXFC64Jtg9gvtT6cmY::after { 132 | content: ""; 133 | z-index: -1; 134 | opacity: .6; 135 | position: absolute; 136 | width: 100%; 137 | height: 800px; 138 | background-image: url("https://raw.githubusercontent.com/SpaceTheme/Steam/refs/heads/main/_assets/img/libHome.png"); 139 | background-size: cover; 140 | background-position: center; 141 | transform: rotate(-30deg); 142 | } 143 | 144 | 145 | /* Items Description */ 146 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .aFxOaYcllWYkCfVYQJFs0 .eKmEXJCm_lgme24Fp_HWt ._1W1to_azoBRG95oNAFpf9Q { 147 | margin: 0 148 | } 149 | 150 | 151 | 152 | /* Color Picker */ 153 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .aFxOaYcllWYkCfVYQJFs0 .eKmEXJCm_lgme24Fp_HWt .MillenniumColorPicker { 154 | --size: 28px; 155 | width: calc(var(--size) * 2); 156 | margin: 0; 157 | } 158 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .aFxOaYcllWYkCfVYQJFs0 .eKmEXJCm_lgme24Fp_HWt .MillenniumColorPicker::-webkit-color-swatch { 159 | border-radius: 8px; 160 | } 161 | 162 | 163 | 164 | /* Plugins Dialog Controls Section */ 165 | .MillenniumSettings.ModalDialogPopup .OX7USkJ5dDP_icD00Gal6 .aFxOaYcllWYkCfVYQJFs0 .MillenniumPluginsDialogControlsSection { 166 | margin: 0 !important; 167 | margin-bottom: 12px !important; 168 | padding: 12px; 169 | border-radius: 8px; 170 | background-color: rgb(var(--color-2)); 171 | } -------------------------------------------------------------------------------- /src/css/steam/modalDialogPopup.css: -------------------------------------------------------------------------------- 1 | html.client_chat_frame body, 2 | html.web_chat_frame body, 3 | .ModalPosition_Content { 4 | border-radius: 8px; 5 | background-color: rgb(var(--background)) !important; 6 | } 7 | 8 | 9 | 10 | /* Base */ 11 | ._3few7361SOf4k_YuKCmM62.MzjwfxXSiSauz8kyEuhYO, 12 | ._2sssIwe0duyIrFvat2oXzH, 13 | .DialogContent._DialogLayout:not(.CFTLX2wIKOK3hNV-fS7_V) { 14 | gap: 16px; 15 | width: -webkit-fill-available !important; 16 | min-width: unset !important; 17 | height: -webkit-fill-available !important; 18 | min-height: unset !important; 19 | margin: 32px 16px 16px; 20 | } 21 | 22 | 23 | 24 | /* Titel */ 25 | ._2rjVTGz8aLvqOdz5v2gq5C, 26 | ._2Nmun5feXmM6VdoGKSPapp, 27 | .DialogContent:not(.CFTLX2wIKOK3hNV-fS7_V) .DialogHeader { 28 | position: absolute; 29 | top: -22px; 30 | left: 0; 31 | width: max-content; 32 | margin: 0; 33 | padding: 0; 34 | font-size: 12px !important; 35 | line-height: 12px; 36 | font-weight: 600; 37 | text-transform: none; 38 | color: #969696; 39 | } 40 | 41 | 42 | 43 | /* Sidebar */ 44 | ._2kwFFHckg8jvnwJfg9-la8 { 45 | min-height: unset !important; 46 | padding: 0; 47 | border-radius: 8px; 48 | background-color: rgb(var(--color-2)); 49 | } 50 | 51 | 52 | ._1-vlriAtKYDViAEunue4VO { 53 | padding: 6px 12px; 54 | background-color: unset !important; 55 | } 56 | 57 | 58 | 59 | /* Main */ 60 | .DialogContentTransition, 61 | .DialogContent { 62 | padding: 0 !important; 63 | background: none !important; 64 | } 65 | 66 | .DialogContent_InnerWidth { 67 | padding: 12px !important; 68 | border-radius: 8px; 69 | background-color: rgb(var(--color-1)) !important; 70 | } -------------------------------------------------------------------------------- /src/css/steam/newsModal.css: -------------------------------------------------------------------------------- 1 | /* Backdrop */ 2 | ._37MAYpIjl0IDA1xVhhsuX8>div { 3 | border-radius: 8px; 4 | backdrop-filter: brightness(0.2) !important; 5 | } 6 | 7 | 8 | 9 | /* 10 | ! Side controls 11 | */ 12 | ._2pA5CW91XQQDfo6yZEdPd- { 13 | top: 58px; 14 | } 15 | 16 | ._2pA5CW91XQQDfo6yZEdPd- ._3yfs7fc5WEv6F9tPG4yq4g { 17 | width: 966px; 18 | } 19 | 20 | 21 | /* Buttons */ 22 | ._240i58XQ0w78YFrd_p-9UY { 23 | outline: 2px solid rgb(var(--color-5)) !important; 24 | border: none !important; 25 | border-radius: 8px; 26 | background-color: rgb(var(--color-1)); 27 | box-shadow: 0px 0px 16px 0px rgb(0, 0, 0); 28 | } 29 | ._240i58XQ0w78YFrd_p-9UY:hover { 30 | background-color: rgb(var(--color-3)); 31 | } 32 | 33 | 34 | 35 | /* 36 | ! Main 37 | */ 38 | /* Base */ 39 | ._1KsYSVzmvIfRivBTcx-_GE { 40 | margin: 16px auto; 41 | outline: 3px solid rgb(var(--color-5)); 42 | border-radius: 8px; 43 | background-image: none; 44 | background-color: rgb(var(--color-1)); 45 | box-shadow: 0px 0px 16px 0px rgb(0, 0, 0); 46 | } 47 | .stsss-bTNuazY8FYtvTOX { 48 | display: none; 49 | } 50 | 51 | 52 | /* Banner */ 53 | ._3_SEiDNs-lzwV7cTF6gcgt ._2-IygC3-t05_RYwPl6Fkgt { 54 | top: 0; 55 | width: -webkit-fill-available; 56 | margin: 12px; 57 | margin-bottom: 0; 58 | border-radius: 8px; 59 | } 60 | 61 | 62 | /* Title */ 63 | ._3_SEiDNs-lzwV7cTF6gcgt ._3z2NYCkFizMu4fMvWTIBUG { 64 | margin: 12px 12px 0; 65 | padding: 16px; 66 | border-radius: 8px; 67 | background: none; 68 | background-color: rgb(var(--color-2)); 69 | } 70 | 71 | 72 | /* Footer */ 73 | .mKmrOjr9bGjKAolgp9NoD { 74 | margin: 0 12px 12px; 75 | padding: 16px; 76 | border-radius: 8px; 77 | background-image: none; 78 | background-color: rgb(var(--color-2)); 79 | } 80 | 81 | /* Footer Buttons */ 82 | ._3Kelh1-_v6xHfRjF68n7NB, 83 | ._3ctGqQID5-8adtd7HlZ3YM, 84 | ._16xC0mtOWoLbvSQbmo_ycv { 85 | padding: 0; 86 | background-color: unset; 87 | } -------------------------------------------------------------------------------- /src/css/steam/sidebar.css: -------------------------------------------------------------------------------- 1 | /* Always show game sidebar */ 2 | ._1rDh5rXSFZJOqCa4UpnI4z:has(.RGNMWtyj73_-WdhflrmuY[style*="display: none;"]) { 3 | flex-direction: unset; 4 | } 5 | .RGNMWtyj73_-WdhflrmuY[style*="display: none;"] { 6 | display: flex !important; 7 | max-width: min(50%, 100% - 400px); 8 | min-width: 272px; 9 | } 10 | .RGNMWtyj73_-WdhflrmuY[style*="display: none;"] ._9sPoVBFyE_vE87mnZJ5aB { 11 | max-width: min(50%, 100% - 400px); 12 | min-width: calc(100% - 4px - 12px); 13 | } 14 | .RGNMWtyj73_-WdhflrmuY[style*="display: none;"] ._3BFcmjAaMyP6GTPwc0VyWi { 15 | display: none; 16 | } 17 | 18 | 19 | 20 | ._3x1HklzyDs4TEjACrRO2tB { 21 | background-image: none; 22 | } 23 | 24 | 25 | 26 | /* 27 | ! Home and Collections 28 | */ 29 | ._2TKEazUUS3TlniZfpc8OOe { 30 | gap: 6px; 31 | height: unset; 32 | margin-bottom: 16px; 33 | padding: 6px; 34 | border-radius: 8px; 35 | background-color: rgb(var(--color-2)); 36 | box-shadow: none; 37 | } 38 | 39 | 40 | /* Home Button */ 41 | ._3pSPluBgf0NeR1kkCLWMhR { 42 | height: 42px; 43 | padding: 6px; 44 | text-transform: uppercase; 45 | border: none; 46 | border-radius: 8px; 47 | background-color: rgb(var(--color-1)) !important; 48 | transition: all 0.2s ease-in-out; 49 | } 50 | ._3pSPluBgf0NeR1kkCLWMhR:hover { 51 | background-color: rgb(var(--color-3)) !important; 52 | } 53 | 54 | ._3pSPluBgf0NeR1kkCLWMhR ._3O48LaKWcabKx07xdrt1TH { 55 | font-weight: 600; 56 | } 57 | 58 | /* Logo in home button */ 59 | ._3pSPluBgf0NeR1kkCLWMhR ._1ooROmAgkhoBH_o65yl9dJ { 60 | top: 0; 61 | right: 0; 62 | width: 42px; 63 | height: 42px; 64 | background-image: url("../../icons/logo.svg"); 65 | background-repeat: no-repeat; 66 | background-position: right; 67 | background-size: contain; 68 | mask-image: none; 69 | -webkit-mask-image: none; 70 | transform: rotate(35deg) scale(1.2); 71 | } 72 | ._1ooROmAgkhoBH_o65yl9dJ svg { 73 | display: none; 74 | } 75 | 76 | 77 | /* Collection button */ 78 | ._3pSPluBgf0NeR1kkCLWMhR._30KGSfPjPskFlnrSxBfkiK { 79 | width: 42px; 80 | height: 42px; 81 | margin: 0; 82 | padding: 0; 83 | border: none; 84 | border-radius: 8px; 85 | background-color: rgb(var(--color-1)); 86 | transition: all 0.2s ease-in-out; 87 | } 88 | ._3pSPluBgf0NeR1kkCLWMhR._30KGSfPjPskFlnrSxBfkiK:hover { 89 | background-color: rgb(var(--color-3)); 90 | } 91 | 92 | /* Collection button icon grid */ 93 | .nC-pL16iUnIRcaj1UVnwq { 94 | grid-template-columns: repeat(2, 1fr); 95 | grid-template-rows: repeat(2, 1fr); 96 | grid-column-gap: 4px; 97 | grid-row-gap: 4px; 98 | width: 42px; 99 | height: auto; 100 | margin: 4px; 101 | padding: 4px; 102 | border: 2px solid rgb(var(--color-2)); 103 | border-radius: 6px; 104 | transition: all 0.2s ease-in-out; 105 | } 106 | .xeuK3OqQYpIbPs1mCIS0k:hover .nC-pL16iUnIRcaj1UVnwq { 107 | border: 2px solid rgb(var(--color-5)); 108 | } 109 | .nC-pL16iUnIRcaj1UVnwq ._2tyaVs9BpqcW068aaOrO56 { 110 | border-radius: 2px; 111 | background-color: rgb(var(--color-2)) !important; 112 | transition: all 0.2s ease-in-out; 113 | } 114 | .xeuK3OqQYpIbPs1mCIS0k:hover .nC-pL16iUnIRcaj1UVnwq ._2tyaVs9BpqcW068aaOrO56 { 115 | background-color: rgb(var(--color-5)) !important; 116 | } 117 | 118 | 119 | 120 | /* 121 | ! Groupe filter 122 | */ 123 | ._1ZS_xta5HMXzR8JgxDH6n7 { 124 | display: block; 125 | padding: 6px 6px 0; 126 | border-radius: 8px 8px 0 0; 127 | background-color: rgb(var(--color-2)); 128 | } 129 | 130 | 131 | /* Dropdown */ 132 | ._1ZS_xta5HMXzR8JgxDH6n7 ._2PF_m-I5yte3WnQhpcz8RC { 133 | padding: 6px; 134 | border-radius: 8px; 135 | background-color: rgb(var(--color-3)); 136 | transition: all 0.2s ease-in-out; 137 | } 138 | ._1ZS_xta5HMXzR8JgxDH6n7 ._2PF_m-I5yte3WnQhpcz8RC:hover { 139 | background-color: rgb(var(--color-1)); 140 | } 141 | 142 | 143 | /* Go up button */ 144 | .uE7Pj4tb2n3_Bx4vjEX0a { 145 | display: flex; 146 | justify-content: center; 147 | align-items: center; 148 | border: none; 149 | border-radius: 8px; 150 | background-color: rgb(var(--color-3)); 151 | transition: all 0.2s ease-in-out; 152 | } 153 | .uE7Pj4tb2n3_Bx4vjEX0a.rkfSfuCLRt8sqpkXJqxYo { 154 | margin-left: 6px; 155 | } 156 | .uE7Pj4tb2n3_Bx4vjEX0a.rkfSfuCLRt8sqpkXJqxYo:hover { 157 | background-color: rgb(var(--color-1)); 158 | } 159 | 160 | 161 | 162 | /* 163 | ! Recent/Ready filter 164 | */ 165 | ._1ZS_xta5HMXzR8JgxDH6n7 ._36r2az6roul_Oej7D4BMI6 { 166 | display: block; 167 | margin: 6px 0; 168 | } 169 | ._1ZS_xta5HMXzR8JgxDH6n7 ._1PgAonvorr0o_NMxNKiDFU { 170 | gap: 6px; 171 | margin-left: 0; 172 | } 173 | ._1ZS_xta5HMXzR8JgxDH6n7 ._1PgAonvorr0o_NMxNKiDFU ._3mzKdQXht__YHo6PX1LmB6 { 174 | width: 100%; 175 | margin: 0; 176 | padding: 6px; 177 | border-radius: 8px; 178 | background-color: rgb(var(--color-3)); 179 | transition: all 0.2s ease-in-out; 180 | } 181 | ._1ZS_xta5HMXzR8JgxDH6n7 ._1PgAonvorr0o_NMxNKiDFU ._3mzKdQXht__YHo6PX1LmB6:hover { 182 | background-color: rgb(var(--color-1)); 183 | } 184 | 185 | 186 | 187 | /* 188 | ! Searchbar 189 | */ 190 | ._20QAC4WMXm8qFE8waUT5oo, 191 | ._20QAC4WMXm8qFE8waUT5oo._3qwXPrhpZYqVbJxrZDrvjy { 192 | margin: 0; 193 | padding: 0 6px 16px; 194 | border-radius: 0; 195 | background-color: rgb(var(--color-2)); 196 | } 197 | /* Search input */ 198 | ._20QAC4WMXm8qFE8waUT5oo ._12vo5L1hsNGdao6_ssuirS { 199 | border-radius: 8px 0 0 8px; 200 | background-color: rgb(var(--color-3)); 201 | } 202 | ._20QAC4WMXm8qFE8waUT5oo ._12vo5L1hsNGdao6_ssuirS .DialogTextInputBase { 203 | border: none; 204 | box-shadow: none; 205 | } 206 | ._20QAC4WMXm8qFE8waUT5oo ._12vo5L1hsNGdao6_ssuirS .DialogTextInputBase:hover { 207 | background-color: unset; 208 | } 209 | 210 | 211 | /* Filter */ 212 | ._20QAC4WMXm8qFE8waUT5oo .vCCmYvn9yQ_V8CpKupllU { 213 | border-radius: 0 8px 8px 0; 214 | background-color: rgb(var(--color-3)) !important; 215 | } 216 | ._20QAC4WMXm8qFE8waUT5oo .vCCmYvn9yQ_V8CpKupllU:hover { 217 | background-color: rgb(var(--color-1)) !important; 218 | } 219 | 220 | 221 | 222 | /* 223 | ! Divider 224 | */ 225 | ._20QAC4WMXm8qFE8waUT5oo::after { 226 | content: ""; 227 | position: absolute; 228 | bottom: 0; 229 | margin: 0 12px 6px; 230 | width: calc(100% - 36px); 231 | height: 4px; 232 | border-radius: 8px; 233 | background-color: rgb(var(--color-1)); 234 | } 235 | 236 | 237 | /* 238 | ! Game list 239 | */ 240 | ._1ijTaXJJA5YWl_fW2IxcaT, 241 | ._1fbRpYO_BFDlMdFLsQMGVE { 242 | margin: 0; 243 | border-radius: 0 0 8px 8px; 244 | background-color: rgb(var(--color-2)); 245 | } 246 | 247 | 248 | /* Collection header */ 249 | ._2sYIghGVXJr6tsQVvcryy8 { 250 | margin: 0 6px; 251 | border: none; 252 | border-radius: 8px; 253 | background: none; 254 | background-color: rgb(var(--color-1)); 255 | align-items: center; 256 | } 257 | 258 | ._2sYIghGVXJr6tsQVvcryy8 ._3SFRZYIb9Y2q7YsVtB3YKb, 259 | ._2sYIghGVXJr6tsQVvcryy8 ._2mZ8LlvoUiyeEUtIWuTri { 260 | height: unset; 261 | } 262 | 263 | ._2sYIghGVXJr6tsQVvcryy8 ._3SFRZYIb9Y2q7YsVtB3YKb { 264 | display: flex; 265 | align-items: center; 266 | padding: 0 2px 0 4px; 267 | } 268 | 269 | 270 | /* Game item */ 271 | ._2-O4ZG0KrnSrzISHBKctFQ { 272 | margin: 0 6px; 273 | border: none; 274 | border-radius: 8px; 275 | } 276 | ._2-O4ZG0KrnSrzISHBKctFQ .ga1hyw11cdBVodrCAidPF ._3d_bT685lnWotXxgzKW6am.yDr03475kalWBTwAE-Rnw { 277 | border-radius: 4px !important; 278 | } 279 | 280 | 281 | 282 | /* 283 | ! Game list sidebar sizebar 284 | */ 285 | ._276E6ijBpjMA2_iTxNhhjc { 286 | margin: auto 6px; 287 | width: 4px; 288 | height: 240px; 289 | border-radius: 8px; 290 | background-color: rgb(var(--accent-1)); 291 | transition: all 0.2s ease-in-out; 292 | } 293 | ._276E6ijBpjMA2_iTxNhhjc:hover, ._276E6ijBpjMA2_iTxNhhjc:focus, ._276E6ijBpjMA2_iTxNhhjc:active { 294 | height: 280px; 295 | background-color: rgb(var(--accent-2)) !important; 296 | } 297 | -------------------------------------------------------------------------------- /src/css/steam/titlebar.css: -------------------------------------------------------------------------------- 1 | /* On Focus blue line */ 2 | ._3pXasCUulX4jjqO79s4q_F._2MkHZqf7MrgW3f8qGHiI8Z { 3 | display: none; 4 | } 5 | 6 | 7 | 8 | ._3Z7VQ1IMk4E3HsHvrkLNgo { 9 | box-shadow: none !important; 10 | background: none !important; 11 | } 12 | ._39oUCO1OuizVPwcnnv88no { 13 | height: 46px; 14 | } 15 | 16 | 17 | 18 | /* URL bar */ 19 | ._1bGewp3tfzqAF6fVTFFUOz .UkR3sY319PuaUNuUWks2K { 20 | margin-bottom: 12px; 21 | padding: 6px; 22 | border-radius: 8px; 23 | background-color: rgb(var(--color-2)); 24 | box-shadow: none; 25 | } 26 | 27 | 28 | 29 | /* wierd top bar */ 30 | ._2CmrnGY-Amtd83ScJkFvx2 { 31 | display: none !important; 32 | } 33 | 34 | 35 | 36 | /* 37 | ! Menu 38 | */ 39 | ._1Ky59qmywxOUtNcI1cgmkX { 40 | gap: unset; 41 | margin-top: 0 !important; 42 | padding-left: 16px; 43 | } 44 | 45 | /* Item */ 46 | ._1Ky59qmywxOUtNcI1cgmkX ._2Lu3d-5qLmW4i19ysTt2jT { 47 | padding: 6px 7px; 48 | color: transparent; 49 | } 50 | ._1Ky59qmywxOUtNcI1cgmkX ._2Lu3d-5qLmW4i19ysTt2jT:nth-of-type(1) { 51 | z-index: 99999; 52 | padding: 0 6px 0 0; 53 | color: #8b929a; 54 | } 55 | 56 | /* Item on hover */ 57 | ._1Ky59qmywxOUtNcI1cgmkX:hover ._2Lu3d-5qLmW4i19ysTt2jT { 58 | color: #8b929a; 59 | } 60 | ._1Ky59qmywxOUtNcI1cgmkX ._2Lu3d-5qLmW4i19ysTt2jT:hover { 61 | color: #fff; 62 | } 63 | 64 | 65 | /* Text Logo */ 66 | .bSKGlAJG2UVWTsntEJY2v { 67 | font-size: 0; 68 | } 69 | .bSKGlAJG2UVWTsntEJY2v::after { 70 | display: flex; 71 | align-items: center; 72 | margin-left: -4px; 73 | content: "Space" !important; 74 | font-weight: 500; 75 | font-size: 12px !important; 76 | color: rgb(135, 140, 255); 77 | } 78 | ._2UyOBeiSdBayaFdRa39N2O:nth-of-type(1)::after { 79 | display: flex; 80 | align-items: center; 81 | content: "Theme" !important; 82 | font-weight: 900; 83 | color: rgb(102, 108, 255); 84 | } 85 | 86 | 87 | 88 | /* 89 | ! Navigation 90 | */ 91 | ._3Z3ohQ8-1NKnCZkbS6fvy { 92 | position: absolute; 93 | top: 23px; 94 | left: 50%; 95 | width: fit-content; 96 | height: 46px; 97 | padding: 0; 98 | transform: translate(-50%, -50%); 99 | } 100 | 101 | 102 | /* Back & Forward */ 103 | ._3Z3ohQ8-1NKnCZkbS6fvy ._2D64jIEK7wpUR_NlObDW76 svg { 104 | padding: 0 12px; 105 | } 106 | ._3Z3ohQ8-1NKnCZkbS6fvy ._2D64jIEK7wpUR_NlObDW76 svg:nth-child(2) { 107 | order: 2; 108 | } 109 | 110 | 111 | ._3Z3ohQ8-1NKnCZkbS6fvy ._7AlhCx3XGzBeIrQaCneUD { 112 | height: 20px; 113 | font-size: unset; 114 | } 115 | ._7AlhCx3XGzBeIrQaCneUD._1gqEjB5QsKT_NftD1dEsdZ:not(._2cO0HdvLEGAdhosLekWsmo) ._19axKcqYRuaJ8vdYKYmtTQ { 116 | color: rgb(var(--accent-1)); 117 | text-shadow: none; 118 | } 119 | ._7AlhCx3XGzBeIrQaCneUD._1gqEjB5QsKT_NftD1dEsdZ:not(._2cO0HdvLEGAdhosLekWsmo) ._19axKcqYRuaJ8vdYKYmtTQ::after { 120 | height: 3.2px; 121 | background: rgb(var(--accent-1)); 122 | } 123 | 124 | 125 | 126 | /* 127 | ! Userpannel 128 | */ 129 | ._3cykd-VfN_xBxf3Qxriccm { 130 | margin: 0 27px 0 10px; 131 | } 132 | 133 | /* Buttons */ 134 | ._39oUCO1OuizVPwcnnv88no ._1-9sir4j_KQiMqdkZjQN0u .Focusable { 135 | order: 2; 136 | } 137 | ._39oUCO1OuizVPwcnnv88no ._1-9sir4j_KQiMqdkZjQN0u .Focusable:nth-child(4), 138 | ._39oUCO1OuizVPwcnnv88no ._1-9sir4j_KQiMqdkZjQN0u .Focusable:nth-child(5) { 139 | order: 1; 140 | display: flex; 141 | margin-right: 8px; 142 | } 143 | 144 | ._2Szzh5sKyGgnLUR870zbDE { 145 | width: 32px; 146 | height: 24px; 147 | padding: 0 !important; 148 | background-color: rgba(103,112,123,.2); 149 | } 150 | ._3LKQ3S_yqrebeNLF6aeiog ._34bQcTHo5QKzuujoEyU1tm { 151 | top: unset; 152 | } 153 | 154 | 155 | 156 | /* 157 | ! Controls 158 | */ 159 | .qP17eBPXkfezFfexZ4hC3 .title-area { 160 | z-index: 99999; 161 | } 162 | 163 | .qP17eBPXkfezFfexZ4hC3 .title-area .title-bar-actions { 164 | height: 46px; 165 | } 166 | .qP17eBPXkfezFfexZ4hC3 .title-area .title-area-icon { 167 | height: 46px; 168 | } -------------------------------------------------------------------------------- /src/css/webkit/agecheck.css: -------------------------------------------------------------------------------- 1 | .age_gate #app_agegate { 2 | margin: 0; 3 | width: auto; 4 | } 5 | 6 | .age_gate #app_agegate .main_content_ctn { 7 | padding: 42px; 8 | border: none; 9 | border-radius: 8px; 10 | background-color: rgba(var(--color-2), 50%); 11 | } 12 | 13 | 14 | 15 | /* Date Input */ 16 | .age_gate #app_agegate .agegate_birthday_selector { 17 | border-radius: 8px; 18 | background-color: rgba(var(--color-1), 26%); 19 | } 20 | 21 | /* Text */ 22 | .age_gate #app_agegate .agegate_birthday_desc { 23 | padding-bottom: 6px; 24 | } 25 | 26 | /* Select */ 27 | .age_gate #app_agegate .agegate_birthday_selector select { 28 | height: unset; 29 | margin: 0 3px; 30 | padding: 6px; 31 | outline: none; 32 | border-radius: 8px; 33 | color: rgb(var(--accent-1)); 34 | background-color: rgba(var(--color-1), 26%); 35 | } 36 | 37 | 38 | 39 | /* Buttons */ 40 | .age_gate #app_agegate .agegate_text_container.btns { 41 | height: unset; 42 | margin: 12px auto 0; 43 | } 44 | 45 | 46 | 47 | /* Image */ 48 | .age_gate #app_agegate .img_ctn { 49 | z-index: -1; 50 | position: absolute; 51 | top: 0; 52 | left: 0; 53 | width: 100%; 54 | height: 100%; 55 | margin: 0; 56 | filter: blur(60px) brightness(0.6); 57 | } 58 | 59 | .age_gate #app_agegate .img_ctn img { 60 | width: 100%; 61 | height: 100%; 62 | } -------------------------------------------------------------------------------- /src/css/webkit/cart.css: -------------------------------------------------------------------------------- 1 | /* Background image */ 2 | .FaiD8bJRAZ-HoNo0VvLOO { 3 | display: none; 4 | } -------------------------------------------------------------------------------- /src/css/webkit/game.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/src/css/webkit/game.css -------------------------------------------------------------------------------- /src/css/webkit/home.css: -------------------------------------------------------------------------------- 1 | /* Banner */ 2 | .page_background_holder { 3 | right: 0 !important; 4 | border-radius: 8px; 5 | } -------------------------------------------------------------------------------- /src/css/webkit/news.css: -------------------------------------------------------------------------------- 1 | html body.events_hub.v6::before { 2 | background-color: rgb(var(--background)); 3 | } 4 | 5 | 6 | /* 7 | & Sidebar 8 | */ 9 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- { 10 | overflow: overlay; 11 | position: unset; 12 | flex-wrap: wrap; 13 | height: 100vh; 14 | margin-right: 16px; 15 | padding: 12px; 16 | border-radius: 8px; 17 | background-color: rgb(var(--color-2)); 18 | box-shadow: none; 19 | } 20 | 21 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1nf0vlWuKk9Qn7ncHC5uhq { 22 | padding: 0; 23 | } 24 | 25 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._2LztMgS2eI0MWKHJ3v-l0H { 26 | gap: 12px; 27 | } 28 | 29 | 30 | /* 31 | ! Collapse/close button 32 | */ 33 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1RCioHSgo99b0iUemHy2OE:has(.SVGIcon_DoubleArrow) { 34 | display: none; 35 | } 36 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1RCioHSgo99b0iUemHy2OE { 37 | z-index: 1; 38 | } 39 | 40 | 41 | /* 42 | ! Logo 43 | */ 44 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1ZO60tnVO9UhZWFk1zLM4r { 45 | display: none; 46 | } 47 | 48 | 49 | /* 50 | ! Title 51 | */ 52 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._3uZE-tI5d1lF6NQwSrxauh { 53 | display: none; 54 | } 55 | 56 | 57 | /* 58 | ! Items 59 | */ 60 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._3U5MYaJE0i8UYZ_pUzyNk7 { 61 | margin: 0; 62 | text-transform: none; 63 | letter-spacing: unset; 64 | } 65 | 66 | 67 | /* Title */ 68 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._3X16Tg0OrHJJL36_8dwlHo { 69 | margin: 0 0 6px; 70 | font-weight: 600; 71 | } 72 | 73 | 74 | /* Tab */ 75 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._19CIwB_GEUli1IquP3CIHn { 76 | gap: 2px; 77 | margin: 0 0 12px; 78 | } 79 | 80 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._19CIwB_GEUli1IquP3CIHn:nth-last-child(1) { 81 | margin: 0; 82 | } 83 | 84 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1n4vpyqKJYF8lc1kW9fr8- { 85 | height: unset; 86 | margin: 0; 87 | padding: 6px 12px; 88 | border: none !important; 89 | border-radius: 8px; 90 | background: none !important; 91 | } 92 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1n4vpyqKJYF8lc1kW9fr8-:hover { 93 | background-color: rgb(var(--color-4), .4) !important; 94 | } 95 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1n4vpyqKJYF8lc1kW9fr8-.kJoC7bJXT-uU6GorEljio { 96 | background-color: rgb(var(--color-4)) !important; 97 | } 98 | 99 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1n4vpyqKJYF8lc1kW9fr8-.kJoC7bJXT-uU6GorEljio ._11O61s8Pr7CrLbKxzm9VMK, 100 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1n4vpyqKJYF8lc1kW9fr8-.kJoC7bJXT-uU6GorEljio ._3_CIMpiaZYsgSD9rEIImZh { 101 | color: #fff; 102 | } 103 | 104 | 105 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1n4vpyqKJYF8lc1kW9fr8- ._1HQl8PnDDWs3V4bob4bBNk { 106 | padding: 6px 12px; 107 | border-radius: 8px; 108 | background-color: rgb(var(--blue)); 109 | } 110 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1n4vpyqKJYF8lc1kW9fr8-:hover ._1HQl8PnDDWs3V4bob4bBNk { 111 | color: #fff; 112 | } 113 | 114 | 115 | /* Search */ 116 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1LTVIwFRYJjiwzhWzSVOd4 { 117 | margin: 0; 118 | } 119 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1LTVIwFRYJjiwzhWzSVOd4 .DialogInputLabelGroup { 120 | margin: 0; 121 | } 122 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1LTVIwFRYJjiwzhWzSVOd4 .DialogLabel { 123 | margin: 0 0 6px; 124 | font-size: 12px; 125 | font-weight: 600; 126 | line-height: unset; 127 | text-transform: none; 128 | letter-spacing: unset; 129 | color: #a7aeb4; 130 | } 131 | 132 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1LTVIwFRYJjiwzhWzSVOd4 .DialogInput_Wrapper { 133 | margin: 0; 134 | } 135 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1LTVIwFRYJjiwzhWzSVOd4 .DialogInput_Wrapper input { 136 | padding: 6px 12px; 137 | font-size: 14px; 138 | border-radius: 8px; 139 | background-color: rgb(var(--color-1)); 140 | box-shadow: unset; 141 | } 142 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1LTVIwFRYJjiwzhWzSVOd4:has(._3eXNgAtnlHBfgWZbxO2n3h) .DialogInput_Wrapper input { 143 | border-radius: 8px 8px 0 0; 144 | } 145 | 146 | 147 | /* Search results */ 148 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1LTVIwFRYJjiwzhWzSVOd4 ._3eXNgAtnlHBfgWZbxO2n3h { 149 | display: flex; 150 | flex-direction: column; 151 | gap: 12px; 152 | margin: 0; 153 | padding: 0 6px 6px; 154 | border-radius: 0 0 8px 8px; 155 | background-color: rgb(var(--color-1)); 156 | } 157 | 158 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1LTVIwFRYJjiwzhWzSVOd4 ._3eXNgAtnlHBfgWZbxO2n3h ._1KK1sGDuxehec0lBB_4lpU { 159 | padding: 4px; 160 | font-weight: 500; 161 | border-radius: 8px; 162 | background-color: rgb(var(--color-2)); 163 | } 164 | 165 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1LTVIwFRYJjiwzhWzSVOd4 ._3eXNgAtnlHBfgWZbxO2n3h ._3dr2A8wfoYU0kJtS9ACoR1 { 166 | border-radius: 8px; 167 | } 168 | 169 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1LTVIwFRYJjiwzhWzSVOd4 ._3eXNgAtnlHBfgWZbxO2n3h ._16oSf0MiTpUTJe7YQpCV2A { 170 | margin: 6px 0 0; 171 | padding: 0; 172 | } 173 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1LTVIwFRYJjiwzhWzSVOd4 ._3eXNgAtnlHBfgWZbxO2n3h ._16oSf0MiTpUTJe7YQpCV2A:hover { 174 | background: unset; 175 | } 176 | 177 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1LTVIwFRYJjiwzhWzSVOd4 ._3eXNgAtnlHBfgWZbxO2n3h ._16oSf0MiTpUTJe7YQpCV2A .I1zVikvORZt41zc-QTAsw { 178 | padding: 2px 6px; 179 | border-radius: 12px; 180 | font-size: 11px; 181 | font-weight: 700; 182 | text-transform: capitalize; 183 | color: #fff; 184 | background-color: rgb(var(--blue)); 185 | } 186 | 187 | 188 | /* Settings & Close Settings */ 189 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._3CSX8aqaZna9ZM6WLxhZC3 { 190 | position: absolute; 191 | top: 0; 192 | right: 0; 193 | padding: 0 !important; 194 | } 195 | 196 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._3CSX8aqaZna9ZM6WLxhZC3 ._1zyVyzldzUj085oNa8Y0r1._3cMESjaODP5L2fXHzANkNT, 197 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._1RCioHSgo99b0iUemHy2OE ._2vMIlVM2BeWTC0m5_Ys2WN { 198 | width: unset; 199 | height: unset; 200 | margin: 0; 201 | padding: 0; 202 | font-size: 0; 203 | background: unset; 204 | } 205 | 206 | 207 | /* Footer */ 208 | ._1e3WbBz7-mqMKmK8HnpzFF ._15YLDKm80opUF5Tivo7UK- ._2XzXRucgCsdN2x7oRwSJu0 { 209 | margin-top: auto; 210 | } 211 | 212 | 213 | 214 | 215 | 216 | /* 217 | & Main 218 | */ 219 | ._1e3WbBz7-mqMKmK8HnpzFF ._18npkDI3gKg9S7EeTFOj-2.ws9ANxmy2MKDDodGRGkqN { 220 | overflow: overlay; 221 | height: 100vh; 222 | margin-left: 0 !important; 223 | border-radius: 8px; 224 | background-color: rgb(var(--color-1)); 225 | } 226 | 227 | 228 | ._1e3WbBz7-mqMKmK8HnpzFF ._3FpvGiwJqnukNOcrsKd_sN { 229 | background-color: rgb(var(--color-1)) !important; 230 | } 231 | 232 | 233 | /* 234 | ! Title (Day) 235 | */ 236 | ._1e3WbBz7-mqMKmK8HnpzFF ._18npkDI3gKg9S7EeTFOj-2 ._3j2deAP85R6gftsIWiHe7n._398u23KF15gxmeH741ZSyL { 237 | height: unset !important; 238 | padding: 16px; 239 | } 240 | 241 | ._1e3WbBz7-mqMKmK8HnpzFF ._18npkDI3gKg9S7EeTFOj-2 ._2aVLRsz60HV81P8VKT3kQj { 242 | max-width: unset !important; 243 | } 244 | 245 | 246 | /* 247 | ! Items 248 | */ 249 | ._1e3WbBz7-mqMKmK8HnpzFF ._18npkDI3gKg9S7EeTFOj-2 ._398u23KF15gxmeH741ZSyL { 250 | padding: 0 16px 16px; 251 | } 252 | 253 | ._1e3WbBz7-mqMKmK8HnpzFF ._18npkDI3gKg9S7EeTFOj-2 ._398u23KF15gxmeH741ZSyL ._3xvUZtQ1j-pu-l2xy-lFAq { 254 | border-radius: 8px; 255 | background: unset; 256 | background-color: rgb(var(--color-2)); 257 | box-shadow: none; 258 | } 259 | ._1e3WbBz7-mqMKmK8HnpzFF ._18npkDI3gKg9S7EeTFOj-2 ._398u23KF15gxmeH741ZSyL ._3xvUZtQ1j-pu-l2xy-lFAq:hover { 260 | background: unset !important; 261 | background-color: rgb(var(--color-4)) !important; 262 | } 263 | 264 | ._1e3WbBz7-mqMKmK8HnpzFF ._18npkDI3gKg9S7EeTFOj-2 ._3m6GW1eCeaSg9ypsv0JVD9 ._3QenzSfSDt0SQcUy8yeaD- { 265 | border-radius: 8px !important; 266 | background: unset !important; 267 | background-color: rgb(var(--color-2)) !important; 268 | } 269 | 270 | /* Image */ 271 | ._1e3WbBz7-mqMKmK8HnpzFF ._18npkDI3gKg9S7EeTFOj-2 .d8bPiEt0DUII_mRqek_ht, 272 | ._1e3WbBz7-mqMKmK8HnpzFF ._18npkDI3gKg9S7EeTFOj-2 .u8z1m_ainssHj7AbLKOZs { 273 | border-radius: 8px; 274 | } -------------------------------------------------------------------------------- /src/css/webkit/profile.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/src/css/webkit/profile.css -------------------------------------------------------------------------------- /src/css/webkit/store.css: -------------------------------------------------------------------------------- 1 | .responsive_page_template_content { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | } 6 | 7 | .home_page_col_wrapper { 8 | max-width: 1400px; 9 | margin: 16px; 10 | } 11 | 12 | /* Banner */ 13 | .page_background_holder { 14 | border-radius: 8px; 15 | } -------------------------------------------------------------------------------- /src/css/webkit/wishlist.css: -------------------------------------------------------------------------------- 1 | .gQWgnAxVrOM- body.VuAIAiWhjcg- { 2 | background: transparent !important; 3 | background-color: transparent !important; 4 | } 5 | .gQWgnAxVrOM- body.VuAIAiWhjcg-::before { 6 | content: ""; 7 | z-index: -1; 8 | position: fixed; 9 | display: block; 10 | width: 100vw; 11 | height: 100vh; 12 | border-radius: 8px; 13 | background-color: rgb(var(--color-1)); 14 | } 15 | 16 | .gQWgnAxVrOM- .GHIW6-Wf1rQ- { 17 | background: transparent !important; 18 | background-color: transparent !important; 19 | } 20 | 21 | 22 | 23 | /* Wishlist button */ 24 | .gQWgnAxVrOM- .bFz2fxg5qDY- { 25 | display: none; 26 | } 27 | 28 | 29 | 30 | /* 31 | ! Header 32 | */ 33 | 34 | .gQWgnAxVrOM- .jfAmlCmNzHQ- { 35 | margin: 16px 0 0; 36 | padding: 12px; 37 | border-radius: 8px 8px 0 0; 38 | background-color: rgb(var(--color-2)); 39 | } 40 | 41 | 42 | /* Avatar */ 43 | .gQWgnAxVrOM- .OVtmn7mzw0o- { 44 | width: 54px; 45 | height: 54px; 46 | } 47 | 48 | .gQWgnAxVrOM- .gRteJ-XhQG8- { 49 | background: none !important; 50 | } 51 | 52 | .gQWgnAxVrOM- .t1-DQ4KhiQ0- .YbrTGQJwy1w- { 53 | border-radius: 100%; 54 | background: none !important; 55 | } 56 | 57 | .gQWgnAxVrOM- .t1-DQ4KhiQ0- .EeeZUuRovTI- { 58 | display: none; 59 | } 60 | 61 | 62 | /* Text */ 63 | .gQWgnAxVrOM- .jfAmlCmNzHQ- h2 { 64 | margin: 0 0 0 12px; 65 | font-size: 20px; 66 | } 67 | 68 | 69 | /* Controls */ 70 | .gQWgnAxVrOM- .TU227nj1DiE- { 71 | gap: 12px; 72 | margin: 0 0 16px; 73 | padding: 0 12px 12px; 74 | border-radius: 0 0 8px 8px; 75 | background-color: rgb(var(--color-2)); 76 | } 77 | 78 | .gQWgnAxVrOM-:has(.Wh-OfiQaHSM-) .TU227nj1DiE- { 79 | margin: 0; 80 | padding: 0 12px 6px; 81 | border-radius: 0; 82 | } 83 | 84 | /* Search */ 85 | .gQWgnAxVrOM- .TU227nj1DiE- .JqFaNxdHYhs- { 86 | margin: 0; 87 | padding: 0 0 0 12px; 88 | outline: none; 89 | border: none; 90 | border-radius: 8px; 91 | background-color: rgb(var(--color-1)); 92 | box-shadow: none; 93 | } 94 | 95 | /* Dropdown */ 96 | .gQWgnAxVrOM- .TU227nj1DiE- .ADJFyRYJvZU- { 97 | gap: 6px; 98 | } 99 | 100 | .gQWgnAxVrOM- .TU227nj1DiE- ._1PVYT-GpKSQ- { 101 | margin: 0; 102 | color: rgb(var(--accent-1)); 103 | border-radius: 8px; 104 | background-color: rgb(var(--color-1)); 105 | } 106 | 107 | /* Option Menu */ 108 | .gQWgnAxVrOM- .F0YMvqVKHkY- { 109 | margin: 6px auto 0; 110 | padding: 12px; 111 | border: 2px solid rgb(var(--color-5)); 112 | border-radius: 8px; 113 | box-shadow: 0px 0px 16px 0px rgb(0, 0, 0); 114 | background-color: rgb(var(--color-2)); 115 | } 116 | 117 | .gQWgnAxVrOM- .F0YMvqVKHkY- form { 118 | grid-gap: 6px; 119 | } 120 | 121 | 122 | /* Filter tags */ 123 | .gQWgnAxVrOM- span:has(.Wh-OfiQaHSM-) { 124 | display: block; 125 | margin: 0 0 16px; 126 | padding: 0 12px 12px; 127 | border-radius: 0 0 8px 8px; 128 | background-color: rgb(var(--color-2)); 129 | } 130 | 131 | .gQWgnAxVrOM- .Wh-OfiQaHSM- { 132 | margin: 0; 133 | padding: 6px 28px 6px 6px; 134 | border-radius: 8px; 135 | background-color: rgb(var(--color-3)); 136 | background-position: right 6px top 8px; 137 | } 138 | .gQWgnAxVrOM- .Wh-OfiQaHSM-::after { 139 | top: 50%; 140 | bottom: 50%; 141 | transform: translateY(-50%); 142 | display: flex; 143 | justify-content: center; 144 | padding: 3px; 145 | color: #67707b; 146 | background-color: rgb(var(--color-5)); 147 | } 148 | 149 | 150 | /* Divider */ 151 | .gQWgnAxVrOM- ._0tyA9oW-HwA- { 152 | display: none; 153 | } 154 | 155 | 156 | 157 | /* 158 | ! Cards 159 | */ 160 | 161 | .gQWgnAxVrOM- .LSY1zV2DJSM- { 162 | gap: 12px; 163 | width: -webkit-fill-available; 164 | margin: 0 0 6px; 165 | padding: 12px; 166 | border-radius: 8px; 167 | background-color: rgb(var(--color-2)); 168 | box-shadow: none; 169 | } 170 | 171 | 172 | /* Number */ 173 | .gQWgnAxVrOM- .svelte-ujxp4o.svelte-ujxp4o { 174 | display: none; 175 | } 176 | 177 | 178 | /* Image */ 179 | .gQWgnAxVrOM- .LSY1zV2DJSM- .oVvbc-NOBF8- { 180 | margin: 0; 181 | background: unset; 182 | } 183 | 184 | .gQWgnAxVrOM- .LSY1zV2DJSM- .oVvbc-NOBF8- img, 185 | .gQWgnAxVrOM- .LSY1zV2DJSM- .oVvbc-NOBF8- ._80azkrfBXSM- { 186 | border-radius: 8px; 187 | } 188 | 189 | 190 | /* Purchase */ 191 | .gQWgnAxVrOM- .LSY1zV2DJSM- .wzQIocnKXn4- { 192 | background-color: unset; 193 | } 194 | 195 | /* Discount */ 196 | .gQWgnAxVrOM- .LSY1zV2DJSM- .wzQIocnKXn4- .bWcsWKN3D84-, 197 | .gQWgnAxVrOM- .LSY1zV2DJSM- .wzQIocnKXn4- .bWcsWKN3D84- .XXn-kJ7FSrw-, 198 | .gQWgnAxVrOM- .LSY1zV2DJSM- .wzQIocnKXn4- .bundle_base_discount { 199 | font-size: 14px; 200 | border-radius: 8px; 201 | } -------------------------------------------------------------------------------- /src/icons/achievementsStar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/icons/fluent/fluent.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "FluentSystemIcons-Filled"; 3 | src: url("https://spaceenergy.github.io/fonts/FluentSystemIcons-Filled.woff2") format("woff2"), 4 | url("https://spaceenergy.github.io/fonts/FluentSystemIcons-Filled.woff") format("woff"), 5 | url("https://spaceenergy.github.io/fonts/FluentSystemIcons-Filled.ttf") format("truetype"); 6 | } 7 | @font-face { 8 | font-family: "FluentSystemIcons-Regular"; 9 | src: url("https://spaceenergy.github.io/fonts/FluentSystemIcons-Regular.woff2") format("woff2"), 10 | url("https://spaceenergy.github.io/fonts/FluentSystemIcons-Regular.woff") format("woff"), 11 | url("https://spaceenergy.github.io/fonts/FluentSystemIcons-Regular.ttf") format("truetype"); 12 | } 13 | 14 | *>:has(> [class*="SVGIcon_"],> svg)::before { 15 | content: ""; 16 | font-family: FluentSystemIcons-Filled !important; 17 | font-style: normal; 18 | font-weight: normal !important; 19 | font-variant: normal; 20 | text-transform: none; 21 | line-height: 1; 22 | -webkit-font-smoothing: antialiased; 23 | } 24 | 25 | 26 | 27 | /* Scrollup, Sidebar */ 28 | .uE7Pj4tb2n3_Bx4vjEX0a::before { 29 | content: "\f19c" !important; 30 | font-size: 18px; 31 | color: #67707b; 32 | } 33 | .uE7Pj4tb2n3_Bx4vjEX0a.rkfSfuCLRt8sqpkXJqxYo:hover::before { 34 | color: #a9a9a9; 35 | } 36 | .uE7Pj4tb2n3_Bx4vjEX0a>svg { 37 | display: none; 38 | } 39 | 40 | /* Recent/Clock, Sidebar */ 41 | ._3mzKdQXht__YHo6PX1LmB6:nth-last-child(2)::before { 42 | content: "\f2de" !important; 43 | font-size: 18px; 44 | color: #67707b; 45 | } 46 | ._3mzKdQXht__YHo6PX1LmB6:nth-last-child(2):hover::before { 47 | color: #a9a9a9; 48 | } 49 | ._3mzKdQXht__YHo6PX1LmB6:nth-last-child(2)._1QFFkxM5hw-43miIiylbwq::before { 50 | color: #09b9ff; 51 | } 52 | ._3mzKdQXht__YHo6PX1LmB6:nth-last-child(2)>svg { 53 | display: none; 54 | } 55 | 56 | /* Play Circle, Sidebar */ 57 | ._3mzKdQXht__YHo6PX1LmB6:nth-last-child(1)::before { 58 | content: "\f612" !important; 59 | font-size: 18px; 60 | color: #67707b; 61 | } 62 | ._3mzKdQXht__YHo6PX1LmB6:nth-last-child(1):hover::before { 63 | color: #a9a9a9; 64 | } 65 | ._3mzKdQXht__YHo6PX1LmB6:nth-last-child(1)._1QFFkxM5hw-43miIiylbwq::before { 66 | color: #09b9ff; 67 | } 68 | ._3mzKdQXht__YHo6PX1LmB6:nth-last-child(1)>svg { 69 | display: none; 70 | } 71 | 72 | 73 | /* Filter, Sidebar */ 74 | ._20QAC4WMXm8qFE8waUT5oo .vCCmYvn9yQ_V8CpKupllU ._1TxHdzOt3OD9ikR3xIseKe>div { 75 | height: 26px; 76 | } 77 | ._1TxHdzOt3OD9ikR3xIseKe>div::before { 78 | content: "\f406" !important; 79 | font-size: 26px; 80 | color: #67707b; 81 | } 82 | ._1TxHdzOt3OD9ikR3xIseKe>div:hover::before { 83 | color: #a9a9a9; 84 | } 85 | ._1TxHdzOt3OD9ikR3xIseKe>div>svg { 86 | display: none; 87 | } 88 | 89 | 90 | /* Collection Minus, Sidebar */ 91 | ._3SFRZYIb9Y2q7YsVtB3YKb::before { 92 | content: "\f02cb" !important; 93 | font-size: 16px; 94 | color: #67707b; 95 | } 96 | ._3SFRZYIb9Y2q7YsVtB3YKb:hover::before { 97 | color: #fff; 98 | } 99 | ._3SFRZYIb9Y2q7YsVtB3YKb>svg { 100 | display: none; 101 | } 102 | 103 | /* Collection Plus, Sidebar */ 104 | ._3SFRZYIb9Y2q7YsVtB3YKb._2hFLgYbxE-5r06ns3QN334::before { 105 | content: "\f10a" !important; 106 | font-size: 16px; 107 | color: #67707b; 108 | } 109 | ._3SFRZYIb9Y2q7YsVtB3YKb._2hFLgYbxE-5r06ns3QN334:hover::before { 110 | color: #fff; 111 | } 112 | ._3SFRZYIb9Y2q7YsVtB3YKb._2hFLgYbxE-5r06ns3QN334>svg { 113 | display: none; 114 | } 115 | 116 | /* Collection Dynamic, Sidebar */ 117 | ._2sYIghGVXJr6tsQVvcryy8 .tool-tip-source::before { 118 | content: "\f02ea" !important; 119 | font-size: 16px; 120 | color: rgb(var(--accent-1)); 121 | } 122 | ._2sYIghGVXJr6tsQVvcryy8 .tool-tip-source>svg { 123 | display: none; 124 | } 125 | 126 | 127 | /* Friend, Sidebar */ 128 | .cNZ3wORgnf1KSNhI2eE2M::before { 129 | content: "\f5c8" !important; 130 | font-size: 11px; 131 | color: rgb(var(--green)); 132 | } 133 | .cNZ3wORgnf1KSNhI2eE2M>svg { 134 | display: none; 135 | } 136 | 137 | 138 | 139 | 140 | /* News, Userpannel */ 141 | ._2Szzh5sKyGgnLUR870zbDE._5wILZhsLODVwGfcJ0hKmJ::before { 142 | content: "\f542" !important; 143 | font-size: 16px; 144 | color: #67707b; 145 | } 146 | ._2Szzh5sKyGgnLUR870zbDE._5wILZhsLODVwGfcJ0hKmJ._1oEwirQksXfZ-3RWWslbAR::before { 147 | content: "\e7fe" !important; 148 | color: rgb(var(--blue)); 149 | } 150 | ._2Szzh5sKyGgnLUR870zbDE._5wILZhsLODVwGfcJ0hKmJ:hover::before { 151 | color: #fff; 152 | } 153 | ._2Szzh5sKyGgnLUR870zbDE._5wILZhsLODVwGfcJ0hKmJ>svg { 154 | display: none; 155 | } 156 | 157 | /* Alert, Userpannel */ 158 | ._2Szzh5sKyGgnLUR870zbDE.RtSv39ZoBOySnb8XQ5hJf::before { 159 | content: "\f115" !important; 160 | font-size: 16px; 161 | color: #67707b; 162 | } 163 | ._2Szzh5sKyGgnLUR870zbDE.RtSv39ZoBOySnb8XQ5hJf._3L1c8C0o_xXzPy26aoLBFd::before { 164 | content: "\f11b" !important; 165 | color: rgb(var(--accent-1)); 166 | } 167 | ._2Szzh5sKyGgnLUR870zbDE.RtSv39ZoBOySnb8XQ5hJf:hover::before { 168 | color: #fff; 169 | } 170 | ._2Szzh5sKyGgnLUR870zbDE.RtSv39ZoBOySnb8XQ5hJf>svg { 171 | display: none; 172 | } 173 | 174 | /* VR, Userpannel */ 175 | ._2Szzh5sKyGgnLUR870zbDE._3lRfTo8Wo3phXfE1DvK6QW::before { 176 | content: "\f47b" !important; 177 | font-size: 16px; 178 | color: #67707b; 179 | } 180 | ._2Szzh5sKyGgnLUR870zbDE._3lRfTo8Wo3phXfE1DvK6QW:hover::before { 181 | color: #fff; 182 | } 183 | ._2Szzh5sKyGgnLUR870zbDE._3lRfTo8Wo3phXfE1DvK6QW>svg { 184 | display: none; 185 | } 186 | 187 | /* BPM, Userpannel */ 188 | ._2Szzh5sKyGgnLUR870zbDE._3LKQ3S_yqrebeNLF6aeiog::before { 189 | content: "\edc3" !important; 190 | font-size: 16px; 191 | color: #67707b; 192 | } 193 | ._2Szzh5sKyGgnLUR870zbDE._3LKQ3S_yqrebeNLF6aeiog:hover::before { 194 | color: #fff; 195 | } 196 | ._2Szzh5sKyGgnLUR870zbDE._3LKQ3S_yqrebeNLF6aeiog>svg { 197 | display: none; 198 | } 199 | 200 | /* Friends, Userpannel */ 201 | ._1TdaAqMFadi0UTqilrkelR ._1KrJ3sFAqPBN9mfpaNTU5F::before { 202 | content: "\f5b3" !important; 203 | font-size: 16px; 204 | color: #67707b; 205 | } 206 | ._1TdaAqMFadi0UTqilrkelR ._1TdaAqMFadi0UTqilrkelR:hover ._1KrJ3sFAqPBN9mfpaNTU5F::before { 207 | color: #fff; 208 | } 209 | ._1TdaAqMFadi0UTqilrkelR ._1KrJ3sFAqPBN9mfpaNTU5F>svg { 210 | display: none; 211 | } 212 | 213 | 214 | 215 | 216 | /* arrow export up, scroll to top, library */ 217 | ._1J21tLst5SEhBPkVRT53UV._28ZR8gHitOrJaSLxcIAl2p div::before { 218 | content: "\f1a5"; 219 | font-size: 24px; 220 | color: rgb(var(--blue), .8); 221 | font-family: FluentSystemIcons-Filled !important; 222 | font-style: normal; 223 | font-weight: normal !important; 224 | font-variant: normal; 225 | text-transform: none; 226 | line-height: 1; 227 | -webkit-font-smoothing: antialiased; 228 | 229 | &:hover { 230 | color: rgb(var(--blue)); 231 | } 232 | } 233 | 234 | 235 | 236 | 237 | /* Setting, News pannel */ 238 | ._1eFe5VbyACJE4RVGpOWKMC { 239 | margin-top: 1px; 240 | } 241 | ._1eFe5VbyACJE4RVGpOWKMC::before { 242 | content: "\f6b3" !important; 243 | font-size: 18px; 244 | color: #67707b; 245 | } 246 | ._1eFe5VbyACJE4RVGpOWKMC:hover::before { 247 | color: #fff; 248 | } 249 | ._1eFe5VbyACJE4RVGpOWKMC>svg { 250 | display: none; 251 | } 252 | 253 | 254 | /* Left, News pannel */ 255 | .bsNegRKT1Hbv4tqHrOk9- ._14b-hQsLwSwYcELtknxCUX { 256 | opacity: 1; 257 | display: flex; 258 | align-items: center; 259 | } 260 | ._14b-hQsLwSwYcELtknxCUX::before { 261 | content: "\f15c" !important; 262 | font-size: 28px; 263 | color: #67707b; 264 | } 265 | ._14b-hQsLwSwYcELtknxCUX:hover::before { 266 | color: #fff; 267 | } 268 | ._14b-hQsLwSwYcELtknxCUX._16nHYucq6xgfe67DrVWLCI:hover::before { 269 | color: #67707b; 270 | } 271 | ._14b-hQsLwSwYcELtknxCUX>svg { 272 | display: none; 273 | } 274 | 275 | /* Right, News pannel */ 276 | .bsNegRKT1Hbv4tqHrOk9- ._3IIEUTw03Vm3Mk54jlnUaT { 277 | opacity: 1; 278 | display: flex; 279 | align-items: center; 280 | } 281 | ._3IIEUTw03Vm3Mk54jlnUaT::before { 282 | content: "\f182" !important; 283 | font-size: 28px; 284 | color: #67707b; 285 | } 286 | ._3IIEUTw03Vm3Mk54jlnUaT:hover::before { 287 | color: #fff; 288 | } 289 | ._3IIEUTw03Vm3Mk54jlnUaT._16nHYucq6xgfe67DrVWLCI:hover::before { 290 | color: #67707b; 291 | } 292 | ._3IIEUTw03Vm3Mk54jlnUaT>svg { 293 | display: none; 294 | } 295 | 296 | 297 | 298 | 299 | /* Add, Addshelf */ 300 | ._2aw5aUUo3lrK6wxJb4_ms5::before { 301 | content: "\f10d" !important; 302 | margin-right: 2px; 303 | font-size: 20px; 304 | color: #67707b; 305 | } 306 | ._2aw5aUUo3lrK6wxJb4_ms5:hover::before { 307 | color: #fff; 308 | } 309 | ._2aw5aUUo3lrK6wxJb4_ms5>svg { 310 | display: none; 311 | } 312 | 313 | 314 | 315 | 316 | /* Move pannel, libhome */ 317 | ._1OGfHXv6ksR1Ub-OuLN2NB::before { 318 | content: "\f07e2" !important; 319 | font-size: 16px; 320 | color: #67707b; 321 | } 322 | ._1OGfHXv6ksR1Ub-OuLN2NB>svg { 323 | display: none; 324 | } 325 | 326 | 327 | /* Left, pannel, libhome */ 328 | ._29NTOneobxPjUfxHUk9N8Y ._3uMa3icVa3JTCGQKPeUikO { 329 | align-items: center; 330 | } 331 | ._3uMa3icVa3JTCGQKPeUikO::before { 332 | content: "\f15c" !important; 333 | font-size: 28px; 334 | color: #67707b; 335 | } 336 | ._3uMa3icVa3JTCGQKPeUikO:hover::before { 337 | color: #fff; 338 | } 339 | ._3uMa3icVa3JTCGQKPeUikO._1MNhU5EYdeegJRmQ51prWb:hover::before { 340 | color: #67707b; 341 | } 342 | ._3uMa3icVa3JTCGQKPeUikO>svg { 343 | display: none; 344 | } 345 | 346 | /* Right, pannel, libhome */ 347 | ._29NTOneobxPjUfxHUk9N8Y ._2kWWyBO7w_F76NB8sBw86c { 348 | align-items: center; 349 | } 350 | ._2kWWyBO7w_F76NB8sBw86c::before { 351 | content: "\f182" !important; 352 | font-size: 28px; 353 | color: #67707b; 354 | } 355 | ._2kWWyBO7w_F76NB8sBw86c:hover::before { 356 | color: #fff; 357 | } 358 | ._2kWWyBO7w_F76NB8sBw86c._1MNhU5EYdeegJRmQ51prWb:hover::before { 359 | color: #67707b; 360 | } 361 | ._2kWWyBO7w_F76NB8sBw86c>svg { 362 | display: none; 363 | } 364 | 365 | 366 | /* collaps, libhome */ 367 | ._3sz4Ldugm_cV_JaHOErVR8._1XDafUoM_31jhUA35EzYp5 { 368 | display: flex; 369 | justify-content: center; 370 | align-items: center; 371 | } 372 | ._3sz4Ldugm_cV_JaHOErVR8._1XDafUoM_31jhUA35EzYp5::before { 373 | content: "\f2b7" !important; 374 | font-size: 18px; 375 | color: #67707b; 376 | } 377 | ._3sz4Ldugm_cV_JaHOErVR8._1XDafUoM_31jhUA35EzYp5:has(svg[style="transform: rotate(270deg);"])::before { 378 | display: inline-block; 379 | transform: rotate(180deg); 380 | } 381 | ._3sz4Ldugm_cV_JaHOErVR8._1XDafUoM_31jhUA35EzYp5:hover::before { 382 | color: #fff; 383 | } 384 | ._3sz4Ldugm_cV_JaHOErVR8._1XDafUoM_31jhUA35EzYp5>svg { 385 | display: none; 386 | } 387 | 388 | 389 | /* 100% complete, libhome */ 390 | ._1LJqx_qFOC8199RBQO5kU8._31wTtQjCH2ZSKgMiMZLhAM { 391 | padding: 4px; 392 | display: flex; 393 | align-items: center; 394 | justify-content: center; 395 | } 396 | ._1LJqx_qFOC8199RBQO5kU8._31wTtQjCH2ZSKgMiMZLhAM::before { 397 | position: absolute; 398 | left: -16px; 399 | content: "\f84f" !important; 400 | font-size: 36px; 401 | color: rgb(var(--yellow)); 402 | } 403 | ._1LJqx_qFOC8199RBQO5kU8._31wTtQjCH2ZSKgMiMZLhAM>svg { 404 | display: none; 405 | } 406 | 407 | 408 | /* Collection Dynamic, collection card, libhome */ 409 | ._3IWn-2rn7x98o5fDd0rAxb .sZaUDqkKPd-EtHyaNfoKG::before { 410 | content: "\f02ea" !important; 411 | z-index: 99; 412 | position: absolute; 413 | top: 6px; 414 | right: 6px; 415 | padding: 3px; 416 | font-size: 18px; 417 | color: rgb(var(--accent-1)); 418 | border: 2px solid; 419 | border-radius: 8px; 420 | background-color: rgb(var(--color-6)); 421 | } 422 | ._3IWn-2rn7x98o5fDd0rAxb .sZaUDqkKPd-EtHyaNfoKG>svg { 423 | display: none; 424 | } 425 | 426 | 427 | /* pen, collection, library */ 428 | ._2q70uOe6xM3-c5XIVfBLe6 ._12pDikfkuNH_o3MHKU1skz._2CPHr3axb0cv3nnDnPui5o::before { 429 | content: "\e8ea" !important; 430 | font-size: 18px; 431 | color: #67707b; 432 | } 433 | ._2q70uOe6xM3-c5XIVfBLe6 ._12pDikfkuNH_o3MHKU1skz._2CPHr3axb0cv3nnDnPui5o:hover::before { 434 | color: #fff; 435 | } 436 | ._2q70uOe6xM3-c5XIVfBLe6 ._12pDikfkuNH_o3MHKU1skz._2CPHr3axb0cv3nnDnPui5o>svg { 437 | display: none; 438 | } 439 | 440 | 441 | 442 | 443 | /* play, playbar, gamepage, library */ 444 | ._3ydigb6zZAjJ0JCDgHwSYA._2AzIX5kl9k6JnxLfR5H4kX:has(.SVGIcon_Play)::before { 445 | content: "\f610" !important; 446 | font-size: 24px; 447 | color: #fff; 448 | } 449 | ._3ydigb6zZAjJ0JCDgHwSYA._2AzIX5kl9k6JnxLfR5H4kX:has(.SVGIcon_Play)>svg { 450 | display: none; 451 | } 452 | 453 | /* stop, playbar, gamepage, library */ 454 | ._3ydigb6zZAjJ0JCDgHwSYA._2AzIX5kl9k6JnxLfR5H4kX:has(.SVGIcon_X_Line)::before { 455 | content: "\f743" !important; 456 | font-size: 24px; 457 | color: #fff; 458 | } 459 | ._3ydigb6zZAjJ0JCDgHwSYA._2AzIX5kl9k6JnxLfR5H4kX:has(.SVGIcon_X_Line)>svg { 460 | display: none; 461 | } 462 | 463 | /* download, playbar, gamepage, library */ 464 | ._3ydigb6zZAjJ0JCDgHwSYA._2AzIX5kl9k6JnxLfR5H4kX:has(.SVGIcon_Download)::before { 465 | content: "\f151" !important; 466 | font-size: 24px; 467 | color: #fff; 468 | } 469 | ._3ydigb6zZAjJ0JCDgHwSYA._2AzIX5kl9k6JnxLfR5H4kX:has(.SVGIcon_Download)>svg { 470 | display: none; 471 | } 472 | 473 | /* pause, playbar, gamepage, library */ 474 | ._3ydigb6zZAjJ0JCDgHwSYA._2AzIX5kl9k6JnxLfR5H4kX:has(.SVGIcon_Pause)::before { 475 | content: "\f5ac" !important; 476 | font-size: 24px; 477 | color: #fff; 478 | } 479 | ._3ydigb6zZAjJ0JCDgHwSYA._2AzIX5kl9k6JnxLfR5H4kX:has(.SVGIcon_Pause)>svg { 480 | display: none; 481 | } 482 | 483 | /* uninstall, playbar, gamepage, library */ 484 | ._3ydigb6zZAjJ0JCDgHwSYA._2AzIX5kl9k6JnxLfR5H4kX:has(.SVGIcon_Trash)::before { 485 | content: "\f34d" !important; 486 | font-size: 24px; 487 | color: #fff; 488 | } 489 | ._3ydigb6zZAjJ0JCDgHwSYA._2AzIX5kl9k6JnxLfR5H4kX:has(.SVGIcon_Trash)>svg { 490 | display: none; 491 | } 492 | 493 | 494 | /* cloud checkmark, playbar, gamepage, library */ 495 | ._2cRYms-zZc4misk9tj3bt8 .tool-tip-source:nth-child(1) ._3bkqc-SsCg0b3FTEuewlK8._1UXbBdCvbg9tyZhc4owO4W::before { 496 | content: "\e3af" !important; 497 | font-size: 30px; 498 | color: #ffffff66; 499 | } 500 | ._2cRYms-zZc4misk9tj3bt8 .tool-tip-source:nth-child(1) ._3bkqc-SsCg0b3FTEuewlK8._1UXbBdCvbg9tyZhc4owO4W>svg { 501 | display: none; 502 | } 503 | 504 | /* cloud uptodate, playbar, gamepage, library */ 505 | ._2cRYms-zZc4misk9tj3bt8 .tool-tip-source:nth-child(2) ._3bkqc-SsCg0b3FTEuewlK8._1UXbBdCvbg9tyZhc4owO4W::before { 506 | content: "\e3c1" !important; 507 | font-size: 30px; 508 | color: #ffffff66; 509 | } 510 | ._2cRYms-zZc4misk9tj3bt8 .tool-tip-source:nth-child(2) ._3bkqc-SsCg0b3FTEuewlK8._1UXbBdCvbg9tyZhc4owO4W>svg { 511 | display: none; 512 | } 513 | 514 | /* cloud check, playbar, gamepage, library */ 515 | ._2cRYms-zZc4misk9tj3bt8 .tool-tip-source:nth-child(3) ._3bkqc-SsCg0b3FTEuewlK8._1UXbBdCvbg9tyZhc4owO4W::before { 516 | content: "\e3c4" !important; 517 | font-size: 30px; 518 | color: #ffffff66; 519 | } 520 | ._2cRYms-zZc4misk9tj3bt8 .tool-tip-source:nth-child(3) ._3bkqc-SsCg0b3FTEuewlK8._1UXbBdCvbg9tyZhc4owO4W>svg { 521 | display: none; 522 | } 523 | 524 | /* cloud upload, playbar, gamepage, library */ 525 | ._2cRYms-zZc4misk9tj3bt8 .tool-tip-source:nth-child(4) ._3bkqc-SsCg0b3FTEuewlK8._1UXbBdCvbg9tyZhc4owO4W::before { 526 | content: "\e3a9" !important; 527 | font-size: 30px; 528 | color: #ffffff66; 529 | } 530 | ._2cRYms-zZc4misk9tj3bt8 .tool-tip-source:nth-child(4) ._3bkqc-SsCg0b3FTEuewlK8._1UXbBdCvbg9tyZhc4owO4W>svg { 531 | display: none; 532 | } 533 | 534 | /* cloud download, playbar, gamepage, library */ 535 | ._2cRYms-zZc4misk9tj3bt8 .tool-tip-source:nth-child(5) ._3bkqc-SsCg0b3FTEuewlK8._1UXbBdCvbg9tyZhc4owO4W::before { 536 | content: "\e3a3" !important; 537 | font-size: 30px; 538 | color: #ffffff66; 539 | } 540 | ._2cRYms-zZc4misk9tj3bt8 .tool-tip-source:nth-child(5) ._3bkqc-SsCg0b3FTEuewlK8._1UXbBdCvbg9tyZhc4owO4W>svg { 541 | display: none; 542 | } 543 | 544 | 545 | /* last played, playbar, gamepage, library */ /* 546 | ._1mDAVT4sTzFRwJtlKCw2Ws>div>._1kiZKVbDe-9Ikootk57kpA._3pS8kMrtScuY1Qf-W8tmRV::before { 547 | content: "\e263" !important; 548 | font-size: 30px; 549 | color: #ffffff66; 550 | font-family: FluentSystemIcons-Filled !important; 551 | font-style: normal; 552 | font-weight: normal !important; 553 | font-variant: normal; 554 | text-transform: none; 555 | line-height: 1; 556 | -webkit-font-smoothing: antialiased; 557 | }*/ 558 | 559 | 560 | /* playtime, playbar, gamepage, library */ 561 | ._1tIg-QIrwMNtCm7NcYADyi._1GZdosVXnfrf69yU8DWASl::before { 562 | content: "\f840" !important; 563 | font-size: 30px; 564 | color: #ffffff66; 565 | } 566 | ._1tIg-QIrwMNtCm7NcYADyi._1GZdosVXnfrf69yU8DWASl>svg { 567 | display: none; 568 | } 569 | 570 | 571 | /* achievements, playbar, gamepage, library */ 572 | ._1tIg-QIrwMNtCm7NcYADyi.k-QNT9kzOEOvG0U_kGmwr::before { 573 | content: "\f67d" !important; 574 | font-size: 30px; 575 | color: #ffffff66; 576 | } 577 | ._1tIg-QIrwMNtCm7NcYADyi.k-QNT9kzOEOvG0U_kGmwr>svg { 578 | display: none; 579 | } 580 | 581 | 582 | /* settings, playbar, gamepage, library */ 583 | ._3qDWQGB0rtwM3qpXTb11Q-:has(.SVGIcon_Settings)::before { 584 | content: "\f6b3" !important; 585 | font-size: 22px; 586 | color: #757f8c; 587 | } 588 | ._3qDWQGB0rtwM3qpXTb11Q-:has(.SVGIcon_Settings):hover::before { 589 | color: #fff; 590 | } 591 | ._3qDWQGB0rtwM3qpXTb11Q-:has(.SVGIcon_Settings)>svg { 592 | display: none; 593 | } 594 | 595 | 596 | /* gamepad, playbar, gamepage, library */ 597 | ._3qDWQGB0rtwM3qpXTb11Q-:has(>svg)::before { 598 | content: "\eeb9" !important; 599 | font-size: 22px; 600 | color: #757f8c; 601 | } 602 | ._3qDWQGB0rtwM3qpXTb11Q-:has(>svg):hover::before { 603 | color: #fff; 604 | } 605 | ._3qDWQGB0rtwM3qpXTb11Q-:has(>svg)>svg { 606 | display: none; 607 | } 608 | 609 | 610 | /* info, playbar, gamepage, library */ 611 | ._3qDWQGB0rtwM3qpXTb11Q- .zvLq1GUCH3yLuqv_TXBJ1:has(.SVGIcon_Information)::before { 612 | content: "\f4ab" !important; 613 | font-size: 22px; 614 | color: #757f8c; 615 | } 616 | ._3qDWQGB0rtwM3qpXTb11Q-:hover .zvLq1GUCH3yLuqv_TXBJ1:has(.SVGIcon_Information)::before { 617 | color: #fff; 618 | } 619 | ._3qDWQGB0rtwM3qpXTb11Q- .zvLq1GUCH3yLuqv_TXBJ1:has(.SVGIcon_Information)>svg { 620 | display: none; 621 | } 622 | 623 | 624 | /* heart, playbar, gamepage, library */ 625 | ._3qDWQGB0rtwM3qpXTb11Q-._21hXW2oDD7zvNsoOaW7Yob::before { 626 | content: "\f47e" !important; 627 | font-size: 22px; 628 | color: #757f8c; 629 | } 630 | ._3qDWQGB0rtwM3qpXTb11Q-._21hXW2oDD7zvNsoOaW7Yob:hover::before { 631 | color: rgb(var(--accent-1), .7); 632 | } 633 | ._3qDWQGB0rtwM3qpXTb11Q-._21hXW2oDD7zvNsoOaW7Yob>svg { 634 | display: none; 635 | } 636 | 637 | /* heart active, playbar, gamepage, library */ 638 | ._3qDWQGB0rtwM3qpXTb11Q-._21hXW2oDD7zvNsoOaW7Yob._2WaHZuAetbqENmqDthu3nl::before { 639 | content: "\f47e" !important; 640 | font-size: 22px; 641 | color: rgb(var(--accent-1)); 642 | } 643 | ._3qDWQGB0rtwM3qpXTb11Q-._21hXW2oDD7zvNsoOaW7Yob._2WaHZuAetbqENmqDthu3nl:hover::before { 644 | content: "\ef25" !important; 645 | color: rgb(var(--red)); 646 | } 647 | 648 | 649 | 650 | 651 | /* setting, store, news */ 652 | ._1zyVyzldzUj085oNa8Y0r1._3cMESjaODP5L2fXHzANkNT::before { 653 | content: "\f6b3" !important; 654 | font-size: 17px; 655 | color: #67707b; 656 | } 657 | ._1zyVyzldzUj085oNa8Y0r1._3cMESjaODP5L2fXHzANkNT:hover::before { 658 | color: #fff; 659 | } 660 | ._1zyVyzldzUj085oNa8Y0r1._3cMESjaODP5L2fXHzANkNT>svg { 661 | display: none; 662 | } 663 | 664 | /* close setting, store, news */ 665 | ._2vMIlVM2BeWTC0m5_Ys2WN::before { 666 | content: "\f36a" !important; 667 | font-size: 17px; 668 | color: #67707b; 669 | } 670 | ._2vMIlVM2BeWTC0m5_Ys2WN:hover::before { 671 | color: #fff; 672 | } 673 | ._2vMIlVM2BeWTC0m5_Ys2WN>svg { 674 | display: none; 675 | } -------------------------------------------------------------------------------- /src/icons/hltb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/icons/play.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/js/friends.custom.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/src/js/friends.custom.js -------------------------------------------------------------------------------- /src/js/libraryroot.custom.js: -------------------------------------------------------------------------------- 1 | const waitForElement = (selector, parent = document) => { 2 | return new Promise((resolve) => { 3 | const el = parent.querySelector(selector); 4 | if (el) { 5 | resolve(el); 6 | } 7 | 8 | const observer = new MutationObserver(() => { 9 | const el = parent.querySelector(selector); 10 | if (el) { 11 | resolve(el); 12 | observer.disconnect(); 13 | } 14 | }); 15 | 16 | observer.observe(document.body, { 17 | subtree: true, 18 | childList: true, 19 | }); 20 | }); 21 | }; 22 | 23 | async function syncWidthIfTargetHidden() { 24 | const sourceClass = '._9sPoVBFyE_vE87mnZJ5aB'; 25 | const targetClass = '.RGNMWtyj73_-WdhflrmuY'; 26 | 27 | const sourceEl = await waitForElement(sourceClass); 28 | const targetEl = await waitForElement(targetClass); 29 | 30 | const setWidth = () => { 31 | const width = sourceEl.style.width; 32 | if (width) { 33 | targetEl.style.width = width; 34 | } 35 | }; 36 | 37 | const removeWidth = () => { 38 | targetEl.style.removeProperty('width'); 39 | }; 40 | 41 | const handleTargetDisplayChange = () => { 42 | if (targetEl.style.display === 'none') { 43 | setWidth(); 44 | } else { 45 | removeWidth(); 46 | } 47 | }; 48 | 49 | // Initial check 50 | handleTargetDisplayChange(); 51 | 52 | // Watch for style changes on source 53 | const sourceObserver = new MutationObserver((mutations) => { 54 | for (const mutation of mutations) { 55 | if (mutation.type === 'attributes' && mutation.attributeName === 'style') { 56 | if (targetEl.style.display === 'none') { 57 | setWidth(); 58 | } 59 | } 60 | } 61 | }); 62 | 63 | sourceObserver.observe(sourceEl, { 64 | attributes: true, 65 | attributeFilter: ['style'], 66 | }); 67 | 68 | // Watch for style changes on target (especially display) 69 | const targetObserver = new MutationObserver((mutations) => { 70 | for (const mutation of mutations) { 71 | if (mutation.type === 'attributes' && mutation.attributeName === 'style') { 72 | handleTargetDisplayChange(); 73 | } 74 | } 75 | }); 76 | 77 | targetObserver.observe(targetEl, { 78 | attributes: true, 79 | attributeFilter: ['style'], 80 | }); 81 | } 82 | 83 | syncWidthIfTargetHidden(); -------------------------------------------------------------------------------- /src/js/notifications.custom.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/src/js/notifications.custom.js -------------------------------------------------------------------------------- /src/js/webkit.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SpaceTheme/Steam/09322b180752111035c423907fa39dc567eea392/src/js/webkit.js -------------------------------------------------------------------------------- /webkit.css: -------------------------------------------------------------------------------- 1 | @import url("./src/css/regular.css"); 2 | @import url("./src/css/webkit/agecheck.css"); 3 | @import url("./src/css/webkit/cart.css"); 4 | @import url("./src/css/webkit/game.css"); 5 | @import url("./src/css/webkit/home.css"); 6 | @import url("./src/css/webkit/news.css"); 7 | @import url("./src/css/webkit/profile.css"); 8 | @import url("./src/css/webkit/wishlist.css"); 9 | 10 | /* 11 | & Base 12 | */ 13 | 14 | body.v6, 15 | body.v6.game_bg, 16 | body.v6 .game_page_background.game, 17 | .home_cluster_ctn { 18 | background: transparent !important; 19 | background-color: transparent !important; 20 | } 21 | body.v6::before, 22 | body.v6.game_bg::before, 23 | body.v6 .game_page_background::before { 24 | content: ""; 25 | z-index: -1; 26 | position: fixed; 27 | display: block; 28 | width: 100vw; 29 | height: 100vh; 30 | border-radius: 8px; 31 | background-color: rgb(var(--color-1)); 32 | } 33 | 34 | body.v6::-webkit-scrollbar { 35 | background-color: rgb(var(--color-1)); 36 | border-radius: 0 8px 8px 0; 37 | } 38 | 39 | 40 | 41 | 42 | /* 43 | & Navbar/Header 44 | */ 45 | #store_header .content { 46 | position: fixed !important; 47 | top: 0; 48 | left: 50%; 49 | transform: translate(-50%); 50 | display: flex; 51 | gap: 12px; 52 | flex-direction: row-reverse; 53 | align-items: center; 54 | justify-content: space-between; 55 | width: 100% !important; 56 | max-width: 1000px; 57 | height: auto !important; 58 | margin: 12px 0 0 !important; 59 | padding: 6px 16px; 60 | border-radius: 8px; 61 | background-color: rgb(var(--color-2)); 62 | box-shadow: 0px 4px 8px 0px rgba(var(--background), 0.5); 63 | } 64 | 65 | #store_header .content:not(:has(#store_nav_area)) { 66 | display: none; 67 | } 68 | 69 | 70 | 71 | /* Nav Area */ 72 | #store_header #store_nav_area { 73 | position: unset; 74 | width: -webkit-fill-available; 75 | height: unset; 76 | } 77 | 78 | #store_header #store_nav_area .store_nav_bg { 79 | height: auto; 80 | margin: 0; 81 | background: unset; 82 | box-shadow: none; 83 | } 84 | 85 | 86 | #store_header .store_nav_bg .store_nav { 87 | gap: 12px; 88 | height: unset; 89 | } 90 | 91 | 92 | /* Button */ 93 | #store_header .store_nav_bg .tab, 94 | #store_header .store_nav_bg .tab .pulldown, 95 | #store_header .store_nav_bg .tab span { 96 | padding: 0; 97 | line-height: 32px; 98 | background: none !important; 99 | } 100 | 101 | #store_header .store_nav_bg .tab .pulldown { 102 | padding: 0; 103 | line-height: 32px; 104 | } 105 | 106 | #store_header .store_nav_bg .search_flex_spacer { 107 | display: none; 108 | } 109 | 110 | 111 | /* Avatar */ 112 | #store_header .store_nav_bg .tab .foryou_avatar { 113 | display: none; 114 | } 115 | 116 | 117 | /* Searchbar */ 118 | #store_header .store_nav_bg .search_area { 119 | display: flex; 120 | flex-shrink: unset; 121 | justify-content: end; 122 | align-items: center; 123 | max-width: unset; 124 | } 125 | #store_header .store_nav_bg .search_area #store_search { 126 | width: 100%; 127 | max-width: 430px; 128 | height: 32px; 129 | padding: 0; 130 | } 131 | 132 | 133 | #store_header .store_nav_bg .search_area #store_search .searchbox { 134 | height: 32px; 135 | margin: 0 6px; 136 | padding: 0 12px; 137 | border: none; 138 | border-radius: 8px; 139 | background-color: rgba(var(--color-1)); 140 | box-shadow: none; 141 | } 142 | 143 | #store_header .store_nav_bg .search_area #store_search .searchbox input { 144 | height: 32px; 145 | margin: 0; 146 | } 147 | 148 | #store_header .store_nav_bg .search_area #store_search .searchbox input.default { 149 | height: 32px; 150 | margin: 0; 151 | text-shadow: none; 152 | font-weight: 500; 153 | text-transform: capitalize; 154 | 155 | &::placeholder { 156 | color: #8d8d8d; 157 | } 158 | } 159 | 160 | #store_header .store_nav_bg .search_area #store_search .searchbox #store_search_link img { 161 | top: 0; 162 | right: 0; 163 | width: 32px; 164 | height: 32px; 165 | background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYuMDAxMDY4IiBoZWlnaHQ9IjI1Ljk5OTkwOCIgdmlld0JveD0iMCAwIDI2LjAwMTEgMjUuOTk5OSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+Cgk8ZGVzYz4KCQkJQ3JlYXRlZCB3aXRoIFBpeHNvLgoJPC9kZXNjPgoJPGRlZnMvPgoJPHBhdGggaWQ9IlNoYXBlIiBkPSJNMTAuNSAwQzQuNyAwIDAgNC43IDAgMTAuNUMwIDE2LjI5IDQuNyAyMSAxMC41IDIxQzEyLjk0IDIxIDE1LjIgMjAuMTYgMTYuOTggMTguNzVMMjMuODYgMjUuNjNDMjQuMzUgMjYuMTIgMjUuMTQgMjYuMTIgMjUuNjMgMjUuNjNDMjYuMTIgMjUuMTQgMjYuMTIgMjQuMzUgMjUuNjMgMjMuODZMMTguNzUgMTYuOThDMjAuMTYgMTUuMiAyMSAxMi45NCAyMSAxMC41QzIxIDQuNyAxNi4yOSAwIDEwLjUgMFpNMi41IDEwLjVDMi41IDYuMDggNi4wOCAyLjUgMTAuNSAyLjVDMTQuOTEgMi41IDE4LjUgNi4wOCAxOC41IDEwLjVDMTguNSAxNC45MSAxNC45MSAxOC41IDEwLjUgMTguNUM2LjA4IDE4LjUgMi41IDE0LjkxIDIuNSAxMC41WiIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1vcGFjaXR5PSIxLjAwMDAwMCIgZmlsbC1ydWxlPSJub256ZXJvIi8+Cjwvc3ZnPgo="); 166 | background-size: 16px; 167 | background-repeat: no-repeat; 168 | background-position: center; 169 | } 170 | 171 | 172 | /* Searchbar Suggests */ 173 | #store_header .store_nav_bg .search_area .search_suggest { 174 | top: 53px; 175 | right: unset; 176 | border-radius: 8px; 177 | box-shadow: none; 178 | } 179 | 180 | 181 | #store_header .store_nav_bg .search_area .search_suggest .popup_body { 182 | padding: 12px; 183 | border-radius: 8px; 184 | border: 3px solid rgb(var(--color-5)) !important; 185 | background-color: rgb(var(--color-2)); 186 | } 187 | 188 | #store_header .store_nav_bg .search_area .search_suggest .popup_body #search_suggestion_contents { 189 | display: flex; 190 | gap: 6px; 191 | flex-direction: row; 192 | flex-wrap: wrap; 193 | } 194 | 195 | 196 | /* Searchbar Suggests Matches */ 197 | #store_header .store_nav_bg .search_area .search_suggest .popup_body .match { 198 | padding: 0; 199 | } 200 | #store_header .store_nav_bg .search_area .search_suggest .popup_body .match:hover { 201 | background-color: unset; 202 | 203 | & * { 204 | color: #fff; 205 | } 206 | } 207 | #store_header .store_nav_bg .search_area .search_suggest .popup_body .match:hover * { 208 | color: #fff; 209 | } 210 | 211 | #store_header .store_nav_bg .search_area .search_suggest .popup_body .match_app { 212 | width: 100%; 213 | 214 | & * { 215 | color: #8d8d8d; 216 | } 217 | } 218 | 219 | 220 | /* Searchbar Suggests Matches Cards */ 221 | #store_header .store_nav_bg .search_area .search_suggest .popup_body :is(.match_creator, .match_tag) { 222 | width: calc(50% - 3px); 223 | height: auto; 224 | padding: 6px; 225 | border-radius: 8px; 226 | 227 | /*&:nth-last-of-type(1) { 228 | width: 100%; 229 | }*/ 230 | } 231 | #store_header .store_nav_bg .search_area .search_suggest .popup_body .match_tag { 232 | grid-template-areas: "name name name name" "price price price price"; 233 | } 234 | 235 | #store_header .store_nav_bg .search_area .search_suggest .popup_body .match_creator { 236 | grid-template-areas: "img name name name" "img price price price"; 237 | } 238 | 239 | 240 | #store_header .store_nav_bg .search_area .search_suggest .popup_body :is(.match_creator, .match_tag) .match_background_image { 241 | top: unset; 242 | bottom: unset; 243 | left: unset; 244 | right: 0; 245 | height: 100%; 246 | filter: blur(2px) brightness(0.5); 247 | transition: all 0.2s ease-in-out; 248 | } 249 | #store_header .store_nav_bg .search_area .search_suggest .popup_body :is(.match_creator:hover, .match_tag:hover) .match_background_image { 250 | filter: blur(2px) brightness(0.7); 251 | transform: scale(1.05); 252 | } 253 | 254 | #store_header .store_nav_bg .search_area .search_suggest .popup_body :is(.match_creator, .match_tag) .match_background_image img { 255 | height: 100%; 256 | filter: none; 257 | -webkit-mask-image: none; 258 | mask-image: none; 259 | } 260 | 261 | 262 | #store_header .store_nav_bg .search_area .search_suggest .popup_body :is(.match_creator, .match_tag) .match_name { 263 | padding: 0; 264 | font-size: 13px; 265 | } 266 | #store_header .store_nav_bg .search_area .search_suggest .popup_body :is(.match_creator, .match_tag) .match_name div { 267 | display: none; 268 | } 269 | #store_header .store_nav_bg .search_area .search_suggest .popup_body :is(.match_creator, .match_tag) .match_name span { 270 | margin: 0; 271 | padding: 4px 6px; 272 | font-size: 12px; 273 | border-radius: 4px; 274 | background-color: rgb(var(--color-5)); 275 | } 276 | 277 | 278 | #store_header .store_nav_bg .search_area .search_suggest .popup_body .match_creator .match_img { 279 | width: 38px; 280 | height: 38px; 281 | border-radius: 8px; 282 | } 283 | #store_header .store_nav_bg .search_area .search_suggest .popup_body .match_creator .match_img img { 284 | width: 38px; 285 | height: 38px; 286 | } 287 | 288 | #store_header .store_nav_bg .search_area .search_suggest .popup_body :is(.match_creator, .match_tag) .match_subtitle { 289 | justify-content: start; 290 | padding: 0; 291 | font-size: 12px; 292 | } 293 | 294 | 295 | 296 | 297 | 298 | /* Nav Controls */ 299 | #store_header #store_controls { 300 | position: unset; 301 | } 302 | 303 | #store_header #store_controls .cart_status_flex:has(._1LXDg91iImWld4-5gWdGx4) { 304 | gap: 6px; 305 | } 306 | 307 | 308 | /* Wishlist button */ 309 | #store_header #store_controls .store_header_btn:has(#wishlist_link) { 310 | float: unset; 311 | height: unset; 312 | margin: 0; 313 | border-radius: 0; 314 | background: none; 315 | box-shadow: none; 316 | } 317 | 318 | #store_header #store_controls .store_header_btn #wishlist_link { 319 | display: flex; 320 | gap: 2px; 321 | align-items: center; 322 | width: max-content; 323 | margin: 0; 324 | padding: 6px 12px; 325 | font-size: 0; 326 | font-weight: 600; 327 | border-radius: 6px; 328 | color: transparent; 329 | background: none; 330 | background-color: rgb(var(--blue), .2); 331 | } 332 | #store_header #store_controls .store_header_btn #wishlist_link:hover { 333 | background-color: rgb(var(--blue), .4) !important; 334 | } 335 | 336 | #store_header #store_controls .store_header_btn #wishlist_link::before { 337 | content: "\f47e" !important; 338 | font-size: 20px; 339 | color: rgb(var(--blue)); 340 | font-family: FluentSystemIcons-Filled !important; 341 | font-style: normal; 342 | font-weight: normal !important; 343 | font-variant: normal; 344 | text-transform: none; 345 | line-height: 18px; 346 | -webkit-font-smoothing: antialiased; 347 | } 348 | #store_header #store_controls .store_header_btn #wishlist_link #wishlist_item_count_value { 349 | font-size: 11px; 350 | color: rgb(var(--blue)); 351 | } 352 | 353 | 354 | 355 | /* Cart button */ 356 | #store_header #store_controls ._1LXDg91iImWld4-5gWdGx4 { 357 | margin: 0; 358 | } 359 | 360 | #store_header #store_controls ._2Fm-3XmbFRXR6yOZiRB0-d { 361 | display: flex; 362 | gap: 2px; 363 | align-items: center; 364 | width: max-content; 365 | padding: 6px 12px; 366 | font-weight: 600; 367 | border-radius: 6px; 368 | color: rgb(var(--green)); 369 | background: none; 370 | background-color: rgba(var(--green), 0.2); 371 | 372 | &:hover { 373 | background-color: rgba(var(--green), 0.4); 374 | } 375 | } 376 | 377 | #store_header #store_controls ._2Fm-3XmbFRXR6yOZiRB0-d::before { 378 | content: "\f26b" !important; 379 | font-size: 20px; 380 | color: rgb(var(--green)); 381 | font-family: FluentSystemIcons-Filled !important; 382 | font-style: normal; 383 | font-weight: normal !important; 384 | font-variant: normal; 385 | text-transform: none; 386 | line-height: 18px; 387 | -webkit-font-smoothing: antialiased; 388 | } 389 | #store_header #store_controls ._2Fm-3XmbFRXR6yOZiRB0-d ._1P_gEVnGARDlC_80XwA2tX { 390 | display: none; 391 | } 392 | 393 | 394 | 395 | /* 396 | & Footer 397 | */ 398 | html body.v6 #footer { 399 | width: fit-content; 400 | margin: 0 auto; 401 | padding: 0 16px 16px; 402 | border-radius: 8px; 403 | background-color: rgb(var(--color-2)); 404 | } --------------------------------------------------------------------------------