Last active
February 25, 2026 19:56
-
-
Save cworld1/920d8fb313a61ec0fc24eb44dbe777d3 to your computer and use it in GitHub Desktop.
Better experience of PRTS.Wiki, include dark mode & story player
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ==UserStyle== | |
| * Basic | |
| @name Pure PRTS.Wiki | |
| @namespace https://github.com/cworld1 | |
| @version 1.3.0 | |
| @description Better experience of PRTS.Wiki | |
| @author CWorld (https://cworld0.com/) | |
| * Project | |
| @homepageURL https://gist.github.com/cworld1/920d8fb313a61ec0fc24eb44dbe777d3 | |
| @homepageURL https://greasyfork.org/en/scripts/567490-pure-prts | |
| @updateURL https://update.greasyfork.org/scripts/567490/Pure%20PRTS.user.css | |
| @license GPL-3.0 | |
| * Var | |
| @var color link "Link color" #83b2ff | |
| @var color fg "Font color" #e9eff4 | |
| @var color bg "Background color" #0B0B10 | |
| ==/UserStyle== */ | |
| @-moz-document url-prefix("https://prts.wiki/w/") { | |
| /* Layout */ | |
| div#MenuSidebar { | |
| top: 120px; | |
| } | |
| #content { | |
| margin-top: 100px; | |
| } | |
| /* Header */ | |
| #mw-head { | |
| margin-top: -96px; | |
| & nav.vector-menu-tabs-legacy { | |
| & * { | |
| background: none; | |
| } | |
| & li.mw-list-item { | |
| padding: 0 2px; | |
| height: 36px; | |
| display: flex !important; | |
| align-items: center; | |
| } | |
| & a { | |
| padding: 0 10px; | |
| height: auto; | |
| } | |
| } | |
| & #p-cactions.vector-menu-dropdown { | |
| height: 36px; | |
| display: flex; | |
| align-items: center; | |
| & > .vector-menu-heading { | |
| padding: 0 10px; | |
| } | |
| } | |
| & #p-search.vector-search-box { | |
| margin: 0 3em 0 0; | |
| & > form { | |
| margin: 0; | |
| & .vector-search-box-input { | |
| height: 40px; | |
| padding-inline: 10px; | |
| } | |
| & #searchButton { | |
| box-sizing: content-box; | |
| padding-inline: 10px; | |
| } | |
| } | |
| } | |
| } | |
| /* Sidebar */ | |
| #p-logo { | |
| height: auto; | |
| & > a { | |
| max-height: 100px; | |
| background-size: contain; | |
| width: inherit; | |
| } | |
| } | |
| /* Hightlight the selflink */ | |
| a.mw-selflink { | |
| background: #fff80069; | |
| } | |
| /* Dark mode */ | |
| @media (prefers-color-scheme: dark) { | |
| /* Backgroud */ | |
| body { | |
| background-color: var(--bg) !important; | |
| &::before { | |
| height: 1080px; | |
| background: linear-gradient(transparent 30px, var(--bg) 180px); | |
| } | |
| & .mw-body { | |
| background: linear-gradient(#ffffff82, #ffffff61 80px) !important; | |
| border-color: #ffffff6e; | |
| border-top-width: 2px; | |
| } | |
| } | |
| /* Basic */ | |
| ul { | |
| list-style-image: none; | |
| } | |
| /* Header */ | |
| #mw-head { | |
| & nav.vector-menu-tabs-legacy li.mw-list-item { | |
| background: #6c6c6c6e; | |
| border-color: #ffffff61; | |
| & > a { | |
| color: var(--fg); | |
| } | |
| &.selected { | |
| background-color: #ffffffb0; | |
| & > a { | |
| color: #000000; | |
| } | |
| } | |
| } | |
| & #p-cactions.vector-menu-dropdown { | |
| background: #6c6c6c6e; | |
| border-color: #ffffff61; | |
| & > .vector-menu-heading { | |
| color: var(--fg); | |
| &::after { | |
| display: none; | |
| } | |
| } | |
| } | |
| } | |
| /* Content */ | |
| .mw-body .mw-body-content > :where(.mw-content-ltr, .mw-category-generated):not(.flow-board-page) { | |
| /* Foreground */ | |
| & :where(.mw-heading, h2, h3, h4, h5, h6) { | |
| color: #fff | |
| } | |
| & > *:not(div:not(.mw-references-wrap, .tabber *:not(tabber__panel div), #mw-pages), table, pre), | |
| & > #toc .tocnumber, | |
| & > .nomobile :where(.mp-operators, .mp-today, .mp-extranav, .mp-siteinfo) { | |
| color: var(--fg); | |
| } | |
| /* Link */ | |
| & > :not( | |
| div.charinfo-container, div#rightToc, table.navbox, | |
| & .nomobile:where(& > table.navbox, .cbox-autonarrow, .pathnav2) | |
| ) a, | |
| & .toctogglelabel { | |
| color: var(--link); | |
| } | |
| /* Card */ | |
| & > table:not(.navbox, & .mc-tooltips), | |
| & > #toc { | |
| background: #0000003d; | |
| color: var(--fg); | |
| } | |
| } | |
| /* Footer */ | |
| .mw-footer { | |
| & a { | |
| color: var(--link); | |
| } | |
| & li { | |
| color: var(--fg); | |
| } | |
| } | |
| } | |
| } | |
| @-moz-document url-prefix("https://prts.wiki/w/") { | |
| /* Scene */ | |
| .button_style { | |
| top: 18px; | |
| } | |
| /* hide unused button */ | |
| #button_report.normal, | |
| #button_reset.right { | |
| transition: opacity 0.3s; | |
| opacity: 0; | |
| } | |
| #button_report.normal:hover, | |
| #button_reset.right:hover { | |
| opacity: 1; | |
| } | |
| /* lower highlight of other buttons */ | |
| #button_playback_all.normal, | |
| #button_fullscreen, | |
| .button_style.right { | |
| transition: opacity 0.3s; | |
| opacity: 0.4; | |
| } | |
| #button_playback_all.normal:hover, | |
| #button_fullscreen:hover, | |
| .button_style.right:hover { | |
| opacity: 1; | |
| } | |
| /* left button */ | |
| #button_playback_all.normal { | |
| left: 80px; | |
| } | |
| #button_report.normal { | |
| left: 130px; | |
| } | |
| /* right button */ | |
| .button_style.right { | |
| width: 60px; | |
| } | |
| #button_auto.right { | |
| width: 90px; | |
| } | |
| #button_auto { | |
| right: 80px; | |
| } | |
| #button_reset { | |
| right: 180px; | |
| } | |
| /* move fullscreen mode button to right */ | |
| #button_fullscreen.return { | |
| background-image: url(https://static.prts.wiki/assets/scenario/ui/ui_fullscreen.png); | |
| background-size: 30px 30px; | |
| } | |
| .button_style.left:not(.hidden) ~ #button_fullscreen { | |
| left: inherit; | |
| right: 40px; | |
| float: right; | |
| height: 20px; | |
| width: 20px; | |
| top: 23px; | |
| font-size: 9px; | |
| line-height: 2.2; | |
| } | |
| .button_style.left:not(.hidden) ~ #button_fullscreen.return::after { | |
| content: "Esc"; | |
| } | |
| /* prove dialog style */ | |
| .dialog_style.header { | |
| background-image: linear-gradient(rgba(0, 0, 0, .40) 10%, rgba(0, 0, 0, 0) 50%); | |
| } | |
| .dialog_style.footer { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .7) 40%); | |
| } | |
| /* bigger size of log */ | |
| .mw-content-ltr ul { | |
| margin-left: 0.7em; | |
| } | |
| .log_style { | |
| left: 0; | |
| width: 930px; | |
| } | |
| .log_style li > em, | |
| .log_style li > span { | |
| font-size: 18px; | |
| } | |
| .log_style li > em { | |
| width: 170px; | |
| } | |
| .log_style li > span { | |
| left: 190px; | |
| width: 730px; | |
| } | |
| /* bigger size of dialog */ | |
| .dialog_style.footer > div.content { | |
| font-size: 20px; | |
| margin-top: 1px; | |
| } | |
| .log_style li { | |
| padding: 7px 0px; | |
| height: 22px; | |
| } | |
| } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Better experience of PRTS.Wiki.
Features:
Screenshot:
Install
Install browser plugin like Stylus, which support UserCSS. Then click install it!.
Or you can use Javascript manager like tampermonkey to install the transformed version (this may cause some small bugs or lake of customization).
Links
Greasyfork: https://greasyfork.org/en/scripts/567490-pure-prts-wiki