├── .github └── workflows │ └── todo.yml ├── LICENSE ├── build ├── dist ├── rose-pine-dawn.js ├── rose-pine-moon.js └── rose-pine.js ├── readme.md └── template.js /.github/workflows/todo.yml: -------------------------------------------------------------------------------- 1 | name: "Run TODO to Issue" 2 | on: ["push"] 3 | jobs: 4 | build: 5 | runs-on: "ubuntu-latest" 6 | steps: 7 | - uses: "actions/checkout@v3" 8 | - name: "TODO to Issue" 9 | uses: "alstr/todo-to-issue-action@v4" 10 | with: 11 | AUTO_ASSIGN: true 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | This is free and unencumbered software released into the public domain. 2 | 3 | Anyone is free to copy, modify, publish, use, compile, sell, or 4 | distribute this software, either in source code form or as a compiled 5 | binary, for any purpose, commercial or non-commercial, and by any 6 | means. 7 | 8 | In jurisdictions that recognize copyright laws, the author or authors 9 | of this software dedicate any and all copyright interest in the 10 | software to the public domain. We make this dedication for the benefit 11 | of the public at large and to the detriment of our heirs and 12 | successors. We intend this dedication to be an overt act of 13 | relinquishment in perpetuity of all present and future rights to this 14 | software under copyright law. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | 24 | For more information, please refer to 25 | -------------------------------------------------------------------------------- /build: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | cd $(git rev-parse --show-toplevel) 4 | rm -rf dist/ 5 | npx @rose-pine/build@latest -t template.js 6 | -------------------------------------------------------------------------------- /dist/rose-pine-dawn.js: -------------------------------------------------------------------------------- 1 | // name: Rosé Pine Dawn 2 | // author: thuanowa 3 | // license: unlicense 4 | // upstream: https://github.com/rose-pine/surfingkeys/blob/main/dist/rose-pine-dawn.conf 5 | // blurb: All natural pine, faux fur and a bit of soho vibes for the classy minimalist 6 | 7 | const hintsCss = 8 | "font-size: 13pt; font-family: 'JetBrains Mono NL', 'Cascadia Code', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 0px; color: #575279 !important; background: #faf4ed; background-color: #faf4ed"; 9 | 10 | api.Hints.style(hintsCss); 11 | api.Hints.style(hintsCss, "text"); 12 | 13 | settings.theme = ` 14 | .sk_theme { 15 | background: #faf4ed; 16 | color: #575279; 17 | } 18 | .sk_theme input { 19 | color: #575279; 20 | } 21 | .sk_theme .url { 22 | color: #907aa9; 23 | } 24 | .sk_theme .annotation { 25 | color: #d7827e; 26 | } 27 | .sk_theme kbd { 28 | background: #f2e9e1; 29 | color: #575279; 30 | } 31 | .sk_theme .frame { 32 | background: #fffaf3; 33 | } 34 | .sk_theme .omnibar_highlight { 35 | color: #dfdad9; 36 | } 37 | .sk_theme .omnibar_folder { 38 | color: #575279; 39 | } 40 | .sk_theme .omnibar_timestamp { 41 | color: #56949f; 42 | } 43 | .sk_theme .omnibar_visitcount { 44 | color: #56949f; 45 | } 46 | .sk_theme .prompt, .sk_theme .resultPage { 47 | color: #575279; 48 | } 49 | .sk_theme .feature_name { 50 | color: #575279; 51 | } 52 | .sk_theme .separator { 53 | color: #cecacd; 54 | } 55 | body { 56 | margin: 0; 57 | 58 | font-family: "JetBrains Mono NL", "Cascadia Code", "Helvetica Neue", Helvetica, Arial, sans-serif; 59 | font-size: 12px; 60 | } 61 | #sk_omnibar { 62 | overflow: hidden; 63 | position: fixed; 64 | width: 80%; 65 | max-height: 80%; 66 | left: 10%; 67 | text-align: left; 68 | box-shadow: 0px 2px 10px #f4ede8; 69 | z-index: 2147483000; 70 | } 71 | .sk_omnibar_middle { 72 | top: 10%; 73 | border-radius: 4px; 74 | } 75 | .sk_omnibar_bottom { 76 | bottom: 0; 77 | border-radius: 4px 4px 0px 0px; 78 | } 79 | #sk_omnibar span.omnibar_highlight { 80 | text-shadow: 0 0 0.01em; 81 | } 82 | #sk_omnibarSearchArea .prompt, #sk_omnibarSearchArea .resultPage { 83 | display: inline-block; 84 | font-size: 20px; 85 | width: auto; 86 | } 87 | #sk_omnibarSearchArea>input { 88 | display: inline-block; 89 | width: 100%; 90 | flex: 1; 91 | font-size: 20px; 92 | margin-bottom: 0; 93 | padding: 0px 0px 0px 0.5rem; 94 | background: transparent; 95 | border-style: none; 96 | outline: none; 97 | } 98 | #sk_omnibarSearchArea { 99 | display: flex; 100 | align-items: center; 101 | border-bottom: 1px solid #cecacd; 102 | } 103 | .sk_omnibar_middle #sk_omnibarSearchArea { 104 | margin: 0.5rem 1rem; 105 | } 106 | .sk_omnibar_bottom #sk_omnibarSearchArea { 107 | margin: 0.2rem 1rem; 108 | } 109 | .sk_omnibar_middle #sk_omnibarSearchResult>ul { 110 | margin-top: 0; 111 | } 112 | .sk_omnibar_bottom #sk_omnibarSearchResult>ul { 113 | margin-bottom: 0; 114 | } 115 | #sk_omnibarSearchResult { 116 | max-height: 60vh; 117 | overflow: hidden; 118 | margin: 0rem 0.6rem; 119 | } 120 | #sk_omnibarSearchResult:empty { 121 | display: none; 122 | } 123 | #sk_omnibarSearchResult>ul { 124 | padding: 0; 125 | } 126 | #sk_omnibarSearchResult>ul>li { 127 | padding: 0.2rem 0rem; 128 | display: block; 129 | max-height: 600px; 130 | overflow-x: hidden; 131 | overflow-y: auto; 132 | } 133 | .sk_theme #sk_omnibarSearchResult>ul>li:nth-child(odd) { 134 | background: #fffaf3; 135 | } 136 | .sk_theme #sk_omnibarSearchResult>ul>li.focused { 137 | background: #f2e9e1; 138 | } 139 | .sk_theme #sk_omnibarSearchResult>ul>li.window { 140 | border: 2px solid #cecacd; 141 | border-radius: 8px; 142 | margin: 4px 0px; 143 | } 144 | .sk_theme #sk_omnibarSearchResult>ul>li.window.focused { 145 | border: 2px solid #907aa9; 146 | } 147 | .sk_theme div.table { 148 | display: table; 149 | } 150 | .sk_theme div.table>* { 151 | vertical-align: middle; 152 | display: table-cell; 153 | } 154 | #sk_omnibarSearchResult li div.title { 155 | text-align: left; 156 | } 157 | #sk_omnibarSearchResult li div.url { 158 | font-weight: bold; 159 | white-space: nowrap; 160 | } 161 | #sk_omnibarSearchResult li.focused div.url { 162 | white-space: normal; 163 | } 164 | #sk_omnibarSearchResult li span.annotation { 165 | float: right; 166 | } 167 | #sk_omnibarSearchResult .tab_in_window { 168 | display: inline-block; 169 | padding: 5px; 170 | margin: 5px; 171 | box-shadow: 0px 2px 10px #f4ede8; 172 | } 173 | #sk_status { 174 | position: fixed; 175 | bottom: 0; 176 | right: 20%; 177 | z-index: 2147483000; 178 | padding: 4px 8px 0 8px; 179 | border-radius: 4px 4px 0px 0px; 180 | border: 1px solid #cecacd; 181 | font-size: 12px; 182 | } 183 | #sk_status>span { 184 | line-height: 16px; 185 | } 186 | .expandRichHints span.annotation { 187 | padding-left: 4px; 188 | color: #d7827e; 189 | } 190 | .expandRichHints .kbd-span { 191 | min-width: 30px; 192 | text-align: right; 193 | display: inline-block; 194 | } 195 | .expandRichHints kbd>.candidates { 196 | color: #575279; 197 | font-weight: bold; 198 | } 199 | .expandRichHints kbd { 200 | padding: 1px 2px; 201 | } 202 | #sk_find { 203 | border-style: none; 204 | outline: none; 205 | } 206 | #sk_keystroke { 207 | padding: 6px; 208 | position: fixed; 209 | float: right; 210 | bottom: 0px; 211 | z-index: 2147483000; 212 | right: 0px; 213 | background: #faf4ed; 214 | color: #575279; 215 | } 216 | #sk_usage, #sk_popup, #sk_editor { 217 | overflow: auto; 218 | position: fixed; 219 | width: 80%; 220 | max-height: 80%; 221 | top: 10%; 222 | left: 10%; 223 | text-align: left; 224 | box-shadow: #f4ede8; 225 | z-index: 2147483298; 226 | padding: 1rem; 227 | } 228 | #sk_nvim { 229 | position: fixed; 230 | top: 10%; 231 | left: 10%; 232 | width: 80%; 233 | height: 30%; 234 | } 235 | #sk_popup img { 236 | width: 100%; 237 | } 238 | #sk_usage>div { 239 | display: inline-block; 240 | vertical-align: top; 241 | } 242 | #sk_usage .kbd-span { 243 | width: 80px; 244 | text-align: right; 245 | display: inline-block; 246 | } 247 | #sk_usage .feature_name { 248 | text-align: center; 249 | padding-bottom: 4px; 250 | } 251 | #sk_usage .feature_name>span { 252 | border-bottom: 2px solid #cecacd; 253 | } 254 | #sk_usage span.annotation { 255 | padding-left: 32px; 256 | line-height: 22px; 257 | } 258 | #sk_usage * { 259 | font-size: 10pt; 260 | } 261 | kbd { 262 | white-space: nowrap; 263 | display: inline-block; 264 | padding: 3px 5px; 265 | font: 11px "JetBrains Mono NL", "Cascadia Code", "Helvetica Neue", Helvetica, Arial, sans-serif; 266 | line-height: 10px; 267 | vertical-align: middle; 268 | border: solid 1px #cecacd; 269 | border-bottom-lolor: #cecacd; 270 | border-radius: 3px; 271 | box-shadow: inset 0 -1px 0 #f4ede8; 272 | } 273 | #sk_banner { 274 | padding: 0.5rem; 275 | position: fixed; 276 | left: 10%; 277 | top: -3rem; 278 | z-index: 2147483000; 279 | width: 80%; 280 | border-radius: 0px 0px 4px 4px; 281 | border: 1px solid #cecacd; 282 | border-top-style: none; 283 | text-align: center; 284 | background: #faf4ed; 285 | white-space: nowrap; 286 | text-overflow: ellipsis; 287 | overflow: hidden; 288 | } 289 | #sk_tabs { 290 | position: fixed; 291 | top: 0; 292 | left: 0; 293 | width: 100%; 294 | height: 100%; 295 | background: transparent; 296 | overflow: auto; 297 | z-index: 2147483000; 298 | } 299 | div.sk_tab { 300 | display: inline-flex; 301 | height: 28px; 302 | width: 202px; 303 | justify-content: space-between; 304 | align-items: center; 305 | flex-direction: row-reverse; 306 | border-radius: 3px; 307 | padding: 10px 20px; 308 | margin: 5px; 309 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#faf4ed), color-stop(100%,#faf4ed)); 310 | box-shadow: 0px 3px 7px 0px #f4ede8; 311 | } 312 | div.sk_tab_wrap { 313 | display: inline-block; 314 | flex: 1; 315 | } 316 | div.sk_tab_icon { 317 | display: inline-block; 318 | vertical-align: middle; 319 | } 320 | div.sk_tab_icon>img { 321 | width: 18px; 322 | } 323 | div.sk_tab_title { 324 | width: 150px; 325 | display: inline-block; 326 | vertical-align: middle; 327 | font-size: 10pt; 328 | white-space: nowrap; 329 | text-overflow: ellipsis; 330 | overflow: hidden; 331 | padding-left: 5px; 332 | color: #575279; 333 | } 334 | div.sk_tab_url { 335 | font-size: 10pt; 336 | white-space: nowrap; 337 | text-overflow: ellipsis; 338 | overflow: hidden; 339 | color: #907aa9; 340 | } 341 | div.sk_tab_hint { 342 | display: inline-block; 343 | float:right; 344 | font-size: 10pt; 345 | font-weight: bold; 346 | padding: 0px 2px 0px 2px; 347 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#faf4ed), color-stop(100%,#faf4ed)); 348 | color: #575279; 349 | border: solid 1px #cecacd; 350 | border-radius: 3px; 351 | box-shadow: #f4ede8; 352 | } 353 | #sk_tabs.vertical div.sk_tab_hint { 354 | position: initial; 355 | margin-inline: 0; 356 | } 357 | div.tab_rocket { 358 | display: none; 359 | } 360 | #sk_bubble { 361 | position: absolute; 362 | padding: 9px; 363 | border: 1px solid #cecacd; 364 | border-radius: 4px; 365 | box-shadow: 0 0 20px #f4ede8; 366 | color: #575279; 367 | background-color: #faf4ed; 368 | z-index: 2147483000; 369 | font-size: 14px; 370 | } 371 | #sk_bubble .sk_bubble_content { 372 | overflow-y: scroll; 373 | background-size: 3px 100%; 374 | background-position: 100%; 375 | background-repeat: no-repeat; 376 | } 377 | .sk_scroller_indicator_top { 378 | background-image: linear-gradient(#faf4ed, transparent); 379 | } 380 | .sk_scroller_indicator_middle { 381 | background-image: linear-gradient(transparent, #faf4ed, transparent); 382 | } 383 | .sk_scroller_indicator_bottom { 384 | background-image: linear-gradient(transparent, #faf4ed); 385 | } 386 | #sk_bubble * { 387 | color: #575279 !important; 388 | } 389 | div.sk_arrow>div:nth-of-type(1) { 390 | left: 0; 391 | position: absolute; 392 | width: 0; 393 | border-left: 12px solid transparent; 394 | border-right: 12px solid transparent; 395 | background: transparent; 396 | } 397 | div.sk_arrow[dir=down]>div:nth-of-type(1) { 398 | border-top: 12px solid #cecacd; 399 | } 400 | div.sk_arrow[dir=up]>div:nth-of-type(1) { 401 | border-bottom: 12px solid #cecacd; 402 | } 403 | div.sk_arrow>div:nth-of-type(2) { 404 | left: 2px; 405 | position: absolute; 406 | width: 0; 407 | border-left: 10px solid transparent; 408 | border-right: 10px solid transparent; 409 | background: transparent; 410 | } 411 | div.sk_arrow[dir=down]>div:nth-of-type(2) { 412 | border-top: 10px solid #575279; 413 | } 414 | div.sk_arrow[dir=up]>div:nth-of-type(2) { 415 | top: 2px; 416 | border-bottom: 10px solid #575279; 417 | } 418 | .ace_editor.ace_autocomplete { 419 | z-index: 2147483300 !important; 420 | width: 80% !important; 421 | } 422 | @media only screen and (max-width: 767px) { 423 | #sk_omnibar { 424 | width: 100%; 425 | left: 0; 426 | } 427 | #sk_omnibarSearchResult { 428 | max-height: 50vh; 429 | overflow: scroll; 430 | } 431 | .sk_omnibar_bottom #sk_omnibarSearchArea { 432 | margin: 0; 433 | padding: 0.2rem; 434 | } 435 | } 436 | `; 437 | -------------------------------------------------------------------------------- /dist/rose-pine-moon.js: -------------------------------------------------------------------------------- 1 | // name: Rosé Pine Moon 2 | // author: thuanowa 3 | // license: unlicense 4 | // upstream: https://github.com/rose-pine/surfingkeys/blob/main/dist/rose-pine-moon.conf 5 | // blurb: All natural pine, faux fur and a bit of soho vibes for the classy minimalist 6 | 7 | const hintsCss = 8 | "font-size: 13pt; font-family: 'JetBrains Mono NL', 'Cascadia Code', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 0px; color: #e0def4 !important; background: #232136; background-color: #232136"; 9 | 10 | api.Hints.style(hintsCss); 11 | api.Hints.style(hintsCss, "text"); 12 | 13 | settings.theme = ` 14 | .sk_theme { 15 | background: #232136; 16 | color: #e0def4; 17 | } 18 | .sk_theme input { 19 | color: #e0def4; 20 | } 21 | .sk_theme .url { 22 | color: #c4a7e7; 23 | } 24 | .sk_theme .annotation { 25 | color: #ea9a97; 26 | } 27 | .sk_theme kbd { 28 | background: #393552; 29 | color: #e0def4; 30 | } 31 | .sk_theme .frame { 32 | background: #2a273f; 33 | } 34 | .sk_theme .omnibar_highlight { 35 | color: #44415a; 36 | } 37 | .sk_theme .omnibar_folder { 38 | color: #e0def4; 39 | } 40 | .sk_theme .omnibar_timestamp { 41 | color: #9ccfd8; 42 | } 43 | .sk_theme .omnibar_visitcount { 44 | color: #9ccfd8; 45 | } 46 | .sk_theme .prompt, .sk_theme .resultPage { 47 | color: #e0def4; 48 | } 49 | .sk_theme .feature_name { 50 | color: #e0def4; 51 | } 52 | .sk_theme .separator { 53 | color: #56526e; 54 | } 55 | body { 56 | margin: 0; 57 | 58 | font-family: "JetBrains Mono NL", "Cascadia Code", "Helvetica Neue", Helvetica, Arial, sans-serif; 59 | font-size: 12px; 60 | } 61 | #sk_omnibar { 62 | overflow: hidden; 63 | position: fixed; 64 | width: 80%; 65 | max-height: 80%; 66 | left: 10%; 67 | text-align: left; 68 | box-shadow: 0px 2px 10px #2a283e; 69 | z-index: 2147483000; 70 | } 71 | .sk_omnibar_middle { 72 | top: 10%; 73 | border-radius: 4px; 74 | } 75 | .sk_omnibar_bottom { 76 | bottom: 0; 77 | border-radius: 4px 4px 0px 0px; 78 | } 79 | #sk_omnibar span.omnibar_highlight { 80 | text-shadow: 0 0 0.01em; 81 | } 82 | #sk_omnibarSearchArea .prompt, #sk_omnibarSearchArea .resultPage { 83 | display: inline-block; 84 | font-size: 20px; 85 | width: auto; 86 | } 87 | #sk_omnibarSearchArea>input { 88 | display: inline-block; 89 | width: 100%; 90 | flex: 1; 91 | font-size: 20px; 92 | margin-bottom: 0; 93 | padding: 0px 0px 0px 0.5rem; 94 | background: transparent; 95 | border-style: none; 96 | outline: none; 97 | } 98 | #sk_omnibarSearchArea { 99 | display: flex; 100 | align-items: center; 101 | border-bottom: 1px solid #56526e; 102 | } 103 | .sk_omnibar_middle #sk_omnibarSearchArea { 104 | margin: 0.5rem 1rem; 105 | } 106 | .sk_omnibar_bottom #sk_omnibarSearchArea { 107 | margin: 0.2rem 1rem; 108 | } 109 | .sk_omnibar_middle #sk_omnibarSearchResult>ul { 110 | margin-top: 0; 111 | } 112 | .sk_omnibar_bottom #sk_omnibarSearchResult>ul { 113 | margin-bottom: 0; 114 | } 115 | #sk_omnibarSearchResult { 116 | max-height: 60vh; 117 | overflow: hidden; 118 | margin: 0rem 0.6rem; 119 | } 120 | #sk_omnibarSearchResult:empty { 121 | display: none; 122 | } 123 | #sk_omnibarSearchResult>ul { 124 | padding: 0; 125 | } 126 | #sk_omnibarSearchResult>ul>li { 127 | padding: 0.2rem 0rem; 128 | display: block; 129 | max-height: 600px; 130 | overflow-x: hidden; 131 | overflow-y: auto; 132 | } 133 | .sk_theme #sk_omnibarSearchResult>ul>li:nth-child(odd) { 134 | background: #2a273f; 135 | } 136 | .sk_theme #sk_omnibarSearchResult>ul>li.focused { 137 | background: #393552; 138 | } 139 | .sk_theme #sk_omnibarSearchResult>ul>li.window { 140 | border: 2px solid #56526e; 141 | border-radius: 8px; 142 | margin: 4px 0px; 143 | } 144 | .sk_theme #sk_omnibarSearchResult>ul>li.window.focused { 145 | border: 2px solid #c4a7e7; 146 | } 147 | .sk_theme div.table { 148 | display: table; 149 | } 150 | .sk_theme div.table>* { 151 | vertical-align: middle; 152 | display: table-cell; 153 | } 154 | #sk_omnibarSearchResult li div.title { 155 | text-align: left; 156 | } 157 | #sk_omnibarSearchResult li div.url { 158 | font-weight: bold; 159 | white-space: nowrap; 160 | } 161 | #sk_omnibarSearchResult li.focused div.url { 162 | white-space: normal; 163 | } 164 | #sk_omnibarSearchResult li span.annotation { 165 | float: right; 166 | } 167 | #sk_omnibarSearchResult .tab_in_window { 168 | display: inline-block; 169 | padding: 5px; 170 | margin: 5px; 171 | box-shadow: 0px 2px 10px #2a283e; 172 | } 173 | #sk_status { 174 | position: fixed; 175 | bottom: 0; 176 | right: 20%; 177 | z-index: 2147483000; 178 | padding: 4px 8px 0 8px; 179 | border-radius: 4px 4px 0px 0px; 180 | border: 1px solid #56526e; 181 | font-size: 12px; 182 | } 183 | #sk_status>span { 184 | line-height: 16px; 185 | } 186 | .expandRichHints span.annotation { 187 | padding-left: 4px; 188 | color: #ea9a97; 189 | } 190 | .expandRichHints .kbd-span { 191 | min-width: 30px; 192 | text-align: right; 193 | display: inline-block; 194 | } 195 | .expandRichHints kbd>.candidates { 196 | color: #e0def4; 197 | font-weight: bold; 198 | } 199 | .expandRichHints kbd { 200 | padding: 1px 2px; 201 | } 202 | #sk_find { 203 | border-style: none; 204 | outline: none; 205 | } 206 | #sk_keystroke { 207 | padding: 6px; 208 | position: fixed; 209 | float: right; 210 | bottom: 0px; 211 | z-index: 2147483000; 212 | right: 0px; 213 | background: #232136; 214 | color: #e0def4; 215 | } 216 | #sk_usage, #sk_popup, #sk_editor { 217 | overflow: auto; 218 | position: fixed; 219 | width: 80%; 220 | max-height: 80%; 221 | top: 10%; 222 | left: 10%; 223 | text-align: left; 224 | box-shadow: #2a283e; 225 | z-index: 2147483298; 226 | padding: 1rem; 227 | } 228 | #sk_nvim { 229 | position: fixed; 230 | top: 10%; 231 | left: 10%; 232 | width: 80%; 233 | height: 30%; 234 | } 235 | #sk_popup img { 236 | width: 100%; 237 | } 238 | #sk_usage>div { 239 | display: inline-block; 240 | vertical-align: top; 241 | } 242 | #sk_usage .kbd-span { 243 | width: 80px; 244 | text-align: right; 245 | display: inline-block; 246 | } 247 | #sk_usage .feature_name { 248 | text-align: center; 249 | padding-bottom: 4px; 250 | } 251 | #sk_usage .feature_name>span { 252 | border-bottom: 2px solid #56526e; 253 | } 254 | #sk_usage span.annotation { 255 | padding-left: 32px; 256 | line-height: 22px; 257 | } 258 | #sk_usage * { 259 | font-size: 10pt; 260 | } 261 | kbd { 262 | white-space: nowrap; 263 | display: inline-block; 264 | padding: 3px 5px; 265 | font: 11px "JetBrains Mono NL", "Cascadia Code", "Helvetica Neue", Helvetica, Arial, sans-serif; 266 | line-height: 10px; 267 | vertical-align: middle; 268 | border: solid 1px #56526e; 269 | border-bottom-lolor: #56526e; 270 | border-radius: 3px; 271 | box-shadow: inset 0 -1px 0 #2a283e; 272 | } 273 | #sk_banner { 274 | padding: 0.5rem; 275 | position: fixed; 276 | left: 10%; 277 | top: -3rem; 278 | z-index: 2147483000; 279 | width: 80%; 280 | border-radius: 0px 0px 4px 4px; 281 | border: 1px solid #56526e; 282 | border-top-style: none; 283 | text-align: center; 284 | background: #232136; 285 | white-space: nowrap; 286 | text-overflow: ellipsis; 287 | overflow: hidden; 288 | } 289 | #sk_tabs { 290 | position: fixed; 291 | top: 0; 292 | left: 0; 293 | width: 100%; 294 | height: 100%; 295 | background: transparent; 296 | overflow: auto; 297 | z-index: 2147483000; 298 | } 299 | div.sk_tab { 300 | display: inline-flex; 301 | height: 28px; 302 | width: 202px; 303 | justify-content: space-between; 304 | align-items: center; 305 | flex-direction: row-reverse; 306 | border-radius: 3px; 307 | padding: 10px 20px; 308 | margin: 5px; 309 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#232136), color-stop(100%,#232136)); 310 | box-shadow: 0px 3px 7px 0px #2a283e; 311 | } 312 | div.sk_tab_wrap { 313 | display: inline-block; 314 | flex: 1; 315 | } 316 | div.sk_tab_icon { 317 | display: inline-block; 318 | vertical-align: middle; 319 | } 320 | div.sk_tab_icon>img { 321 | width: 18px; 322 | } 323 | div.sk_tab_title { 324 | width: 150px; 325 | display: inline-block; 326 | vertical-align: middle; 327 | font-size: 10pt; 328 | white-space: nowrap; 329 | text-overflow: ellipsis; 330 | overflow: hidden; 331 | padding-left: 5px; 332 | color: #e0def4; 333 | } 334 | div.sk_tab_url { 335 | font-size: 10pt; 336 | white-space: nowrap; 337 | text-overflow: ellipsis; 338 | overflow: hidden; 339 | color: #c4a7e7; 340 | } 341 | div.sk_tab_hint { 342 | display: inline-block; 343 | float:right; 344 | font-size: 10pt; 345 | font-weight: bold; 346 | padding: 0px 2px 0px 2px; 347 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#232136), color-stop(100%,#232136)); 348 | color: #e0def4; 349 | border: solid 1px #56526e; 350 | border-radius: 3px; 351 | box-shadow: #2a283e; 352 | } 353 | #sk_tabs.vertical div.sk_tab_hint { 354 | position: initial; 355 | margin-inline: 0; 356 | } 357 | div.tab_rocket { 358 | display: none; 359 | } 360 | #sk_bubble { 361 | position: absolute; 362 | padding: 9px; 363 | border: 1px solid #56526e; 364 | border-radius: 4px; 365 | box-shadow: 0 0 20px #2a283e; 366 | color: #e0def4; 367 | background-color: #232136; 368 | z-index: 2147483000; 369 | font-size: 14px; 370 | } 371 | #sk_bubble .sk_bubble_content { 372 | overflow-y: scroll; 373 | background-size: 3px 100%; 374 | background-position: 100%; 375 | background-repeat: no-repeat; 376 | } 377 | .sk_scroller_indicator_top { 378 | background-image: linear-gradient(#232136, transparent); 379 | } 380 | .sk_scroller_indicator_middle { 381 | background-image: linear-gradient(transparent, #232136, transparent); 382 | } 383 | .sk_scroller_indicator_bottom { 384 | background-image: linear-gradient(transparent, #232136); 385 | } 386 | #sk_bubble * { 387 | color: #e0def4 !important; 388 | } 389 | div.sk_arrow>div:nth-of-type(1) { 390 | left: 0; 391 | position: absolute; 392 | width: 0; 393 | border-left: 12px solid transparent; 394 | border-right: 12px solid transparent; 395 | background: transparent; 396 | } 397 | div.sk_arrow[dir=down]>div:nth-of-type(1) { 398 | border-top: 12px solid #56526e; 399 | } 400 | div.sk_arrow[dir=up]>div:nth-of-type(1) { 401 | border-bottom: 12px solid #56526e; 402 | } 403 | div.sk_arrow>div:nth-of-type(2) { 404 | left: 2px; 405 | position: absolute; 406 | width: 0; 407 | border-left: 10px solid transparent; 408 | border-right: 10px solid transparent; 409 | background: transparent; 410 | } 411 | div.sk_arrow[dir=down]>div:nth-of-type(2) { 412 | border-top: 10px solid #e0def4; 413 | } 414 | div.sk_arrow[dir=up]>div:nth-of-type(2) { 415 | top: 2px; 416 | border-bottom: 10px solid #e0def4; 417 | } 418 | .ace_editor.ace_autocomplete { 419 | z-index: 2147483300 !important; 420 | width: 80% !important; 421 | } 422 | @media only screen and (max-width: 767px) { 423 | #sk_omnibar { 424 | width: 100%; 425 | left: 0; 426 | } 427 | #sk_omnibarSearchResult { 428 | max-height: 50vh; 429 | overflow: scroll; 430 | } 431 | .sk_omnibar_bottom #sk_omnibarSearchArea { 432 | margin: 0; 433 | padding: 0.2rem; 434 | } 435 | } 436 | `; 437 | -------------------------------------------------------------------------------- /dist/rose-pine.js: -------------------------------------------------------------------------------- 1 | // name: Rosé Pine 2 | // author: thuanowa 3 | // license: unlicense 4 | // upstream: https://github.com/rose-pine/surfingkeys/blob/main/dist/rose-pine.conf 5 | // blurb: All natural pine, faux fur and a bit of soho vibes for the classy minimalist 6 | 7 | const hintsCss = 8 | "font-size: 13pt; font-family: 'JetBrains Mono NL', 'Cascadia Code', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 0px; color: #e0def4 !important; background: #191724; background-color: #191724"; 9 | 10 | api.Hints.style(hintsCss); 11 | api.Hints.style(hintsCss, "text"); 12 | 13 | settings.theme = ` 14 | .sk_theme { 15 | background: #191724; 16 | color: #e0def4; 17 | } 18 | .sk_theme input { 19 | color: #e0def4; 20 | } 21 | .sk_theme .url { 22 | color: #c4a7e7; 23 | } 24 | .sk_theme .annotation { 25 | color: #ebbcba; 26 | } 27 | .sk_theme kbd { 28 | background: #26233a; 29 | color: #e0def4; 30 | } 31 | .sk_theme .frame { 32 | background: #1f1d2e; 33 | } 34 | .sk_theme .omnibar_highlight { 35 | color: #403d52; 36 | } 37 | .sk_theme .omnibar_folder { 38 | color: #e0def4; 39 | } 40 | .sk_theme .omnibar_timestamp { 41 | color: #9ccfd8; 42 | } 43 | .sk_theme .omnibar_visitcount { 44 | color: #9ccfd8; 45 | } 46 | .sk_theme .prompt, .sk_theme .resultPage { 47 | color: #e0def4; 48 | } 49 | .sk_theme .feature_name { 50 | color: #e0def4; 51 | } 52 | .sk_theme .separator { 53 | color: #524f67; 54 | } 55 | body { 56 | margin: 0; 57 | 58 | font-family: "JetBrains Mono NL", "Cascadia Code", "Helvetica Neue", Helvetica, Arial, sans-serif; 59 | font-size: 12px; 60 | } 61 | #sk_omnibar { 62 | overflow: hidden; 63 | position: fixed; 64 | width: 80%; 65 | max-height: 80%; 66 | left: 10%; 67 | text-align: left; 68 | box-shadow: 0px 2px 10px #21202e; 69 | z-index: 2147483000; 70 | } 71 | .sk_omnibar_middle { 72 | top: 10%; 73 | border-radius: 4px; 74 | } 75 | .sk_omnibar_bottom { 76 | bottom: 0; 77 | border-radius: 4px 4px 0px 0px; 78 | } 79 | #sk_omnibar span.omnibar_highlight { 80 | text-shadow: 0 0 0.01em; 81 | } 82 | #sk_omnibarSearchArea .prompt, #sk_omnibarSearchArea .resultPage { 83 | display: inline-block; 84 | font-size: 20px; 85 | width: auto; 86 | } 87 | #sk_omnibarSearchArea>input { 88 | display: inline-block; 89 | width: 100%; 90 | flex: 1; 91 | font-size: 20px; 92 | margin-bottom: 0; 93 | padding: 0px 0px 0px 0.5rem; 94 | background: transparent; 95 | border-style: none; 96 | outline: none; 97 | } 98 | #sk_omnibarSearchArea { 99 | display: flex; 100 | align-items: center; 101 | border-bottom: 1px solid #524f67; 102 | } 103 | .sk_omnibar_middle #sk_omnibarSearchArea { 104 | margin: 0.5rem 1rem; 105 | } 106 | .sk_omnibar_bottom #sk_omnibarSearchArea { 107 | margin: 0.2rem 1rem; 108 | } 109 | .sk_omnibar_middle #sk_omnibarSearchResult>ul { 110 | margin-top: 0; 111 | } 112 | .sk_omnibar_bottom #sk_omnibarSearchResult>ul { 113 | margin-bottom: 0; 114 | } 115 | #sk_omnibarSearchResult { 116 | max-height: 60vh; 117 | overflow: hidden; 118 | margin: 0rem 0.6rem; 119 | } 120 | #sk_omnibarSearchResult:empty { 121 | display: none; 122 | } 123 | #sk_omnibarSearchResult>ul { 124 | padding: 0; 125 | } 126 | #sk_omnibarSearchResult>ul>li { 127 | padding: 0.2rem 0rem; 128 | display: block; 129 | max-height: 600px; 130 | overflow-x: hidden; 131 | overflow-y: auto; 132 | } 133 | .sk_theme #sk_omnibarSearchResult>ul>li:nth-child(odd) { 134 | background: #1f1d2e; 135 | } 136 | .sk_theme #sk_omnibarSearchResult>ul>li.focused { 137 | background: #26233a; 138 | } 139 | .sk_theme #sk_omnibarSearchResult>ul>li.window { 140 | border: 2px solid #524f67; 141 | border-radius: 8px; 142 | margin: 4px 0px; 143 | } 144 | .sk_theme #sk_omnibarSearchResult>ul>li.window.focused { 145 | border: 2px solid #c4a7e7; 146 | } 147 | .sk_theme div.table { 148 | display: table; 149 | } 150 | .sk_theme div.table>* { 151 | vertical-align: middle; 152 | display: table-cell; 153 | } 154 | #sk_omnibarSearchResult li div.title { 155 | text-align: left; 156 | } 157 | #sk_omnibarSearchResult li div.url { 158 | font-weight: bold; 159 | white-space: nowrap; 160 | } 161 | #sk_omnibarSearchResult li.focused div.url { 162 | white-space: normal; 163 | } 164 | #sk_omnibarSearchResult li span.annotation { 165 | float: right; 166 | } 167 | #sk_omnibarSearchResult .tab_in_window { 168 | display: inline-block; 169 | padding: 5px; 170 | margin: 5px; 171 | box-shadow: 0px 2px 10px #21202e; 172 | } 173 | #sk_status { 174 | position: fixed; 175 | bottom: 0; 176 | right: 20%; 177 | z-index: 2147483000; 178 | padding: 4px 8px 0 8px; 179 | border-radius: 4px 4px 0px 0px; 180 | border: 1px solid #524f67; 181 | font-size: 12px; 182 | } 183 | #sk_status>span { 184 | line-height: 16px; 185 | } 186 | .expandRichHints span.annotation { 187 | padding-left: 4px; 188 | color: #ebbcba; 189 | } 190 | .expandRichHints .kbd-span { 191 | min-width: 30px; 192 | text-align: right; 193 | display: inline-block; 194 | } 195 | .expandRichHints kbd>.candidates { 196 | color: #e0def4; 197 | font-weight: bold; 198 | } 199 | .expandRichHints kbd { 200 | padding: 1px 2px; 201 | } 202 | #sk_find { 203 | border-style: none; 204 | outline: none; 205 | } 206 | #sk_keystroke { 207 | padding: 6px; 208 | position: fixed; 209 | float: right; 210 | bottom: 0px; 211 | z-index: 2147483000; 212 | right: 0px; 213 | background: #191724; 214 | color: #e0def4; 215 | } 216 | #sk_usage, #sk_popup, #sk_editor { 217 | overflow: auto; 218 | position: fixed; 219 | width: 80%; 220 | max-height: 80%; 221 | top: 10%; 222 | left: 10%; 223 | text-align: left; 224 | box-shadow: #21202e; 225 | z-index: 2147483298; 226 | padding: 1rem; 227 | } 228 | #sk_nvim { 229 | position: fixed; 230 | top: 10%; 231 | left: 10%; 232 | width: 80%; 233 | height: 30%; 234 | } 235 | #sk_popup img { 236 | width: 100%; 237 | } 238 | #sk_usage>div { 239 | display: inline-block; 240 | vertical-align: top; 241 | } 242 | #sk_usage .kbd-span { 243 | width: 80px; 244 | text-align: right; 245 | display: inline-block; 246 | } 247 | #sk_usage .feature_name { 248 | text-align: center; 249 | padding-bottom: 4px; 250 | } 251 | #sk_usage .feature_name>span { 252 | border-bottom: 2px solid #524f67; 253 | } 254 | #sk_usage span.annotation { 255 | padding-left: 32px; 256 | line-height: 22px; 257 | } 258 | #sk_usage * { 259 | font-size: 10pt; 260 | } 261 | kbd { 262 | white-space: nowrap; 263 | display: inline-block; 264 | padding: 3px 5px; 265 | font: 11px "JetBrains Mono NL", "Cascadia Code", "Helvetica Neue", Helvetica, Arial, sans-serif; 266 | line-height: 10px; 267 | vertical-align: middle; 268 | border: solid 1px #524f67; 269 | border-bottom-lolor: #524f67; 270 | border-radius: 3px; 271 | box-shadow: inset 0 -1px 0 #21202e; 272 | } 273 | #sk_banner { 274 | padding: 0.5rem; 275 | position: fixed; 276 | left: 10%; 277 | top: -3rem; 278 | z-index: 2147483000; 279 | width: 80%; 280 | border-radius: 0px 0px 4px 4px; 281 | border: 1px solid #524f67; 282 | border-top-style: none; 283 | text-align: center; 284 | background: #191724; 285 | white-space: nowrap; 286 | text-overflow: ellipsis; 287 | overflow: hidden; 288 | } 289 | #sk_tabs { 290 | position: fixed; 291 | top: 0; 292 | left: 0; 293 | width: 100%; 294 | height: 100%; 295 | background: transparent; 296 | overflow: auto; 297 | z-index: 2147483000; 298 | } 299 | div.sk_tab { 300 | display: inline-flex; 301 | height: 28px; 302 | width: 202px; 303 | justify-content: space-between; 304 | align-items: center; 305 | flex-direction: row-reverse; 306 | border-radius: 3px; 307 | padding: 10px 20px; 308 | margin: 5px; 309 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#191724), color-stop(100%,#191724)); 310 | box-shadow: 0px 3px 7px 0px #21202e; 311 | } 312 | div.sk_tab_wrap { 313 | display: inline-block; 314 | flex: 1; 315 | } 316 | div.sk_tab_icon { 317 | display: inline-block; 318 | vertical-align: middle; 319 | } 320 | div.sk_tab_icon>img { 321 | width: 18px; 322 | } 323 | div.sk_tab_title { 324 | width: 150px; 325 | display: inline-block; 326 | vertical-align: middle; 327 | font-size: 10pt; 328 | white-space: nowrap; 329 | text-overflow: ellipsis; 330 | overflow: hidden; 331 | padding-left: 5px; 332 | color: #e0def4; 333 | } 334 | div.sk_tab_url { 335 | font-size: 10pt; 336 | white-space: nowrap; 337 | text-overflow: ellipsis; 338 | overflow: hidden; 339 | color: #c4a7e7; 340 | } 341 | div.sk_tab_hint { 342 | display: inline-block; 343 | float:right; 344 | font-size: 10pt; 345 | font-weight: bold; 346 | padding: 0px 2px 0px 2px; 347 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#191724), color-stop(100%,#191724)); 348 | color: #e0def4; 349 | border: solid 1px #524f67; 350 | border-radius: 3px; 351 | box-shadow: #21202e; 352 | } 353 | #sk_tabs.vertical div.sk_tab_hint { 354 | position: initial; 355 | margin-inline: 0; 356 | } 357 | div.tab_rocket { 358 | display: none; 359 | } 360 | #sk_bubble { 361 | position: absolute; 362 | padding: 9px; 363 | border: 1px solid #524f67; 364 | border-radius: 4px; 365 | box-shadow: 0 0 20px #21202e; 366 | color: #e0def4; 367 | background-color: #191724; 368 | z-index: 2147483000; 369 | font-size: 14px; 370 | } 371 | #sk_bubble .sk_bubble_content { 372 | overflow-y: scroll; 373 | background-size: 3px 100%; 374 | background-position: 100%; 375 | background-repeat: no-repeat; 376 | } 377 | .sk_scroller_indicator_top { 378 | background-image: linear-gradient(#191724, transparent); 379 | } 380 | .sk_scroller_indicator_middle { 381 | background-image: linear-gradient(transparent, #191724, transparent); 382 | } 383 | .sk_scroller_indicator_bottom { 384 | background-image: linear-gradient(transparent, #191724); 385 | } 386 | #sk_bubble * { 387 | color: #e0def4 !important; 388 | } 389 | div.sk_arrow>div:nth-of-type(1) { 390 | left: 0; 391 | position: absolute; 392 | width: 0; 393 | border-left: 12px solid transparent; 394 | border-right: 12px solid transparent; 395 | background: transparent; 396 | } 397 | div.sk_arrow[dir=down]>div:nth-of-type(1) { 398 | border-top: 12px solid #524f67; 399 | } 400 | div.sk_arrow[dir=up]>div:nth-of-type(1) { 401 | border-bottom: 12px solid #524f67; 402 | } 403 | div.sk_arrow>div:nth-of-type(2) { 404 | left: 2px; 405 | position: absolute; 406 | width: 0; 407 | border-left: 10px solid transparent; 408 | border-right: 10px solid transparent; 409 | background: transparent; 410 | } 411 | div.sk_arrow[dir=down]>div:nth-of-type(2) { 412 | border-top: 10px solid #e0def4; 413 | } 414 | div.sk_arrow[dir=up]>div:nth-of-type(2) { 415 | top: 2px; 416 | border-bottom: 10px solid #e0def4; 417 | } 418 | .ace_editor.ace_autocomplete { 419 | z-index: 2147483300 !important; 420 | width: 80% !important; 421 | } 422 | @media only screen and (max-width: 767px) { 423 | #sk_omnibar { 424 | width: 100%; 425 | left: 0; 426 | } 427 | #sk_omnibarSearchResult { 428 | max-height: 50vh; 429 | overflow: scroll; 430 | } 431 | .sk_omnibar_bottom #sk_omnibarSearchArea { 432 | margin: 0; 433 | padding: 0.2rem; 434 | } 435 | } 436 | `; 437 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

Rosé Pine for Surfingkeys

4 |

5 | 6 |

All natural pine, faux fur and a bit of soho vibes for the classy minimalist

7 | 8 |

9 | 10 | 11 | 12 |

13 | 14 | ## Usage 15 | 16 | 1. Open Surfingkeys options page `;e` 17 | 2. Enable Advanced mode 18 | 3. Copy paste [`dist/rose-pine.js`](./dist/rose-pine.js) or `loaded settings from` GitHub raw URL 19 | 20 | > Eg. https://raw.githubusercontent.com/rose-pine/surfingkeys/main/dist/rose-pine.js 21 | 22 | ## Gallery 23 | 24 | ### Rosé Pine 25 | 26 | ![rose_pine1](https://user-images.githubusercontent.com/40050527/215377284-80760f41-3d25-4d3b-a342-56f3c724abb9.png) 27 | ![rose_pine2](https://user-images.githubusercontent.com/40050527/215377287-f9bd9b85-98d0-4989-83cf-7dfda1b926f5.png) 28 | ![rose_pine3](https://user-images.githubusercontent.com/40050527/215377289-31ddd64e-938a-4756-861c-243571ef3411.png) 29 | ![rose_pine4](https://user-images.githubusercontent.com/40050527/215377292-8874360f-4fb6-43ef-bd13-d239a24055fa.png) 30 | ![rose_pine5](https://user-images.githubusercontent.com/40050527/215377294-d6363724-25d1-40fa-85de-40b824d3b9e8.png) 31 | ![rose_pine6](https://user-images.githubusercontent.com/40050527/215377295-f05b0272-cb33-4505-88c7-8688dbcccb22.png) 32 | ![rose_pine7](https://user-images.githubusercontent.com/40050527/215377298-81dd7403-6b8c-4f65-ae4c-480aae91271c.png) 33 | ![rose_pine8](https://user-images.githubusercontent.com/40050527/215377301-8b2cd384-4c01-4ddb-ac47-807da890552b.png) 34 | ![rose_pine9](https://user-images.githubusercontent.com/40050527/215377303-81ed2c7a-3cb1-4ac7-9552-3a8d64935101.png) 35 | ![rose_pine10](https://user-images.githubusercontent.com/40050527/215377306-d994f4f6-4c57-4b6d-9610-93d3f55fd8ad.png) 36 | ![rose_pine11](https://user-images.githubusercontent.com/40050527/215377307-2299fb8b-ed84-444d-8943-da0611a908c9.png) 37 | ![rose_pine12](https://user-images.githubusercontent.com/40050527/215377310-a1e05dd7-5a08-44d9-a443-0d46c0af29c2.png) 38 | 39 | ### Rosé Pine Moon 40 | 41 | ![rose_pine_moon_1](https://user-images.githubusercontent.com/40050527/215377345-b9a7072d-be33-4f8e-a441-4d9f1a541258.png) 42 | ![rose_pine_moon_2](https://user-images.githubusercontent.com/40050527/215377348-3664dcaf-09ce-4d35-a791-2a4b4898cc6c.png) 43 | ![rose_pine_moon_3](https://user-images.githubusercontent.com/40050527/215377355-2ce0a487-8724-433f-a352-081670f64d6f.png) 44 | ![rose_pine_moon_4](https://user-images.githubusercontent.com/40050527/215377357-01475b5b-222b-4442-898e-b9974f78506e.png) 45 | ![rose_pine_moon_5](https://user-images.githubusercontent.com/40050527/215377358-67a5797f-38ce-465f-adb8-df21c0281558.png) 46 | ![rose_pine_moon_6](https://user-images.githubusercontent.com/40050527/215377361-e2940fca-9faf-438e-9e3f-c1f90f48ad89.png) 47 | ![rose_pine_moon_7](https://user-images.githubusercontent.com/40050527/215377366-7375a1ab-33a7-4802-8ee3-f672b0bb6e4b.png) 48 | ![rose_pine_moon_8](https://user-images.githubusercontent.com/40050527/215377368-11172d41-80f2-439d-a356-2e5138d18066.png) 49 | ![rose_pine_moon_9](https://user-images.githubusercontent.com/40050527/215377369-ba1ffbd3-1af6-4655-a04e-7cd57364ae89.png) 50 | ![rose_pine_moon_10](https://user-images.githubusercontent.com/40050527/215377372-24d1d7f6-63b2-4a90-9c15-a3f10b956633.png) 51 | ![rose_pine_moon_11](https://user-images.githubusercontent.com/40050527/215377376-d88c5d3e-a6be-4a62-bd9e-7b54a9378546.png) 52 | ![rose_pine_moon_12](https://user-images.githubusercontent.com/40050527/215377378-1e865ff5-005f-405a-9089-7eb6795bcc61.png) 53 | 54 | ### Rosé Pine Dawn 55 | 56 | ![rose_pine_dawn_1](https://user-images.githubusercontent.com/40050527/215377314-45c1e284-25f7-4856-9ee3-ab99d2c90ffa.png) 57 | ![rose_pine_dawn_2](https://user-images.githubusercontent.com/40050527/215377315-5a9350b9-d752-4f18-b450-455b50f8f893.png) 58 | ![rose_pine_dawn_3](https://user-images.githubusercontent.com/40050527/215377317-4db632e8-2a18-4126-b6b4-448ccd12393f.png) 59 | ![rose_pine_dawn_4](https://user-images.githubusercontent.com/40050527/215377318-17a096b9-128a-465e-8a10-2a8280530fb8.png) 60 | ![rose_pine_dawn_5](https://user-images.githubusercontent.com/40050527/215377321-0bfe13ca-b625-44d2-92d0-5a42e5844c11.png) 61 | ![rose_pine_dawn_6](https://user-images.githubusercontent.com/40050527/215377324-e7cf89f4-66d9-49f3-a2e5-0310a8e72dd1.png) 62 | ![rose_pine_dawn_7](https://user-images.githubusercontent.com/40050527/215377326-1cfa4316-a0e7-423e-ac04-d7529792d1ff.png) 63 | ![rose_pine_dawn_8](https://user-images.githubusercontent.com/40050527/215377328-aec72ca1-05cd-4933-9071-e8cc33465d31.png) 64 | ![rose_pine_dawn_9](https://user-images.githubusercontent.com/40050527/215377332-35f50f8f-d5b5-4acd-b52e-907af0d5360e.png) 65 | ![rose_pine_dawn_10](https://user-images.githubusercontent.com/40050527/215377336-60616340-eec9-425f-8546-27dc73341897.png) 66 | ![rose_pine_dawn_11](https://user-images.githubusercontent.com/40050527/215377339-1ff73f50-59fd-49ab-8f8f-c4edd68ce9d6.png) 67 | ![rose_pine_dawn_12](https://user-images.githubusercontent.com/40050527/215377342-1d9417f7-c35d-485c-84cf-9ce0fc987866.png) 68 | 69 | ## Thanks to 70 | 71 | - [thuanowa](https://github.com/thuanowa) 72 | 73 | ## Contributing 74 | 75 | Surfingkeys front-end: https://github.com/brookhong/Surfingkeys/blob/master/src/content_scripts/ui/frontend.css 76 | 77 | Modify `template.json` using [Rosé Pine variables](https://github.com/rose-pine/build#variables), then build variants: 78 | 79 | ```sh 80 | cd $(git rev-parse --show-toplevel) 81 | rm -rf dist/ 82 | npx @rose-pine/build@latest -t template.js 83 | 84 | # Or 85 | 86 | ./build 87 | ``` 88 | 89 | _Generated by [@rose-pine/build@0.9.1](https://github.com/rose-pine/build)_ 90 | -------------------------------------------------------------------------------- /template.js: -------------------------------------------------------------------------------- 1 | // name: $name 2 | // author: thuanowa 3 | // license: unlicense 4 | // upstream: https://github.com/rose-pine/surfingkeys/blob/main/dist/$id.conf 5 | // blurb: $description 6 | 7 | const hintsCss = 8 | "font-size: 13pt; font-family: 'JetBrains Mono NL', 'Cascadia Code', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 0px; color: $text !important; background: $base; background-color: $base"; 9 | 10 | api.Hints.style(hintsCss); 11 | api.Hints.style(hintsCss, "text"); 12 | 13 | settings.theme = ` 14 | .sk_theme { 15 | background: $base; 16 | color: $text; 17 | } 18 | .sk_theme input { 19 | color: $text; 20 | } 21 | .sk_theme .url { 22 | color: $iris; 23 | } 24 | .sk_theme .annotation { 25 | color: $rose; 26 | } 27 | .sk_theme kbd { 28 | background: $overlay; 29 | color: $text; 30 | } 31 | .sk_theme .frame { 32 | background: $surface; 33 | } 34 | .sk_theme .omnibar_highlight { 35 | color: $highlightMed; 36 | } 37 | .sk_theme .omnibar_folder { 38 | color: $text; 39 | } 40 | .sk_theme .omnibar_timestamp { 41 | color: $foam; 42 | } 43 | .sk_theme .omnibar_visitcount { 44 | color: $foam; 45 | } 46 | .sk_theme .prompt, .sk_theme .resultPage { 47 | color: $text; 48 | } 49 | .sk_theme .feature_name { 50 | color: $text; 51 | } 52 | .sk_theme .separator { 53 | color: $highlightHigh; 54 | } 55 | body { 56 | margin: 0; 57 | 58 | font-family: "JetBrains Mono NL", "Cascadia Code", "Helvetica Neue", Helvetica, Arial, sans-serif; 59 | font-size: 12px; 60 | } 61 | #sk_omnibar { 62 | overflow: hidden; 63 | position: fixed; 64 | width: 80%; 65 | max-height: 80%; 66 | left: 10%; 67 | text-align: left; 68 | box-shadow: 0px 2px 10px $highlightLow; 69 | z-index: 2147483000; 70 | } 71 | .sk_omnibar_middle { 72 | top: 10%; 73 | border-radius: 4px; 74 | } 75 | .sk_omnibar_bottom { 76 | bottom: 0; 77 | border-radius: 4px 4px 0px 0px; 78 | } 79 | #sk_omnibar span.omnibar_highlight { 80 | text-shadow: 0 0 0.01em; 81 | } 82 | #sk_omnibarSearchArea .prompt, #sk_omnibarSearchArea .resultPage { 83 | display: inline-block; 84 | font-size: 20px; 85 | width: auto; 86 | } 87 | #sk_omnibarSearchArea>input { 88 | display: inline-block; 89 | width: 100%; 90 | flex: 1; 91 | font-size: 20px; 92 | margin-bottom: 0; 93 | padding: 0px 0px 0px 0.5rem; 94 | background: transparent; 95 | border-style: none; 96 | outline: none; 97 | } 98 | #sk_omnibarSearchArea { 99 | display: flex; 100 | align-items: center; 101 | border-bottom: 1px solid $highlightHigh; 102 | } 103 | .sk_omnibar_middle #sk_omnibarSearchArea { 104 | margin: 0.5rem 1rem; 105 | } 106 | .sk_omnibar_bottom #sk_omnibarSearchArea { 107 | margin: 0.2rem 1rem; 108 | } 109 | .sk_omnibar_middle #sk_omnibarSearchResult>ul { 110 | margin-top: 0; 111 | } 112 | .sk_omnibar_bottom #sk_omnibarSearchResult>ul { 113 | margin-bottom: 0; 114 | } 115 | #sk_omnibarSearchResult { 116 | max-height: 60vh; 117 | overflow: hidden; 118 | margin: 0rem 0.6rem; 119 | } 120 | #sk_omnibarSearchResult:empty { 121 | display: none; 122 | } 123 | #sk_omnibarSearchResult>ul { 124 | padding: 0; 125 | } 126 | #sk_omnibarSearchResult>ul>li { 127 | padding: 0.2rem 0rem; 128 | display: block; 129 | max-height: 600px; 130 | overflow-x: hidden; 131 | overflow-y: auto; 132 | } 133 | .sk_theme #sk_omnibarSearchResult>ul>li:nth-child(odd) { 134 | background: $surface; 135 | } 136 | .sk_theme #sk_omnibarSearchResult>ul>li.focused { 137 | background: $overlay; 138 | } 139 | .sk_theme #sk_omnibarSearchResult>ul>li.window { 140 | border: 2px solid $highlightHigh; 141 | border-radius: 8px; 142 | margin: 4px 0px; 143 | } 144 | .sk_theme #sk_omnibarSearchResult>ul>li.window.focused { 145 | border: 2px solid $iris; 146 | } 147 | .sk_theme div.table { 148 | display: table; 149 | } 150 | .sk_theme div.table>* { 151 | vertical-align: middle; 152 | display: table-cell; 153 | } 154 | #sk_omnibarSearchResult li div.title { 155 | text-align: left; 156 | } 157 | #sk_omnibarSearchResult li div.url { 158 | font-weight: bold; 159 | white-space: nowrap; 160 | } 161 | #sk_omnibarSearchResult li.focused div.url { 162 | white-space: normal; 163 | } 164 | #sk_omnibarSearchResult li span.annotation { 165 | float: right; 166 | } 167 | #sk_omnibarSearchResult .tab_in_window { 168 | display: inline-block; 169 | padding: 5px; 170 | margin: 5px; 171 | box-shadow: 0px 2px 10px $highlightLow; 172 | } 173 | #sk_status { 174 | position: fixed; 175 | bottom: 0; 176 | right: 20%; 177 | z-index: 2147483000; 178 | padding: 4px 8px 0 8px; 179 | border-radius: 4px 4px 0px 0px; 180 | border: 1px solid $highlightHigh; 181 | font-size: 12px; 182 | } 183 | #sk_status>span { 184 | line-height: 16px; 185 | } 186 | .expandRichHints span.annotation { 187 | padding-left: 4px; 188 | color: $rose; 189 | } 190 | .expandRichHints .kbd-span { 191 | min-width: 30px; 192 | text-align: right; 193 | display: inline-block; 194 | } 195 | .expandRichHints kbd>.candidates { 196 | color: $text; 197 | font-weight: bold; 198 | } 199 | .expandRichHints kbd { 200 | padding: 1px 2px; 201 | } 202 | #sk_find { 203 | border-style: none; 204 | outline: none; 205 | } 206 | #sk_keystroke { 207 | padding: 6px; 208 | position: fixed; 209 | float: right; 210 | bottom: 0px; 211 | z-index: 2147483000; 212 | right: 0px; 213 | background: $base; 214 | color: $text; 215 | } 216 | #sk_usage, #sk_popup, #sk_editor { 217 | overflow: auto; 218 | position: fixed; 219 | width: 80%; 220 | max-height: 80%; 221 | top: 10%; 222 | left: 10%; 223 | text-align: left; 224 | box-shadow: $highlightLow; 225 | z-index: 2147483298; 226 | padding: 1rem; 227 | } 228 | #sk_nvim { 229 | position: fixed; 230 | top: 10%; 231 | left: 10%; 232 | width: 80%; 233 | height: 30%; 234 | } 235 | #sk_popup img { 236 | width: 100%; 237 | } 238 | #sk_usage>div { 239 | display: inline-block; 240 | vertical-align: top; 241 | } 242 | #sk_usage .kbd-span { 243 | width: 80px; 244 | text-align: right; 245 | display: inline-block; 246 | } 247 | #sk_usage .feature_name { 248 | text-align: center; 249 | padding-bottom: 4px; 250 | } 251 | #sk_usage .feature_name>span { 252 | border-bottom: 2px solid $highlightHigh; 253 | } 254 | #sk_usage span.annotation { 255 | padding-left: 32px; 256 | line-height: 22px; 257 | } 258 | #sk_usage * { 259 | font-size: 10pt; 260 | } 261 | kbd { 262 | white-space: nowrap; 263 | display: inline-block; 264 | padding: 3px 5px; 265 | font: 11px "JetBrains Mono NL", "Cascadia Code", "Helvetica Neue", Helvetica, Arial, sans-serif; 266 | line-height: 10px; 267 | vertical-align: middle; 268 | border: solid 1px $highlightHigh; 269 | border-bottom-lolor: $highlightHigh; 270 | border-radius: 3px; 271 | box-shadow: inset 0 -1px 0 $highlightLow; 272 | } 273 | #sk_banner { 274 | padding: 0.5rem; 275 | position: fixed; 276 | left: 10%; 277 | top: -3rem; 278 | z-index: 2147483000; 279 | width: 80%; 280 | border-radius: 0px 0px 4px 4px; 281 | border: 1px solid $highlightHigh; 282 | border-top-style: none; 283 | text-align: center; 284 | background: $base; 285 | white-space: nowrap; 286 | text-overflow: ellipsis; 287 | overflow: hidden; 288 | } 289 | #sk_tabs { 290 | position: fixed; 291 | top: 0; 292 | left: 0; 293 | width: 100%; 294 | height: 100%; 295 | background: transparent; 296 | overflow: auto; 297 | z-index: 2147483000; 298 | } 299 | div.sk_tab { 300 | display: inline-flex; 301 | height: 28px; 302 | width: 202px; 303 | justify-content: space-between; 304 | align-items: center; 305 | flex-direction: row-reverse; 306 | border-radius: 3px; 307 | padding: 10px 20px; 308 | margin: 5px; 309 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$base), color-stop(100%,$base)); 310 | box-shadow: 0px 3px 7px 0px $highlightLow; 311 | } 312 | div.sk_tab_wrap { 313 | display: inline-block; 314 | flex: 1; 315 | } 316 | div.sk_tab_icon { 317 | display: inline-block; 318 | vertical-align: middle; 319 | } 320 | div.sk_tab_icon>img { 321 | width: 18px; 322 | } 323 | div.sk_tab_title { 324 | width: 150px; 325 | display: inline-block; 326 | vertical-align: middle; 327 | font-size: 10pt; 328 | white-space: nowrap; 329 | text-overflow: ellipsis; 330 | overflow: hidden; 331 | padding-left: 5px; 332 | color: $text; 333 | } 334 | div.sk_tab_url { 335 | font-size: 10pt; 336 | white-space: nowrap; 337 | text-overflow: ellipsis; 338 | overflow: hidden; 339 | color: $iris; 340 | } 341 | div.sk_tab_hint { 342 | display: inline-block; 343 | float:right; 344 | font-size: 10pt; 345 | font-weight: bold; 346 | padding: 0px 2px 0px 2px; 347 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$base), color-stop(100%,$base)); 348 | color: $text; 349 | border: solid 1px $highlightHigh; 350 | border-radius: 3px; 351 | box-shadow: $highlightLow; 352 | } 353 | #sk_tabs.vertical div.sk_tab_hint { 354 | position: initial; 355 | margin-inline: 0; 356 | } 357 | div.tab_rocket { 358 | display: none; 359 | } 360 | #sk_bubble { 361 | position: absolute; 362 | padding: 9px; 363 | border: 1px solid $highlightHigh; 364 | border-radius: 4px; 365 | box-shadow: 0 0 20px $highlightLow; 366 | color: $text; 367 | background-color: $base; 368 | z-index: 2147483000; 369 | font-size: 14px; 370 | } 371 | #sk_bubble .sk_bubble_content { 372 | overflow-y: scroll; 373 | background-size: 3px 100%; 374 | background-position: 100%; 375 | background-repeat: no-repeat; 376 | } 377 | .sk_scroller_indicator_top { 378 | background-image: linear-gradient($base, transparent); 379 | } 380 | .sk_scroller_indicator_middle { 381 | background-image: linear-gradient(transparent, $base, transparent); 382 | } 383 | .sk_scroller_indicator_bottom { 384 | background-image: linear-gradient(transparent, $base); 385 | } 386 | #sk_bubble * { 387 | color: $text !important; 388 | } 389 | div.sk_arrow>div:nth-of-type(1) { 390 | left: 0; 391 | position: absolute; 392 | width: 0; 393 | border-left: 12px solid transparent; 394 | border-right: 12px solid transparent; 395 | background: transparent; 396 | } 397 | div.sk_arrow[dir=down]>div:nth-of-type(1) { 398 | border-top: 12px solid $highlightHigh; 399 | } 400 | div.sk_arrow[dir=up]>div:nth-of-type(1) { 401 | border-bottom: 12px solid $highlightHigh; 402 | } 403 | div.sk_arrow>div:nth-of-type(2) { 404 | left: 2px; 405 | position: absolute; 406 | width: 0; 407 | border-left: 10px solid transparent; 408 | border-right: 10px solid transparent; 409 | background: transparent; 410 | } 411 | div.sk_arrow[dir=down]>div:nth-of-type(2) { 412 | border-top: 10px solid $text; 413 | } 414 | div.sk_arrow[dir=up]>div:nth-of-type(2) { 415 | top: 2px; 416 | border-bottom: 10px solid $text; 417 | } 418 | .ace_editor.ace_autocomplete { 419 | z-index: 2147483300 !important; 420 | width: 80% !important; 421 | } 422 | @media only screen and (max-width: 767px) { 423 | #sk_omnibar { 424 | width: 100%; 425 | left: 0; 426 | } 427 | #sk_omnibarSearchResult { 428 | max-height: 50vh; 429 | overflow: scroll; 430 | } 431 | .sk_omnibar_bottom #sk_omnibarSearchArea { 432 | margin: 0; 433 | padding: 0.2rem; 434 | } 435 | } 436 | `; 437 | --------------------------------------------------------------------------------