Last active
January 13, 2026 08:23
-
-
Save msorair/030d08c369f6cedf3cb2798f409b6f86 to your computer and use it in GitHub Desktop.
surfingkey theme
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
| const hintsCss = | |
| "font-size: 10pt; font-family: 'JetBrains Mono NL', 'Cascadia Code', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid #5d94e666; color: #e0def4 !important; background: initial; background-color: #232136"; | |
| api.Hints.style(hintsCss); | |
| api.Hints.style(hintsCss, "text"); | |
| settings.scrollStepSize = 280; | |
| api.RUNTIME('updateSettings', {settings: {"noPdfViewer": 1}}); | |
| api.unmap("<Ctrl-a>"); | |
| api.unmap("<Ctrl-i>"); | |
| api.unmap("<Ctrl-j>"); | |
| api.unmap("<Ctrl-h>"); | |
| api.iunmap(":"); | |
| api.iunmap("<Ctrl-a>"); | |
| api.iunmap("<Ctrl-e>"); | |
| api.iunmap("<Ctrl-a>"); | |
| api.iunmap("<Ctrl-j>"); | |
| api.iunmap("<Ctrl-h>"); | |
| api.vunmap("<Ctrl-j>"); | |
| api.vunmap("<Ctrl-h>"); | |
| // Util to remove URL query and hash. | |
| // ⚠️ It's so rude that some URL would break due to necessary query params missing. | |
| // Use a well maintained URL Cleaning Extension instead. Or purify only those targets that you quite sure. | |
| function _cleanupUrl(url, doCleanup) { | |
| return doCleanup ? /http[^#\?]*/.exec(url)[0] : url; | |
| } | |
| // Custimized Bookmark | |
| function _getCurrentTabTitle(doCleanup) { | |
| let title = document.title; | |
| const url = location.href; | |
| const urlHost = location.hostname; | |
| const urlPath = location.pathname; | |
| let prefix = ""; | |
| // Get actual article title for Wechat Public Account page. 获取微信公众号文章的实际标题 | |
| // You may don't need this if you are using dedicated User Script. 如果使用了专门的 User Script, 这个功能就不必要了。 | |
| // e.g. [修改微信公众号文章title标题](https://greasyfork.org/en/scripts/375439-%E4%BF%AE%E6%94%B9%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E6%96%87%E7%AB%A0title%E6%A0%87%E9%A2%98) | |
| if (urlHost === 'mp.weixin.qq.com') { | |
| title = document.getElementById('activity-name').innerText | |
| } | |
| // For Zhihu. 精简私信、消息提示文字 | |
| if (urlHost.includes("www.zhihu.com")) { | |
| title = title.replace(/\(\d+.*(消息|私信)\) /, "").replace(" - 知乎", ""); | |
| } | |
| // For Github. | |
| if (urlHost === "github.com") { | |
| const issuesRegexPattern = /issues\/\d+$/; | |
| const prRegexPattern = /pull\/\d+$/; | |
| if (issuesRegexPattern.test(urlPath)) { | |
| // Github issue detail page. Simplify to ${repo-name}#${issue-no}. e.g. [vitejs/vite#123](https://github.com/vitejs/vite/issues/123) | |
| const issuePathParts = /\/(.*)\/issues\/(\d+)$/.exec(urlPath); | |
| const [, repoName, issueNo] = issuePathParts; | |
| title = `${repoName}#${issueNo}`; | |
| } else if (prRegexPattern.test(urlPath)) { | |
| // Github pull request detail page. Simplify to ${repo-name} PR #${pr-no}. e.g. [vitejs/vite PR #456](https://github.com/vitejs/vite/pull/456) | |
| const prPathParts = /\/(.*)\/pull\/(\d+)$/.exec(urlPath); | |
| const [, repoName, prNo] = prPathParts; | |
| title = `${repoName} PR #${prNo}`; | |
| } | |
| } | |
| return { prefix, title, url: _cleanupUrl(url, doCleanup) }; | |
| } | |
| // Custimized Markdown Format Bookmark | |
| function _getCurrentTabMarkdown(doCleanup) { | |
| const { prefix, title, url } = _getCurrentTabTitle(doCleanup); | |
| return `${prefix}[${title}](${url})`; | |
| } | |
| api.mapkey( | |
| "ybb", | |
| "Copy current tab in Markdown format", | |
| function () { | |
| // api.Front.showPopup(_getCurrentTabMarkdown()); | |
| api.Clipboard.write(_getCurrentTabMarkdown()); | |
| }, | |
| {} | |
| ); | |
| settings.theme = ` | |
| :root { | |
| --bg: #f4f4f4; | |
| --fg: #474747; | |
| --accent: #5d94e6; | |
| --hint: #4e4e4e; | |
| --kbd-bg: #f4f4f4; | |
| --frame-bg: #cdf5cd; | |
| --highlight: #ff828f; | |
| --cyan: #9ccfd8; | |
| --muted: #acacac; | |
| --shadow: #bababa; | |
| --yellow: #f6c177; | |
| --tab-icon-padding: 0.2rem; | |
| --tab-wrap-padding: 0.8em; | |
| --tab-hint-border: 0.1rem; | |
| } | |
| .sk_theme { | |
| background: var(--bg); | |
| color: var(--fg); | |
| } | |
| .sk_theme input { | |
| color: var(--fg); | |
| } | |
| .sk_theme .url { | |
| color: var(--accent); | |
| } | |
| .sk_theme .annotation { | |
| color: var(--hint); | |
| } | |
| .sk_theme kbd { | |
| background: var(--kbd-bg); | |
| color: var(--fg); | |
| } | |
| .sk_theme .frame { | |
| background: var(--frame-bg); | |
| } | |
| .sk_theme .omnibar_highlight { | |
| color: var(--highlight); | |
| } | |
| .sk_theme .omnibar_folder { | |
| color: var(--fg); | |
| } | |
| .sk_theme .omnibar_timestamp { | |
| color: var(--cyan); | |
| } | |
| .sk_theme .omnibar_visitcount { | |
| color: var(--yellow); | |
| } | |
| .sk_theme .prompt, .sk_theme .resultPage { | |
| color: var(--fg); | |
| } | |
| .sk_theme .feature_name { | |
| color: var(--fg); | |
| } | |
| .sk_theme .separator { | |
| color: var(--muted); | |
| } | |
| .sk_omnibar_middle { | |
| top: 10%; | |
| border-radius: 4px; | |
| } | |
| .sk_omnibar_bottom { | |
| bottom: 0; | |
| border-radius: 4px 4px 0px 0px; | |
| } | |
| #sk_omnibarSearchArea { | |
| display: flex; | |
| align-items: center; | |
| border-bottom: 1px solid var(--muted); | |
| } | |
| .sk_omnibar_middle #sk_omnibarSearchArea { | |
| margin: 0.5rem 1rem; | |
| } | |
| .sk_omnibar_bottom #sk_omnibarSearchArea { | |
| margin: 0.2rem 1rem; | |
| } | |
| .sk_omnibar_middle #sk_omnibarSearchResult>ul { | |
| margin-top: 0; | |
| } | |
| .sk_omnibar_bottom #sk_omnibarSearchResult>ul { | |
| margin-bottom: 0; | |
| } | |
| #sk_omnibarSearchResult { | |
| max-height: 60vh; | |
| overflow: hidden; | |
| margin: 0rem 0.6rem; | |
| } | |
| #sk_omnibarSearchResult:empty { | |
| display: none; | |
| } | |
| #sk_omnibarSearchResult>ul { | |
| padding: 0; | |
| } | |
| #sk_omnibarSearchResult>ul>li { | |
| padding: .5rem 1rem; | |
| } | |
| .sk_theme div.table { | |
| display: table; | |
| } | |
| .sk_theme div.table>* { | |
| display: table-cell; | |
| } | |
| #sk_omnibarSearchResult li div.title { | |
| text-align: left; | |
| } | |
| #sk_omnibarSearchResult li.focused div.url { | |
| white-space: normal; | |
| } | |
| #sk_omnibarSearchResult li span.annotation { | |
| float: right; | |
| } | |
| #sk_omnibarSearchResult .tab_in_window { | |
| display: inline-block; | |
| padding: 5px; | |
| margin: 5px; | |
| box-shadow: 0px 2px 0.5rem var(--shadow); | |
| } | |
| #sk_status { | |
| position: fixed; | |
| bottom: 0; | |
| right: 20%; | |
| z-index: 2147483000; | |
| padding: 4px 8px 0 8px; | |
| border-radius: 4px 4px 0px 0px; | |
| border: 1px solid var(--muted); | |
| font-size: 12px; | |
| } | |
| #sk_status>span { | |
| line-height: 16px; | |
| } | |
| .expandRichHints span.annotation { | |
| padding-left: 4px; | |
| color: var(--hint); | |
| } | |
| .expandRichHints .kbd-span { | |
| min-width: 30px; | |
| text-align: right; | |
| display: inline-block; | |
| } | |
| .expandRichHints kbd>.candidates { | |
| color: var(--fg); | |
| font-weight: bold; | |
| } | |
| .expandRichHints kbd { | |
| padding: 1px 2px; | |
| } | |
| #sk_find { | |
| border-style: none; | |
| outline: none; | |
| } | |
| #sk_keystroke { | |
| padding: 6px; | |
| position: fixed; | |
| float: right; | |
| bottom: 0px; | |
| z-index: 2147483000; | |
| right: 0px; | |
| background: var(--bg); | |
| color: var(--fg); | |
| } | |
| #sk_usage, #sk_popup, #sk_editor { | |
| overflow: auto; | |
| position: fixed; | |
| width: 80%; | |
| max-height: 80%; | |
| top: 10%; | |
| left: 10%; | |
| text-align: left; | |
| box-shadow: var(--shadow); | |
| z-index: 2147483298; | |
| padding: 1rem; | |
| } | |
| #sk_nvim { | |
| position: fixed; | |
| top: 10%; | |
| left: 10%; | |
| width: 80%; | |
| height: 30%; | |
| } | |
| #sk_popup img { | |
| width: 100%; | |
| } | |
| #sk_usage>div { | |
| display: inline-block; | |
| } | |
| #sk_usage .kbd-span { | |
| width: 80px; | |
| text-align: right; | |
| display: inline-block; | |
| } | |
| #sk_usage .feature_name { | |
| text-align: center; | |
| padding-bottom: 4px; | |
| } | |
| #sk_usage .feature_name>span { | |
| border-bottom: 2px solid var(--muted); | |
| } | |
| #sk_usage span.annotation { | |
| padding-left: 32px; | |
| line-height: 22px; | |
| } | |
| #sk_usage * { | |
| font-size: 10pt; | |
| } | |
| #sk_tabs { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| background-color: var(--bg); | |
| overflow: auto; | |
| z-index: 2147483000; | |
| /* box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.8); */ | |
| margin-left: 1rem; | |
| margin-top: 1.5rem; | |
| border: 0px; | |
| padding-top: 0.5rem; | |
| padding-bottom: 0.5rem; | |
| border-radius: 0.5rem; | |
| } | |
| #sk_tabs div.sk_tab { | |
| vertical-align: bottom; | |
| justify-items: center; | |
| border-radius: 0px; | |
| background: var(--bg); | |
| margin: 0.5rem; | |
| box-shadow: 0px 0px 0px 0px var(--shadow) !important; | |
| /* padding-top: 2px; */ | |
| border-top: 0px; | |
| margin-block: 0rem; | |
| } | |
| #sk_tabs div.sk_tab.active { | |
| background-color: var(--bg) !important; | |
| border: 0px; | |
| position: relative; | |
| z-index: 1; | |
| margin-left: 1.8rem; | |
| padding-left: 0rem; | |
| margin-right: 0.7rem; | |
| } | |
| #sk_tabs div.sk_tab_title { | |
| display: inline-block; | |
| vertical-align: middle; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| overflow: hidden; | |
| padding-left: 5px; | |
| color: var(--fg); | |
| } | |
| #sk_tabs.vertical div.sk_tab_hint { | |
| position: inherit; | |
| left: 1em; | |
| margin-top: 0.5em; | |
| border: 0px; | |
| color:var(--fg); | |
| background: initial; | |
| background-color: var(--bg); | |
| box-shadow: 0 0 0 0; | |
| border: var(--tab-hint-border) solid var(--muted); | |
| padding: 0px var(--tab-icon-padding) 0px var(--tab-icon-padding); | |
| } | |
| #sk_tabs.vertical div.sk_tab_wrap { | |
| display: inline-block; | |
| margin-left: 0pt; | |
| margin-top: 0px; | |
| padding-left: var(--tab-wrap-padding); | |
| } | |
| #sk_tabs.vertical div.sk_tab.active .sk_tab_wrap { | |
| padding-left: calc(var(--tab-wrap-padding) + var(--tab-icon-padding) * 2 + var(--tab-hint-border) * 2); | |
| box-shadow: -0.2rem 0px 0px 0px var(--accent); | |
| } | |
| #sk_tabs.vertical div.sk_tab_title { | |
| min-width: 100pt; | |
| max-width: 20vw; | |
| } | |
| #sk_bubble { | |
| position: absolute; | |
| padding: 9px; | |
| border: 1px solid var(--muted); | |
| border-radius: 4px; | |
| box-shadow: 0 0 20px var(--shadow); | |
| color: var(--fg); | |
| background-color: var(--bg); | |
| z-index: 2147483000; | |
| font-size: 14px; | |
| } | |
| #sk_bubble .sk_bubble_content { | |
| overflow-y: scroll; | |
| background-size: 3px 100%; | |
| background-position: 100%; | |
| background-repeat: no-repeat; | |
| } | |
| .sk_scroller_indicator_top { | |
| background-image: linear-gradient(var(--bg), transparent); | |
| } | |
| .sk_scroller_indicator_middle { | |
| background-image: linear-gradient(transparent, var(--bg), transparent); | |
| } | |
| .sk_scroller_indicator_bottom { | |
| background-image: linear-gradient(transparent, var(--bg)); | |
| } | |
| #sk_bubble * { | |
| color: var(--fg) !important; | |
| } | |
| div.sk_arrow>div:nth-of-type(1) { | |
| left: 0; | |
| position: absolute; | |
| width: 0; | |
| border-left: 12px solid transparent; | |
| border-right: 12px solid transparent; | |
| background: transparent; | |
| } | |
| div.sk_arrow[dir=down]>div:nth-of-type(1) { | |
| border-top: 12px solid var(--muted); | |
| } | |
| div.sk_arrow[dir=up]>div:nth-of-type(1) { | |
| border-bottom: 12px solid var(--muted); | |
| } | |
| div.sk_arrow>div:nth-of-type(2) { | |
| left: 2px; | |
| position: absolute; | |
| width: 0; | |
| border-left: 0.5rem solid transparent; | |
| border-right: 0.5rem solid transparent; | |
| background: transparent; | |
| } | |
| div.sk_arrow[dir=down]>div:nth-of-type(2) { | |
| border-top: 0.5rem solid var(--fg); | |
| } | |
| div.sk_arrow[dir=up]>div:nth-of-type(2) { | |
| top: 2px; | |
| border-bottom: 0.5rem solid var(--fg); | |
| } | |
| .ace_editor.ace_autocomplete { | |
| z-index: 2147483300 !important; | |
| width: 80% !important; | |
| } | |
| @media only screen and (max-width: 767px) { | |
| #sk_omnibar { | |
| width: 100%; | |
| left: 0; | |
| } | |
| #sk_omnibarSearchResult { | |
| max-height: 50vh; | |
| overflow: scroll; | |
| } | |
| .sk_omnibar_bottom #sk_omnibarSearchArea { | |
| margin: 0; | |
| padding: 0.2rem; | |
| } | |
| } | |
| `; | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment