From dd3aab90c83aff85129b8b70f97a4ba30b826021 Mon Sep 17 00:00:00 2001 From: Tom Willemse Date: Wed, 26 Jul 2023 00:15:44 -0700 Subject: [PATCH] Add an attempt at theming surfingkeys Mostly taken from https://github.com/rose-pine/surfingkeys with some adjustments for my preference of colors. --- surfingkeys/surfingkeys.js | 417 +++++++++++++++++++++++++++++++++++++ 1 file changed, 417 insertions(+) diff --git a/surfingkeys/surfingkeys.js b/surfingkeys/surfingkeys.js index 6c8aa2f..fd0eed9 100644 --- a/surfingkeys/surfingkeys.js +++ b/surfingkeys/surfingkeys.js @@ -57,6 +57,423 @@ settings.aceKeybindings = 'emacs'; settings.defaultSearchEngine = 'd'; settings.omnibarPosition = "bottom"; +const hintsCss = "font-size: 13pt; font-family: 'Fantasque Sans Mono'; border: 1px solid #787f7f; color: #bfbfbf !important; background: #222424; padding: 0; line-height: 1;" +api.Hints.style(hintsCss); +api.Hints.style(hintsCss, "text"); + +settings.theme = ` + .sk_theme { + background: #222424; + color: #bfbfbf; + } + .sk_theme input { + color: #bfbfbf; + } + .sk_theme .url { + color: #f1b572; + } + .sk_theme .annotation { + color: #f172b5; + } + .sk_theme kbd { + background: #3f4242; + color: #bfbfbf; + } + .sk_theme .frame { + background: #ff00ff; + } + .sk_theme .omnibar_highlight { + color: #72f1f1; + } + .sk_theme .omnibar_folder { + color: #ff00ff; + } + .sk_theme .omnibar_timestamp { + color: #8872f1; + } + .sk_theme .omnibar_visitcount { + color: #ff00ff; + } + .sk_theme .prompt, .sk_theme .resultPage { + color: #ff00ff; + } + .sk_theme .feature_name { + color: #e0def4; + } + .sk_theme .separator { + color: #56526e; + } + body { + margin: 0; + + font-family: "JetBrains Mono NL", "Cascadia Code", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 12px; + } + #sk_omnibar { + overflow: hidden; + position: fixed; + width: 80%; + max-height: 80%; + left: 10%; + text-align: left; + box-shadow: 0px 2px 10px #2a283e; + z-index: 2147483000; + } + .sk_omnibar_middle { + top: 10%; + border-radius: 4px; + } + .sk_omnibar_bottom { + bottom: 0; + border-radius: 4px 4px 0px 0px; + } + #sk_omnibar span.omnibar_highlight { + text-shadow: 0 0 0.01em; + } + #sk_omnibarSearchArea .prompt, #sk_omnibarSearchArea .resultPage { + display: inline-block; + font-size: 20px; + width: auto; + } + #sk_omnibarSearchArea>input { + display: inline-block; + width: 100%; + flex: 1; + font-size: 20px; + margin-bottom: 0; + padding: 0px 0px 0px 0.5rem; + background: transparent; + border-style: none; + outline: none; + } + #sk_omnibarSearchArea { + display: flex; + align-items: center; + border-bottom: 1px solid #56526e; + } + .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: 0.2rem 0rem; + display: block; + max-height: 600px; + overflow-x: hidden; + overflow-y: auto; + } + .sk_theme #sk_omnibarSearchResult>ul>li:nth-child(odd) { + background: #3f4242; + } + .sk_theme #sk_omnibarSearchResult>ul>li.focused { + background: #72aff1; + color: #3f4242; + } + .sk_theme #sk_omnibarSearchResult>ul>li.window { + border: 2px solid #56526e; + border-radius: 8px; + margin: 4px 0px; + } + .sk_theme #sk_omnibarSearchResult>ul>li.window.focused { + border: 2px solid #c4a7e7; + } + .sk_theme div.table { + display: table; + } + .sk_theme div.table>* { + vertical-align: middle; + display: table-cell; + } + #sk_omnibarSearchResult li div.title { + text-align: left; + } + #sk_omnibarSearchResult li div.url { + font-weight: normal; + white-space: nowrap; + } + #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 10px #2a283e; + } + #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 #56526e; + font-size: 12px; + } + #sk_status>span { + line-height: 16px; + } + .expandRichHints span.annotation { + padding-left: 4px; + color: #ea9a97; + } + .expandRichHints .kbd-span { + min-width: 30px; + text-align: right; + display: inline-block; + } + .expandRichHints kbd>.candidates { + color: #e0def4; + 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: #232136; + color: #e0def4; + } + #sk_usage, #sk_popup, #sk_editor { + overflow: auto; + position: fixed; + width: 80%; + max-height: 80%; + top: 10%; + left: 10%; + text-align: left; + box-shadow: #2a283e; + 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; + vertical-align: top; + } + #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 #56526e; + } + #sk_usage span.annotation { + padding-left: 32px; + line-height: 22px; + } + #sk_usage * { + font-size: 10pt; + } + kbd { + white-space: nowrap; + display: inline-block; + padding: 3px 5px; + font: 11px "JetBrains Mono NL", "Cascadia Code", "Helvetica Neue", Helvetica, Arial, sans-serif; + line-height: 10px; + vertical-align: middle; + border: solid 1px #56526e; + border-bottom-lolor: #56526e; + border-radius: 3px; + box-shadow: inset 0 -1px 0 #2a283e; + } + #sk_banner { + padding: 0.5rem; + position: fixed; + left: 10%; + top: -3rem; + z-index: 2147483000; + width: 80%; + border-radius: 0px 0px 4px 4px; + border: 1px solid #56526e; + border-top-style: none; + text-align: center; + background: #232136; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + #sk_tabs { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: transparent; + overflow: auto; + z-index: 2147483000; + } + div.sk_tab { + display: inline-block; + border-radius: 3px; + padding: 10px 20px; + margin: 5px; + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#232136), color-stop(100%,#232136)); + box-shadow: 0px 3px 7px 0px #2a283e; + } + div.sk_tab_wrap { + display: inline-block; + } + div.sk_tab_icon { + display: inline-block; + vertical-align: middle; + } + div.sk_tab_icon>img { + width: 18px; + } + div.sk_tab_title { + width: 150px; + display: inline-block; + vertical-align: middle; + font-size: 10pt; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + padding-left: 5px; + color: #e0def4; + } + div.sk_tab_url { + font-size: 10pt; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + color: #c4a7e7; + } + div.sk_tab_hint { + display: inline-block; + float:right; + font-size: 10pt; + font-weight: bold; + padding: 0px 2px 0px 2px; + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#232136), color-stop(100%,#232136)); + color: #e0def4; + border: solid 1px #56526e; + border-radius: 3px; + box-shadow: #2a283e; + } + #sk_bubble { + position: absolute; + padding: 9px; + border: 1px solid #56526e; + border-radius: 4px; + box-shadow: 0 0 20px #2a283e; + color: #e0def4; + background-color: #232136; + 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(#232136, transparent); + } + .sk_scroller_indicator_middle { + background-image: linear-gradient(transparent, #232136, transparent); + } + .sk_scroller_indicator_bottom { + background-image: linear-gradient(transparent, #232136); + } + #sk_bubble * { + color: #e0def4 !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 #56526e; + } + div.sk_arrow[dir=up]>div:nth-of-type(1) { + border-bottom: 12px solid #56526e; + } + div.sk_arrow>div:nth-of-type(2) { + left: 2px; + position: absolute; + width: 0; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + background: transparent; + } + div.sk_arrow[dir=down]>div:nth-of-type(2) { + border-top: 10px solid #e0def4; + } + div.sk_arrow[dir=up]>div:nth-of-type(2) { + top: 2px; + border-bottom: 10px solid #e0def4; + } + .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; + } + } +`; + // Local Variables: // js2-additional-externs: ("api" "settings") // End: