{"id":25241704,"url":"https://github.com/kaki87/phi-for-vivaldi","last_synced_at":"2025-10-27T08:03:09.341Z","repository":{"id":276897223,"uuid":"930642078","full_name":"KaKi87/phi-for-vivaldi","owner":"KaKi87","description":"φ The ultimate vertical experience mod for @Vivaldi, made with attention to details. | Mirror from Forgejo ; PRs only accepted on original repo \u0026 issues transferred to original repo","archived":false,"fork":false,"pushed_at":"2025-03-27T16:56:34.000Z","size":9770,"stargazers_count":53,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T17:25:33.133Z","etag":null,"topics":["arc-browser","browser","css","mod","theme","vertical-tabs","vivaldi","vivaldi-browser","vivaldi-css","vivaldi-mod","vivaldi-modification","vivaldi-theme","zen-browser"],"latest_commit_sha":null,"homepage":"https://git.kaki87.net/KaKi87/phi-for-vivaldi","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KaKi87.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-11T00:56:29.000Z","updated_at":"2025-03-27T16:56:37.000Z","dependencies_parsed_at":"2025-03-18T23:34:55.026Z","dependency_job_id":null,"html_url":"https://github.com/KaKi87/phi-for-vivaldi","commit_stats":null,"previous_names":["kaki87/phi-for-vivaldi"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaKi87%2Fphi-for-vivaldi","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaKi87%2Fphi-for-vivaldi/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaKi87%2Fphi-for-vivaldi/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaKi87%2Fphi-for-vivaldi/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KaKi87","download_url":"https://codeload.github.com/KaKi87/phi-for-vivaldi/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247395935,"owners_count":20932231,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["arc-browser","browser","css","mod","theme","vertical-tabs","vivaldi","vivaldi-browser","vivaldi-css","vivaldi-mod","vivaldi-modification","vivaldi-theme","zen-browser"],"created_at":"2025-02-11T21:14:42.178Z","updated_at":"2025-10-27T08:03:09.334Z","avatar_url":"https://github.com/KaKi87.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cimg src=\"./icons/phi.svg\" width=\"32\" height=\"32\"\u003e Phi (/faɪ/)\n\nThe ultimate vertical experience mod for Vivaldi, made with attention to details.\n\n| ![](./screenshots/1_linux.webp) | ![](./screenshots/2_mac.webp) | ![](./screenshots/3_windows.webp) |\n|---------------------------------|-------------------------------|-----------------------------------|\n\n## :sparkles: Features\n\n- Supported Vivaldi features : UI on left \u0026 right sides, theming from [themes.vivaldi.net](https://themes.vivaldi.net), toggle UI, panels, popups, split tabs ;\n- Enhanced Vivaldi features :\n  - Stacked tabs : displayed inline with titles ;\n  - Pinned tabs : displayed as icon-only grid ;\n- Unique Phi features :\n  - Address bar : expandable on focus, optional, enabled by default ;\n  - Compact mode : icon-only sidebar, implemented under the \"panel toggle\" command, keyboard shortcut assignable.\n\n## :camera_flash: More screenshots​\n\n| ![](./screenshots/4_address_bar_focus.gif)  | ![](./screenshots/5_stacked_tabs.gif)  | ![](./screenshots/6_pinned_stacked_tabs.gif) |\n|---------------------------------------------|----------------------------------------|----------------------------------------------|\n| **Address bar** expands on focus (optional) | **Stacked tabs** inline                | **Pinned tabs** icon-only                    |\n| ![](./screenshots/7_panels.gif)             | ![](./screenshots/8_right_side_UI.gif) | ![](./screenshots/9_themes.gif)              |\n| **Panels** at the bottom                    | **Right side UI** supported            | **Themes** supported                         |\n| ![](./screenshots/10_compact_mode.gif)      |                                        |                                              |\n| **Compact mode** as \"panel toggle\"          |                                        |                                              |\n\n## :gear: Installation ([video](https://www.youtube.com/watch?v=gt5pZEUbFbM))\n\n1. Create a folder to download the mod into ;\n2. Download the mod by right-clicking [here](https://git.kaki87.net/KaKi87/phi-for-vivaldi/raw/branch/master/phi.css) then \"Save Link As...\" to the folder created in step 1 ;\n3. Go to `vivaldi:experiments` and check \"Allow CSS modifications\" ;\n4. Open Vivaldi settings ;\n   - Under \"General\" ➔ \"Startup\" ➔ \"Default Browser\", uncheck \"Check on Startup\" ;\n   - (Optionally, recommended on Mac), under \"Appearance\" ➔ \"Window Appearance\", check \"Use Native Window\" ;\n   - Under \"Appearance\" ➔ \"Window Appearance\" ➔ \"Status Bar\", select \"Status Info Overlay\" or \"Hide Status Bar\" ;\n   - Under \"Appearance\" ➔ \"Custom UI Modifications\", open the folder created in step 1 ;\n   - Under \"Tabs\" ➔ \"Tabs\" ➔ \"Tab Bar Position\", select \"Left\" or \"Right\" ;\n   - Under \"Tabs\" ➔ \"Tab Display\" ➔ \"Tab Options\", uncheck \"Show Popup Thumbnails\" ;\n   - Under \"Tabs\" ➔ \"Tab Features\" ➔ \"Tab Stacking\", select \"Compact\" ;\n   - (Optionally) Under \"Panel\" ➔ \"Panel Position\", select \"Left\" or \"Right\" ;\n   - Under \"Panel\" ➔ \"Panels\" ➔ \"Panel Options\", check \"Floating Panel\" ;\n   - (Optionally) Under \"Address Bar\" ➔ \"Extension Visibility\", check \"Expand Hidden Extensions to Drop-Down Menu\" ;\n   - (Optionally) Under \"Keyboard\" ➔ \"View\" ➔ \"Panel Toggle\", set a shortcut for compact mode ;\n5. Quit and relaunch Vivaldi ;\n6. Start tweaking the UI ;\n   - Right-click in the blank above the URL bar then \"Customize Toolbar...\" ;\n   - Right-click the space items then \"Remove from Toolbar\" : left to the \"Back\" button, below the URL bar, below the panel buttons at the bottom ;\n   - Then add, move and remove whatever you want, before clicking \"Done\" ;\n7. (Optionally) Star the [GitHub repo](https://github.com/KaKi87/phi-for-vivaldi) ;\n8. Subscribe to Theo.\n\n##  :hammer_and_wrench: Customization\n\nWhile the mod aims to be compatible with as many native customization features as possible (especially sidebar position, side panel position \u0026 width, themes, etc.), some had to be moved (e.g. sidebar width), but more were also added, these are located in the file you downloaded, above the source code :\n\n| Name                                     | Description                                                                                       | Value(s)                                | Default         |\n|------------------------------------------|---------------------------------------------------------------------------------------------------|-----------------------------------------|-----------------|\n| `sidebar-width`                          | Amount of horizontal space for the area containing the whole UI.\u003csup\u003e(1)\u003c/sup\u003e                    | Any number (in pixels)                  | `210`           |\n| `compact-sidebar-width`                  | Amount of horizontal space for the area containing the whole UI in compact mode.\u003csup\u003e(1, 2)\u003c/sup\u003e | Any number (in pixels)                  | `50`            |\n| `is-phi-menu-icon`                       | Whether to show Phi's logo in place of Vivaldi's as menu button.                                  | `1` = enable\u003cbr\u003e`0` = disable           | `1`             |\n| `toolbar-column-count`                   | Number of toolbar buttons above the URL bar.\u003csup\u003e(3)\u003c/sup\u003e                                        | Any quantity                            | `5`             |\n| `address-bar-focused-width-increase`     | Enlarge the URL bar over the page content when focused.                                           | Any number (in pixels)\u003cbr\u003e`0` = disable | `200`           |\n| `address-bar-font-size-decrease`         | Lower the character size of the URL to see more of it.                                            | Any number (in pixels)\u003cbr\u003e`0` = disable | `1`             |\n| `is-address-bar-focused-height-increase` | Whether to enlarge the URL bar over the extensions row below it when focused.                     | `1` = enable\u003cbr\u003e`0` = disable           | `1`             |\n| `is-address-bar-unfocused-partial`       | Whether to hide \"unimportant\"\u003csup\u003e(4)\u003c/sup\u003e parts of the URL when the bar is not focused.         | `1` = enable\u003cbr\u003e`0` = disable           | `0`             |\n| `is-address-bar-unfocused-hide-icons`    | Whether to hide icons\u003csup\u003e(5)\u003c/sup\u003e in the URL bar when not focused to see more of the URL.       | `1` = enable\u003cbr\u003e`0` = disable           | `1`             |\n| `is-address-bar-focused-hide-icons`      | Whether to hide icons\u003csup\u003e(5)\u003c/sup\u003e in the URL bar when focused to see more of the URL.           | `1` = enable\u003cbr\u003e`0` = disable           | `0`             |\n| `pinned-column-count`                    | Number of pinned tabs per row.                                                                    | Any quantity                            | `4`             |\n| `webview-border`                         | Amount of space around the page content.\u003csup\u003e(6)\u003c/sup\u003e                                            | Any number (in pixels)\u003cbr\u003e`0` = disable | `0`             |\n| `webview-border-radius`                  | Round the corners of the page content.\u003csup\u003e(7)\u003c/sup\u003e                                              | Any quantity\u003cbr\u003e`0` = disable           | `0`             |\n| `webview-shadow-size`                    | Amount of shadow around the page content.\u003csup\u003e(8)\u003c/sup\u003e                                           | Any number (in pixels)\u003cbr\u003e`0` = disable | `0`             |\n| `webview-shadow-color`                   | Color of shadow around the page content.                                                          | Comma-separated RGBA values             | `0, 0, 0, 0.25` |\n\n\u003csup\u003e(1)\u003c/sup\u003e Unfortunately, the sidebar cannot be resized by drag-and-drop.\u003cbr\u003e\n\u003csup\u003e(2)\u003c/sup\u003e On Mac, recommended value is `90` when using non-native window controls on left side.\u003cbr\u003e\n\u003csup\u003e(3)\u003c/sup\u003e Unfortunately, the toolbar cannot have more than one row (unless hard-coded to do so, trust me I tried hard).\u003cbr\u003e\n\u003csup\u003e(4)\u003c/sup\u003e Path and query parameters.\u003cbr\u003e\n\u003csup\u003e(5)\u003c/sup\u003e Except the following indicators : (in)valid HTTP(S), obfuscated domain name, loading.\u003cbr\u003e\n\u003csup\u003e(6)\u003c/sup\u003e Reduces page content area. When enabled, recommended value is `10`. A lower value will reveal an unavoidable page content width inconsistency between normal \u0026 split tabs.\u003cbr\u003e\n\u003csup\u003e(7)\u003c/sup\u003e When enabled, recommended value is `5`.\u003cbr\u003e\n\u003csup\u003e(8)\u003c/sup\u003e To copy Zen Browser, set value to `10`.\n\nApplying modifications requires restarting Vivaldi.\n\n## :wrench: Troubleshooting\n\n- Double check Vivaldi settings as per installation step 4 ;\n- Find potentially incompatible settings by comparing with an empty profile ;\n- You may disable Phi by setting the tab bar position to top or bottom or toggling the tab bar off ;\n- Simultaneously using Phi with another CSS mod is not supported.\n\n##  :handshake: Feedback \u0026 Support\n\n- [Issues](https://git.kaki87.net/KaKi87/phi-for-vivaldi/issues)\n- [GitHub Issues](https://github.com/KaKi87/phi-for-vivaldi/issues)\n- [Discord](https://discord.gg/pdgQE6juqM)\n- [Reddit](https://old.reddit.com/r/vivaldibrowser/comments/1ieyt5a/)\n- [Vivaldi forum](https://forum.vivaldi.net/topic/105134/%CF%86-phi-the-ultimate-vertical-experience-theme-for-vivaldi-made-with-attention-to-details)\n\n## 🛜 Why \"Phi\" ?\n\nPhi (φ) is a greek letter, used (among other things) to designate angles, like (for example) [sextant](https://en.wikipedia.org/wiki/Sextant) (\u003ca href=\"https://en.wikipedia.org/wiki/Arc_(web_browser)\" target=\"_blank\"\u003e\u003cimg src=\"./icons/arc.svg\" width=\"32\" height=\"32\"\u003e\u003c/a\u003e) \u0026 [compass](https://en.wikipedia.org/wiki/Compass) (\u003ca href=\"https://en.wikipedia.org/wiki/Safari_(web_browser)\" target=\"_blank\"\u003e\u003cimg src=\"./icons/safari.svg\" width=\"32\" height=\"32\"\u003e\u003c/a\u003e) measurements for *navigation*.\n\n## :busts_in_silhouette: They use Phi\n\nAre you using Phi ? You're welcome to star the [GitHub repo](https://github.com/KaKi87/phi-for-vivaldi), submit your feedback with (optionally) a screenshot to showcase your setup here !\n\n\u003ctable\u003e\u003ctr\u003e\u003ctd\u003e\n\n![](./community_screenshots/Rohit685.webp)\n\u003c/td\u003e\u003ctd\u003e\n\n![](./community_screenshots/sohamsarkar1993.webp)\n\u003c/td\u003e\u003ctd\u003e\n\n![](./community_screenshots/MaxedPC08.webp)\n\u003c/td\u003e\u003ctd\u003e\n\n![](./community_screenshots/TwilightGarden.webp)\n\u003c/td\u003e\u003ctd\u003e\n\n![](./community_screenshots/furui1.webp)\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\n\n[@Rohit685](https://github.com/Rohit685) — Stargazer\n\u003c/td\u003e\u003ctd\u003e\n\n[@sohamsarkar1993](https://github.com/sohamsarkar1993) — Stargazer\n\u003c/td\u003e\u003ctd\u003e\n\n[@MaxedPC08](https://github.com/MaxedPC08) — Stargazer\n\u003c/td\u003e\u003ctd\u003e\n\n[@TwilightGarden](https://forum.vivaldi.net/post/848121) — Forum commenter\n\u003c/td\u003e\u003ctd\u003e\n\n[@furui1 / @NoProfilePicture](https://old.reddit.com/r/vivaldibrowser/comments/1n3v325/switched_to_vivaldi_so_far_its_been_great/) — Discord \u0026 Reddit community member\n\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\n[![](https://api.star-history.com/svg?repos=KaKi87/phi-for-vivaldi\u0026type=Timeline\u0026theme=dark)](https://github.com/KaKi87/phi-for-vivaldi)\n\n## :link: Related projects\n\n- [ImMainTheme/ArchyVivaldi](https://github.com/ImMainTheme/ArchyVivaldi)\n- [tovifun/VivalArc](https://github.com/tovifun/VivalArc)\n- [(Address Bar + Title Bar + Status Bar) = Docked to side | Vivaldi Forum](https://forum.vivaldi.net/topic/80588/address-bar-title-bar-status-bar-docked-to-side)\n- [HKayn/vivaldi-vh](https://github.com/HKayn/vivaldi-vh)\n\n## :technologist: Development notes\n\nGuide : [Customizing Vivaldi’s UI with CSS mods - gabevilela.vivaldi.net](https://gabevilela.vivaldi.net/2020/12/26/guide-customizing-vivaldis-ui-with-css-mods/)\n\nDevTools URL : `vivaldi://inspect/#apps`\n\nDOM structure :\n\n```\n#browser.linux.win.mac.minimal-ui.fullscreen.tabs-left.tabs-right\n├─ [aria-label=\"Address\"]\n│  ├─ .vivaldi\n│  ├─ .button-toolbar\n│  ├─ .UrlBar-AddressField\n│  └─ .toolbar-extensions\n├─ [aria-label=\"Panels\"]\n│  └─ .button-toolbar.button-toolbar-webpanel\n├─ .panel-group\n├─ [name=\"WorkspaceButton\"]\n├─ #tabs-container\n│  └─ .tab-strip\n│     ├─ .tab-position.is-pinned\n│     │  └─ .tab-wrapper.active.group\n│     │     ├─ .tab.pinned.active.tab-group\n│     │     │  └─ .tab-header\n│     │     │     ├─ .favicon\n│     │     │     ├─ .title\n│     │     │     └─ .close\n│     │     └─ .tab-group-indicator\n│     │        └── .tab-indicator.active\n│     ├─ .separator\n│     └─ .newtab\n└─ #webview-container\n```\n\n---\n\n© 2025 — KaKi87\u003cbr\u003e\nReleased under the [MIT license](https://opensource.org/license/mit).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaki87%2Fphi-for-vivaldi","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaki87%2Fphi-for-vivaldi","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaki87%2Fphi-for-vivaldi/lists"}