Arcline 🌌

How I customize my zen browser 🌸

🍋‍🟩 Arcline Browser Theme

A modern, minimalist browser theme inspired by organic architecture

🌶️ Stable Release Coming Soon!

CSS UPLOADED IS NOT OF STABLE RELEASE it is of beta , waiting for tab folders to get implemented on zen for stable release Please see bottom of readme for simple installation.

Stable Release Features

• URL-bar with custom scaling animations

urlbar.1.mp4

• ARC like tidy tabs with improved animations

Screen.Recording.2025-04-16.165730.mp4

• Pinned Extension also supports pinning of extensions like essentials may have width conflict with arch.four.essen preference

• Performance-optimized CSS animations
• platform consistency across Windows11
• Enhanced compatibility with Zen Browser v3.2+

Arc-h is a personal-grade theme for Zen browser that reimagines the browser interface with focus-preserving design principles.

This userChrome customization offers:
- Adaptive transparency effects
- Ergonomic spacing system
- Unified visual language
- Configurable accent colors

🛠️ Setup Instructions

1. Profile Preparation

• Works best on new profiles or profiles without conflicting CSS modifications
• Compatible with most content-blocking extensions

2. Window Control Alignment

• In about:config, set:
  zen.view.experimental-force-window-controls-left = true
  (requires browser restart)

3. Interface Optimization

1. Right-click tabs area → Customize Toolbar → Set Density to Touch
2. Enable Single Toolbar Mode in Zen Settings → Look & Feel
3. Set zen.theme.content-element-separation = 10 in about:config

4. Tab Groups Activation

• In about:config, set:
  browser.tabs.groups.enabled = true

5. Performance Considerations

• Hardware acceleration recommended for best animation performance
• URL bar animations automatically disable during media playback

6. Preferences

• In about:config , make these prefernces according to your wish
• arch.traffic.lights to get mac os like title bar button on windows
• arch.borders for adding a white border around the browser
• arch.urlbar.scale for adding scaling effect url bar search results
• arch.usable.blur.sidebar to add a psuedo background behind tabs section(navigator tool box) in compact mode to ensure blur , you will need to adjust width according to you system
• arch.four.essen for making essential always stay in 4x grid style
• arch.workspace.transition very initial stage and can cause lagging very resource intensive
• arch.workspace.buttons for making inactive workspace button into circles arc style has some limitions can only work for 3 workspaces and width of tabs section should be fixed accordingly

Tutorial of setting preferences

example.1.mp4

💿 Installation

1. Theme Installation

1. Follow Zen's Live Editing Guide to create chrome folder
2. Download latest release from Releases page
3. Extract these into your chrome folder:
- arc-h folder
- arc-h-config.css
- userChrome.css
- userContent.css
4. Restart browser and enable:
`browser.tabs.allow_transparent_browser = true` in about:config

2. Visual Enhancements (Windows 11)

1. Install MicaForEveryone
2. Add process rule for Zen with:
- Backdrop Type: Acrylic
- Enable "Blur Behind" in advanced settings

3. Optional Components

• Tacky Borders - Preconfigured rules included
• Zen Internet Extension - For page transparency

Simple Installation

1. Install latest version of Sine by following all prompted instructions.
2. Restart Zen Browser.
3. Open settings and go the the "Sine" tab.
4. Locate the local installation section.
5. Install ferrocyante/Arcline.
6. Restart Zen Browser.
7. Customize the settings to match your prefrences.
8. Enjoy!

🙏 Acknowledgments

Special thanks to Mr. Green, creator of the Natsumi Browser, for inspiring this project.

Credits & Resources

• Tab Group implementation: Advanced Tab Groups
• Design inspiration: Natsumi Browser
• Community contributions welcome via Issues and PRs