├── build.sh
├── dist
    ├── rose-pine-dawn.css
    ├── rose-pine-moon.css
    └── rose-pine.css
├── readme.md
└── template.css


/build.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | 
3 | npx @rose-pine/build@latest -s false -p _ -t template.css 
4 | 


--------------------------------------------------------------------------------
/dist/rose-pine-dawn.css:
--------------------------------------------------------------------------------
  1 | /* find-host, not working write to the find-host section, so I put it outside */
  2 | .R.HM.D>.LH {
  3 |     background: #286983cc;
  4 |     border: none;
  5 |     border-radius: 1px;
  6 |     backdrop-filter: blur(1.5px);
  7 |     color: #e0def4;
  8 | }
  9 | 
 10 | /* #ui */
 11 | .HUD,
 12 | .TEE {
 13 |     padding: 0;
 14 |     bottom: 1px;
 15 | }
 16 | 
 17 | @media screen and (min-width: 1260px) {
 18 |     .Omnibar {
 19 |        left: calc(20vw - 12px);
 20 |        width: calc(60vw + 24px); 
 21 |     }
 22 | }
 23 | @media screen and (min-width: 1760px) {
 24 |     .Omnibar {
 25 |        left: calc(30vw - 12px);
 26 |        width: calc(40vw + 24px); 
 27 |     }
 28 | }
 29 | 
 30 | /* #omni */
 31 | #bar {
 32 |     background: #faf4ed;
 33 | 
 34 |     border-bottom: none;
 35 | }
 36 | 
 37 | #list {
 38 |     background: #faf4ed;
 39 | }
 40 | 
 41 | #input {
 42 |     background: #faf4ed;
 43 | 
 44 |     box-shadow: none;
 45 |     border-color: #cecacd;
 46 | }
 47 | 
 48 | body::after {
 49 |     border: none;
 50 | }
 51 | 
 52 | .item {
 53 |     border-bottom: none;
 54 |     padding-top: 0px;
 55 |     cursor: pointer;
 56 | 
 57 | 
 58 |     display: flex;
 59 |     align-items: center;
 60 |     justify-content: space-between;
 61 | }
 62 | 
 63 | .item.s,
 64 | .item:hover {
 65 |     background-color: #cecacd;
 66 | }
 67 | 
 68 | .top {
 69 |     color: #575279;
 70 |     width: 30rem;
 71 | }
 72 | 
 73 | .bottom {
 74 |     width: 20rem;
 75 |     overflow: hidden;
 76 | }
 77 | 
 78 | .bottom>a {
 79 |     font-size: .7rem;
 80 | }
 81 | 
 82 | #toolbar {
 83 |     display: none;
 84 | }
 85 | 
 86 | /* #find */
 87 | 
 88 | .r.D {
 89 |     background: #faf4ed;
 90 |     color: #575279;
 91 | }
 92 | 
 93 | .r {
 94 |     box-shadow: inset 0 0 1px 0.5px #907aa9;
 95 | }
 96 | 
 97 | /* #find:host */
 98 | 
 99 | 
100 | 
101 | /* #find:selection */
102 | ::selection {
103 |     background: #ea9d34 !important;
104 |     color: #575279;
105 | }


--------------------------------------------------------------------------------
/dist/rose-pine-moon.css:
--------------------------------------------------------------------------------
  1 | /* find-host, not working write to the find-host section, so I put it outside */
  2 | .R.HM.D>.LH {
  3 |     background: #3e8fb0cc;
  4 |     border: none;
  5 |     border-radius: 1px;
  6 |     backdrop-filter: blur(1.5px);
  7 |     color: #e0def4;
  8 | }
  9 | 
 10 | /* #ui */
 11 | .HUD,
 12 | .TEE {
 13 |     padding: 0;
 14 |     bottom: 1px;
 15 | }
 16 | 
 17 | @media screen and (min-width: 1260px) {
 18 |     .Omnibar {
 19 |        left: calc(20vw - 12px);
 20 |        width: calc(60vw + 24px); 
 21 |     }
 22 | }
 23 | @media screen and (min-width: 1760px) {
 24 |     .Omnibar {
 25 |        left: calc(30vw - 12px);
 26 |        width: calc(40vw + 24px); 
 27 |     }
 28 | }
 29 | 
 30 | /* #omni */
 31 | #bar {
 32 |     background: #232136;
 33 | 
 34 |     border-bottom: none;
 35 | }
 36 | 
 37 | #list {
 38 |     background: #232136;
 39 | }
 40 | 
 41 | #input {
 42 |     background: #232136;
 43 | 
 44 |     box-shadow: none;
 45 |     border-color: #56526e;
 46 | }
 47 | 
 48 | body::after {
 49 |     border: none;
 50 | }
 51 | 
 52 | .item {
 53 |     border-bottom: none;
 54 |     padding-top: 0px;
 55 |     cursor: pointer;
 56 | 
 57 | 
 58 |     display: flex;
 59 |     align-items: center;
 60 |     justify-content: space-between;
 61 | }
 62 | 
 63 | .item.s,
 64 | .item:hover {
 65 |     background-color: #56526e;
 66 | }
 67 | 
 68 | .top {
 69 |     color: #e0def4;
 70 |     width: 30rem;
 71 | }
 72 | 
 73 | .bottom {
 74 |     width: 20rem;
 75 |     overflow: hidden;
 76 | }
 77 | 
 78 | .bottom>a {
 79 |     font-size: .7rem;
 80 | }
 81 | 
 82 | #toolbar {
 83 |     display: none;
 84 | }
 85 | 
 86 | /* #find */
 87 | 
 88 | .r.D {
 89 |     background: #232136;
 90 |     color: #e0def4;
 91 | }
 92 | 
 93 | .r {
 94 |     box-shadow: inset 0 0 1px 0.5px #c4a7e7;
 95 | }
 96 | 
 97 | /* #find:host */
 98 | 
 99 | 
100 | 
101 | /* #find:selection */
102 | ::selection {
103 |     background: #ea9d34 !important;
104 |     color: #e0def4;
105 | }


--------------------------------------------------------------------------------
/dist/rose-pine.css:
--------------------------------------------------------------------------------
  1 | /* find-host, not working write to the find-host section, so I put it outside */
  2 | .R.HM.D>.LH {
  3 |     background: #31748fcc;
  4 |     border: none;
  5 |     border-radius: 1px;
  6 |     backdrop-filter: blur(1.5px);
  7 |     color: #e0def4;
  8 | }
  9 | 
 10 | /* #ui */
 11 | .HUD,
 12 | .TEE {
 13 |     padding: 0;
 14 |     bottom: 1px;
 15 | }
 16 | 
 17 | @media screen and (min-width: 1260px) {
 18 |     .Omnibar {
 19 |        left: calc(20vw - 12px);
 20 |        width: calc(60vw + 24px); 
 21 |     }
 22 | }
 23 | @media screen and (min-width: 1760px) {
 24 |     .Omnibar {
 25 |        left: calc(30vw - 12px);
 26 |        width: calc(40vw + 24px); 
 27 |     }
 28 | }
 29 | 
 30 | /* #omni */
 31 | #bar {
 32 |     background: #191724;
 33 | 
 34 |     border-bottom: none;
 35 | }
 36 | 
 37 | #list {
 38 |     background: #191724;
 39 | }
 40 | 
 41 | #input {
 42 |     background: #191724;
 43 | 
 44 |     box-shadow: none;
 45 |     border-color: #524f67;
 46 | }
 47 | 
 48 | body::after {
 49 |     border: none;
 50 | }
 51 | 
 52 | .item {
 53 |     border-bottom: none;
 54 |     padding-top: 0px;
 55 |     cursor: pointer;
 56 | 
 57 | 
 58 |     display: flex;
 59 |     align-items: center;
 60 |     justify-content: space-between;
 61 | }
 62 | 
 63 | .item.s,
 64 | .item:hover {
 65 |     background-color: #524f67;
 66 | }
 67 | 
 68 | .top {
 69 |     color: #e0def4;
 70 |     width: 30rem;
 71 | }
 72 | 
 73 | .bottom {
 74 |     width: 20rem;
 75 |     overflow: hidden;
 76 | }
 77 | 
 78 | .bottom>a {
 79 |     font-size: .7rem;
 80 | }
 81 | 
 82 | #toolbar {
 83 |     display: none;
 84 | }
 85 | 
 86 | /* #find */
 87 | 
 88 | .r.D {
 89 |     background: #191724;
 90 |     color: #e0def4;
 91 | }
 92 | 
 93 | .r {
 94 |     box-shadow: inset 0 0 1px 0.5px #c4a7e7;
 95 | }
 96 | 
 97 | /* #find:host */
 98 | 
 99 | 
100 | 
101 | /* #find:selection */
102 | ::selection {
103 |     background: #ea9d34 !important;
104 |     color: #e0def4;
105 | }


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |     <img src="https://github.com/rose-pine/rose-pine-theme/raw/main/assets/icon.png" width="80" />
 3 |     <h2 align="center">Rosé Pine for Vimium C</h2>
 4 | </p>
 5 | 
 6 | <p align="center">All natural pine, faux fur and a bit of soho vibes for the classy minimalist</p>
 7 | 
 8 | <p align="center">
 9 |     <a href="https://github.com/rose-pine/rose-pine-theme">
10 |         <img src="https://img.shields.io/badge/community-rosé%20pine-26233a?labelColor=191724&logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUwIiBoZWlnaHQ9IjIzNyIgdmlld0JveD0iMCAwIDI1MCAyMzciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNjEuMjI3IDE2MS4yNTFDMTMyLjE1NCAxNjkuMDQxIDExNC45MDEgMTk4LjkyNCAxMjIuNjkxIDIyNy45OTdDMTIzLjkyNSAyMzIuNjAzIDEyOC42NTkgMjM1LjMzNiAxMzMuMjY0IDIzNC4xMDJMMTg1LjkwNyAyMTkuOTk2QzIxOS41ODUgMjEwLjk3MiAyMzkuNTcgMTc2LjM1NCAyMzAuNTQ2IDE0Mi42NzdMMTYxLjIyNyAxNjEuMjUxWiIgZmlsbD0iIzI0NjI3QiIvPgo8cGF0aCBkPSJNODguMTgzNiAxNTkuOTg4QzExNy4yNTcgMTY3Ljc3OCAxMzQuNTEgMTk3LjY2MiAxMjYuNzIgMjI2LjczNUMxMjUuNDg2IDIzMS4zNCAxMjAuNzUyIDIzNC4wNzMgMTE2LjE0NyAyMzIuODM5TDYzLjUwNDEgMjE4LjczM0MyOS44MjY0IDIwOS43MSA5Ljg0MDk0IDE3NS4wOTIgMTguODY0OSAxNDEuNDE0TDg4LjE4MzYgMTU5Ljk4OFoiIGZpbGw9IiMyNDYyN0IiLz4KPHBhdGggZD0iTTE4Ni44NjcgMTcyLjk4QzE1Mi4wMDIgMTcyLjk4IDEyMy43MzcgMjAxLjI0NSAxMjMuNzM3IDIzNi4xMTFIMTg2Ljg3QzIyMS43MzYgMjM2LjExMSAyNTAgMjA3Ljg0NiAyNTAgMTcyLjk4TDE4Ni44NjcgMTcyLjk4WiIgZmlsbD0iIzMxNzQ4RiIvPgo8cGF0aCBkPSJNNjMuMTMyNyAxNzIuOThDOTcuOTk4NCAxNzIuOTggMTI2LjI2MyAyMDEuMjQ1IDEyNi4yNjMgMjM2LjExMUg2My4xM0MyOC4yNjQyIDIzNi4xMTEgLTEuNTI0MDNlLTA2IDIwNy44NDYgMCAxNzIuOThMNjMuMTMyNyAxNzIuOThaIiBmaWxsPSIjMzE3NDhGIi8+CjxwYXRoIGQ9Ik0xNzEuNzE3IDc1LjEyNjNDMTcxLjcxNyAxMDEuMjc2IDE1MC41MTggMTIyLjQ3NSAxMjQuMzY5IDEyMi40NzVDOTguMjE4OCAxMjIuNDc1IDc3LjAyMDIgMTAxLjI3NiA3Ny4wMjAyIDc1LjEyNjNDNzcuMDIwMiA0OC45NzY0IDk4LjIxODggMjcuNzc3OCAxMjQuMzY5IDI3Ljc3NzhDMTUwLjUxOCAyNy43Nzc4IDE3MS43MTcgNDguOTc2NCAxNzEuNzE3IDc1LjEyNjNaIiBmaWxsPSIjRUJCQ0JBIi8+CjxwYXRoIGQ9Ik0xNDQuMjE3IDg2LjIzNzlDMTYxLjY0OSA1Ni4wNDMyIDE1MS4zMDMgMTcuNDMyOSAxMjEuMTA4IDBMMTA2LjA2IDI2LjA2NDRDODguNjI3IDU2LjI1OSA5OC45NzM2IDk0Ljg2OTQgMTI5LjE2OCAxMTIuMzAyTDE0NC4yMTcgODYuMjM3OVoiIGZpbGw9IiNFQkJDQkEiLz4KPHBhdGggZD0iTTEyNS4yOTkgNjAuOTc4OUMxMTYuMjc1IDI3LjMwMTIgODEuNjU3NSA3LjMxNTY3IDQ3Ljk3OTcgMTYuMzM5Nkw2NC4zMTk3IDc3LjMyMTFDNzMuMzQzNiAxMTAuOTk5IDEwNy45NjEgMTMwLjk4NCAxNDEuNjM5IDEyMS45NkwxMjUuMjk5IDYwLjk3ODlaIiBmaWxsPSIjRUJCQ0JBIi8+CjxwYXRoIGQ9Ik0xMjQuOTI2IDYwLjk3ODlDMTMzLjk1IDI3LjMwMTIgMTY4LjU2NyA3LjMxNTY3IDIwMi4yNDUgMTYuMzM5NkwxODUuOTA1IDc3LjMyMTFDMTc2Ljg4MSAxMTAuOTk5IDE0Mi4yNjMgMTMwLjk4NCAxMDguNTg2IDEyMS45NkwxMjQuOTI2IDYwLjk3ODlaIiBmaWxsPSIjRUJCQ0JBIi8+Cjwvc3ZnPgo=&style=for-the-badge" />
11 |     </a>
12 | </p>
13 | 
14 | ## Usage
15 | 
16 | > [Style the UI of Vimium C using custom CSS](https://github.com/gdh1995/vimium-c/wiki/Style-the-UI-of-Vimium-C-using-custom-CSS)
17 | 
18 | 1. Navigate to Vimium C extension option page
19 | 2. Find "Custom CSS for Vimium C UI"
20 | 3. Copy and paste dist/theme.css to the textbox
21 | 
22 | ## Gallery
23 | 
24 | _Search bar_
25 | 
26 | ![Empty search bar](https://user-images.githubusercontent.com/1474821/215540525-bd10a8ae-15e9-4883-a0f9-482f40d2f7b5.png)
27 | 
28 | _Search results_
29 | 
30 | ![Example search with results](https://user-images.githubusercontent.com/1474821/215540814-7c2e505d-61ba-4530-920a-556f7e3b3252.png)
31 | 
32 | _Keymaps overlay_
33 | 
34 | ![Keymaps atop interactive elements](https://user-images.githubusercontent.com/1474821/215540830-fa2c92aa-ae19-486f-818e-ca6da8a4e623.png)
35 | 
36 | _Find text_
37 | 
38 | ![Empty find bar](https://user-images.githubusercontent.com/1474821/215540847-6d59251d-9e81-4d0c-aee0-8d53a39843ab.png)
39 | 
40 | ## Thanks to
41 | 
42 | - [zxx-457](https://github.com/zxx-457)
43 | 
44 | ## Contributing
45 | 
46 | Modify template.css using Rosé Pine variables, then build variants:
47 | 
48 | ```sh
49 | npx @rose-pine/build@latest -s false -p _ -t template.css 
50 | ```
51 | 
52 | Or use the included shell script:
53 | 
54 | ```sh
55 | sh ./build.sh
56 | ```
57 | 
58 | _Generated by @rose-pine/build@0.5.1_
59 | 


--------------------------------------------------------------------------------
/template.css:
--------------------------------------------------------------------------------
  1 | /* find-host, not working write to the find-host section, so I put it outside */
  2 | .R.HM.D>.LH {
  3 |     background: _pinecc;
  4 |     border: none;
  5 |     border-radius: 1px;
  6 |     backdrop-filter: blur(1.5px);
  7 |     color: #e0def4;
  8 | }
  9 | 
 10 | /* #ui */
 11 | .HUD,
 12 | .TEE {
 13 |     padding: 0;
 14 |     bottom: 1px;
 15 | }
 16 | 
 17 | @media screen and (min-width: 1260px) {
 18 |     .Omnibar {
 19 |        left: calc(20vw - 12px);
 20 |        width: calc(60vw + 24px); 
 21 |     }
 22 | }
 23 | @media screen and (min-width: 1760px) {
 24 |     .Omnibar {
 25 |        left: calc(30vw - 12px);
 26 |        width: calc(40vw + 24px); 
 27 |     }
 28 | }
 29 | 
 30 | /* #omni */
 31 | #bar {
 32 |     background: _base;
 33 | 
 34 |     border-bottom: none;
 35 | }
 36 | 
 37 | #list {
 38 |     background: _base;
 39 | }
 40 | 
 41 | #input {
 42 |     background: _base;
 43 | 
 44 |     box-shadow: none;
 45 |     border-color: _highlightHigh;
 46 | }
 47 | 
 48 | body::after {
 49 |     border: none;
 50 | }
 51 | 
 52 | .item {
 53 |     border-bottom: none;
 54 |     padding-top: 0px;
 55 |     cursor: pointer;
 56 | 
 57 | 
 58 |     display: flex;
 59 |     align-items: center;
 60 |     justify-content: space-between;
 61 | }
 62 | 
 63 | .item.s,
 64 | .item:hover {
 65 |     background-color: _highlightHigh;
 66 | }
 67 | 
 68 | .top {
 69 |     color: _text;
 70 |     width: 30rem;
 71 | }
 72 | 
 73 | .bottom {
 74 |     width: 20rem;
 75 |     overflow: hidden;
 76 | }
 77 | 
 78 | .bottom>a {
 79 |     font-size: .7rem;
 80 | }
 81 | 
 82 | #toolbar {
 83 |     display: none;
 84 | }
 85 | 
 86 | /* #find */
 87 | 
 88 | .r.D {
 89 |     background: _base;
 90 |     color: _text;
 91 | }
 92 | 
 93 | .r {
 94 |     box-shadow: inset 0 0 1px 0.5px _iris;
 95 | }
 96 | 
 97 | /* #find:host */
 98 | 
 99 | 
100 | 
101 | /* #find:selection */
102 | ::selection {
103 |     background: #ea9d34 !important;
104 |     color: _text;
105 | }


--------------------------------------------------------------------------------