Skip to content

A Minimal, Cozy, Vertical Optimized Firefox Theme

License

Notifications You must be signed in to change notification settings

FacundoGimeno/Shina-Fox

This branch is 2 commits ahead of Shina-SG/Shina-Fox:main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
Jan 20, 2024
Jan 20, 2024
Jan 24, 2024
Jan 20, 2024
Jan 20, 2024
Apr 28, 2024

Repository files navigation

Shina Fox - Make Firefox a Cozy Home

Shina's Discord

Welcome to Shina Fox, a project that seeks to transform your Firefox experience into something homely and comfortable. At the moment, it primarily focuses on theme development. Enjoy!

Set-up Guide πŸ› οΈ

Step 1: Sidebery Configuration πŸ¦”
  • Firstly, install the Sidebery Addon.
  • Navigate to Sidebery's Settings βš™οΈ --> Navigation bar πŸ“
  • Turn off the Show navigation bar in one line option.
  • Proceed to Sidebery's Setting βš™οΈ --> Style editor 🎨
  • Finally, copy and paste the following CSS code snippet into the provided space:
#root.root {--tabs-font: 1rem Monospace;}
#root.root {--ctx-menu-font: 1rem Monospace;}
#root.root {--ctx-menu-min-width: 256px;}
#root.root {--ctx-menu-max-width: 9999px;}

/* unloaded tab title style */
.Tab[data-discarded="true"] .title {
    opacity: 80%;
}

/* adjustments */
#root.root {--tabs-indent: 16px;}
#root.root {--tabs-audio-btn-width: 32px;}
#root.root {--tabs-inner-gap: 4px;}

/*** hover effects ***/
#root:not(:hover) {
    --tabs-indent: 0px;
}
/* ident indicator ********************************************/
/* Settings > Tabs > Show marks to indicate tabs sub-tree levels > on */
.Tab .title {
    transition: margin-left 300ms ease;
}
.Tab:hover {
    --tabs-inner-gap: 8px;
}
.Tab:hover .title {
    margin-left: 8px;
}
Step 2: Firefox Configuration βš™οΈ
  • In the URL bar, enter about:config (Accept the Risk and Continue)
  • Adjust the configuration as per the following table:
Configuration Parameter πŸ› οΈ Required Setting πŸŽ›οΈ
toolkit.legacyUserProfileCustomizations.stylesheets true
widget.gtk.ignore-bogus-leave-notify 1
floorp.browser.user.interface (Only if you are using Floorp) 1
browser.newtabpage.activity-stream.floorp.newtab.backdrop.blur.disable (Only if you are using Floorp) true
Step 3: Theme Selection 🎨
  • In the URL bar, type about:addons
  • Navigate to the Theme section and select β€˜Dark’, β€˜Light’, or any other preferred theme. Ensure it is not the System theme - auto.
Step 4: File Installation πŸ—‚οΈ
  • Enter about:profiles in the URL bar
  • Identify your current profile and click on Open Directory in the Root Directory section
  • Create a chrome folder if one doesn't already exist
  • Download the latest version
  • Unzip the downloaded files and transfer them into the chrome folder

Restart Firefox to experience your new cozy haven! πŸ’“πŸŽ‰

Feature Breakdown 🌟

Feature Name 🌈 Preview πŸ“Έ
Adaptive Theme
MacOS Buttons
Highlight Border
Auto Hide Sidebery
Minimal Extension Menu
Enchanted URL Bar
Custom Icon
Hovering Bookmark

Upcoming Improvements:

Project Section Current Status
Theme Released
Extension In Progress
Config In Progress
Guide In Progress

Appreciation 🌟:

Whilst I am a newbie in the world of programming, I've been using codes and inspiration of the community. Please check out their incredible work:

Credits πŸ“
Firefox Mod Blur - datguypiko
Firefox-ONE - Godiesc
And more...

About

A Minimal, Cozy, Vertical Optimized Firefox Theme

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 100.0%