migueravila / simplefox Goto Github PK
View Code? Open in Web Editor NEW๐ฆ A Userstyle theme for Firefox minimalist and Keyboard centered.
License: GNU General Public License v3.0
๐ฆ A Userstyle theme for Firefox minimalist and Keyboard centered.
License: GNU General Public License v3.0
Hi, I love the theme (i use bento too !) so thanks.
I just figure out something a little annoying using the theme on ubuntu/gnome. There is a pointy corner showing (with a color problem too) as we can normally see here
The first windows is with SimplerentFox and the second one is default. I cannot figure out how to fix this by my own, how do you thinks is it easy to fix ?
please make it asap....
i noticed the scrollbar is hidden, and normally that's fine, but there are certain times i need the scrollbar when in private mode. is there a way to edit the CSS to hide it in normal browsing, but show it in private mode?
Hey! Thank you for sharing your awesome work! How can I get favicons back with userChrome_OneLine?
The compressed version of the userChrome with a url bar actually does not have a url bar, the uncompressed version does have one.
I only tested this for the Linux version.
SimplerentFox looks really great, I'll give it a try soon! However, for personal convenience, I would prefer a collapsible vertical tab bar, as it allows having more tabs visible without truncating them too much, plus it gains some vertical space.
There's an example on this video I put up lately to better illustrate what I have in mind (even though it's on a phone here, I use the same Firefox CSS on desktop, just don't have a video for it yet). Moving the tab bar to the side also frees some space vertically, and I also hid the address bar and title bar so that the content uses all available screen estate without going fullscreen.
This is based on the Tree Style Tabs addon, and I use the (messy with probably a few conflicts) CSS code at the bottom of this post, that is now partly broken after a recent Firefox update.
Do you think I could use use the same side bar feature and hide address and title bars using this approach in SimplerentFox, or do you foresee many conflicts?
In Tree Style Tabs options:
/* Desaturate favicons in inactive tab */
.tab:not(.active) .favicon {
filter: grayscale(1) brightness(0.7) contrast(1) invert(1);
}
/* Hide background of inactive tabs when tab bar is collapsed */
.tab:not(.active) {
border-left: 25px solid;
border-color: var(--theme-colors-frame);
}
/* Push tab labels slightly to the right so they're completely hidden in collapsed state */
tab-item .label {
margin-left: 15px;
font-size: 95%
}
/* Move favicons to the left */
.tab .favicon {
margin-left: -10px;
}
.tab.active .favicon {
margin-left: -7px !important;
}
/* Move .twisty to the right of favicons and adjust margins to reduce space on the left. */
tab-item .twisty {
margin-left: -4px;
margin-right: 0px;
left: 22px;
}
/* Background color of the empty tab bar */
:root,
#background {
background: var(--theme-colors-frame);
}
/* Show title of unread tabs with red and italic font */
.tab.unread .label {
color: #5294E2 !important;
font-style: italic !important;
}
/* Add private browsing indicator per tab */
.tab.private-browsing .label:before {
content: "๐ถ";
}
/* Hide border on tab bar, force its state to 'scroll', adjust margin-left for width of scrollbar. */
#tabbar {
border: 0; overflow-y: scroll !important; margin-left: -14px !important; scrollbar-width: auto;
}
/* Hide close buttons on tabs. */
tab-item .closebox {
visibility: collapse;
}
/* Hide sound playing/muted button. */
.sound-button::before {
display: none !important;
}
/* Hide new tab button and eliminate dead space on bottom */
.newtab-button-box {
display: none;
}
#tabbar {
bottom: 0 !important;
}
In userChrome.css:
/* FIX CONTEXT MENU DISAPPEARING IMMEDIATELY */
#contentAreaContextMenu {
margin: 5px 0 0 5px
}
/* HIDE TITLE BAR */
#titlebar {
visibility: collapse;
}
/* HIDE NATIVE TABS */
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
opacity: 0;
pointer-events: none;
}
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
visibility: collapse !important;
}
/* AUTO-HIDE URL-BAR AND SHOW ON HOVER (SWIPE FROM OUTSIDE TOP OF THE WINDOW) OR FOCUS WITH CTRL+L */
#nav-bar:not([customizing="true"]):not([inFullscreen]) {
min-height: 35px !important;
max-height: 102px !important;
margin-top: 2px !important;
margin-left: 28px !important;
margin-right: 12px !important;
margin-bottom: -85px !important;
border-top: 0px !important;
border-bottom: 50px solid transparent !important; /* This expands the hover area when the bar is visible */
background-clip: content-box; /* This together with border-bottom expands the hover area when the bar is visible */
/* Chose one of either options below
Option 2: not recommended because it makes the whole
invisible bar (+ its invisible border) hoverable, which may
prevent clicking on website buttons located on top
Option 1: does not cause this issue, but requires accurate hovering on the top
border of the Firefox window, or swiping from outside the window to expand the bar
/* Option 1 */
z-index: -5 !important;
/* Option 2 */
/*
opacity: 0;
z-index: 5 !important;
*/
}
#navigator-toolbox:hover:not([inFullscreen]) :-moz-any(#nav-bar),
#navigator-toolbox:focus-within :-moz-any(#nav-bar) {
margin-top: -17px !important;
border-top: 20px solid var(--toolbar-bgcolor) !important;
box-sizing: border-box !important;
z-index: 5 !important;
opacity: 1;
}
#urlbar {
border: 0 !important;
padding-left: 10px;
padding-right: 10px;
border-radius: 1px 1px 1px 1px !important;
background-color: #0000002d !important;
box-shadow: none !important;
text-align: center !important;
}
#navigator-toolbox {
--toolbar-bgcolor: rgba(0,0,0,.8);
--urlbar-separator-color: transparent;
--lwt-toolbarbutton-icon-fill: var(--theme-colors-icons);
--lwt-toolbar-field-background-color: transparent !important;
--lwt-toolbar-field-border-color: transparent !important;
--lwt-toolbar-field-focus: transparent !important;
--toolbar-field-focus-border-color: #77777773 !important;
}
/* Hide toolbar in fullscreen mode */
/*
#nav-bar[inFullscreen="true"] {
visibility: collapse;
}
*/
/* AUTOHIDE BOOKMARK BAR */
#PersonalToolbar {
--uc-bm-height: 20px; /* Might need to adjust if the toolbar has other buttons */
}
:root[uidensity="compact"] #PersonalToolbar {
--uc-bm-padding: 1px
}
:root[uidensity="touch"] #PersonalToolbar {
--uc-bm-padding: 6px
}
#PersonalToolbar:not([customizing="true"]):not([inFullscreen]) {
margin-bottom: calc(2px - var(--uc-bm-height) - 2 * var(--uc-bm-padding));
margin-left: 28px !important;
margin-right: 12px !important;
padding-top: 10px;
width: calc(100% - 40px);
top: 35px; /* Must be the same as the min-height of the URL/navbar */
display: block;
z-index: 5 !important;
opacity: 1;
}
#PlacesToolbarItems > .bookmark-item {
padding-block: var(--uc-bm-padding) !important;
color: var(--theme-colors-icons);
font-size: 80%;
font-family: monospace;
}
/* Select bookmark bar behavior */
/* Comment out either one of these to disable that behavior */
/* Show when urlbar is focused */
#nav-bar:focus-within + #PersonalToolbar {
position: absolute !important;
}
/* Show when cursor is over the toolbar area */
#navigator-toolbox:hover > #PersonalToolbar{
position: absolute !important;
}
/* REMOVE FAVICONS FROM BOOKMARK BAR */
.bookmark-item > .toolbarbutton-icon {
display: none !important;
}
#PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon[label]: {
margin-inline-end: 0px !important;
}
/* AUTOHIDE VERTICAL TAB BAR USING TREE STYLE TABS EXTENSION */
/* Hide splitter, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
display: none !important;
}
/* Hide sidebar header, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
visibility: collapse;
}
/* Shrink sidebar until hovered, when using Tree Style Tab. */
:root {
--thin-tab-width: 28px;
}
:root {
--wide-tab-width: 260px;
}
#sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) {
min-width: var(--wide-tab-width) !important;
max-width: none !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
overflow: hidden !important;
position: relative !important;
transition: all 200ms !important;
min-width: var(--thin-tab-width) !important;
max-width: var(--thin-tab-width) !important;
z-index: 1;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
transition: all 200ms !important;
min-width: var(--wide-tab-width) !important;
max-width: var(--wide-tab-width) !important;
margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
z-index: 1;
}
/* SHOW TAB FAVICONS IN GRAYSCALE EXCEPT FOR ACTIVE TAB */
#tab > .tab-icon, .tab-icon-image {
filter: grayscale(1) brightness(0.5) contrast(1) invert(1) !important; /* Remove invert(1) to make it dark */
}
/* ############################################################# */
/* CSS FOR TREE STYLE TABS TO PASTE IN THE EXTENSION PREFERENCES */
/* ############################################################# */
/* Desaturate favicons in inactive tab */
/*
.tab:not(.active) .favicon {
filter: grayscale(1) brightness(0.7) contrast(1) invert(1);
}
*/
/* Hide background of inactive tabs when tab bar is collapsed */
/*
.tab:not(.active) {
border-left: 25px solid;
border-color: var(--theme-colors-frame);
}
*/
/* Push tab labels slightly to the right so they're completely hidden in collapsed state */
/*
tab-item .label {
margin-left: 15px;
font-size: 95%
}
*/
/* Move favicons to the left */
/*
.tab .favicon {
margin-left: -10px;
}
.tab.active .favicon {
margin-left: -7px !important;
}
*/
/* Move .twisty to the right of favicons and adjust margins to reduce space on the left. */
/*
tab-item .twisty {
margin-left: -4px;
margin-right: 0px;
left: 22px;
}
*/
/* Background color of the empty tab bar */
/*
:root,
#background {
background: var(--theme-colors-frame);
}
*/
/* Show title of unread tabs with blue and italic font */
/*
.tab.unread .label {
color: #5294E2 !important;
font-style: italic !important;
}
*/
/* Add private browsing indicator per tab */
/*
.tab.private-browsing .label:before {
content: "๐ถ";
}
*/
/* Hide border on tab bar, force its state to 'scroll', adjust margin-left for width of scrollbar. */
/*
#tabbar {
border: 0; overflow-y: scroll !important; margin-left: -14px !important; scrollbar-width: auto;
}
*/
/* Hide close buttons on tabs. */
/*
tab-item .closebox {
visibility: collapse;
}
*/
/* Hide sound playing/muted button. */
/*
.sound-button::before {
display: none !important;
}
*/
/* Hide new tab button and eliminate dead space on bottom */
/*
.newtab-button-box {
display: none;
}
#tabbar {
bottom: 0 !important;
}
*/
As the title says, the userChrome for hiding the URL bar doesn't work. It's still visible beneath the tab bar. Using the oneliner userChrome for now which works great
The contents of the dropdown menu are somewhat unreadable.
I have blur windows enabled through picom but it does not seems to take an effect in here.
Is there a way to let your compositor handle the firefox composting?
If not then is it possible to modify the source to configure opacity and color of the drop down in address bar?
Can you share your homepage? thankshttps://raw.githubusercontent.com/migueravila/SimpleFox/master/assets/urlbar.png
There seems to be a 1px border on the tabs, my firefox version is Mozilla Firefox 113.0
- Arch Linux, see here the screenshot of it: https://imgur.com/a/eaMHic0
Firefox proton causes tab highlighting when you hover over tabs as well as a shadow on the tab that is active.
Could you make these the same color as the set primary color because it ruins the look right now.
Proton became default on nightly a day or two ago and I can still disable it but itll become a problem when firefox fully moves to proton and the option to disable it gets removed.
For example .tabbrowser-tabs
doesn't seem to exist (if it ever existed) in FF80 so it can be probably removed.
And this:
.tabbrowser-tab::before {
opacity: 0 !important;
border-left: none !important;
}
.tabbrowser-tab::after {
opacity: 0 !important;
border-left: none !important;
}
Can be simplified to this:
.tabbrowser-tab::before,
.tabbrowser-tab::after {
display: none !important;
}
There are few more potential improvements that I spotted but I don't have time to list them all.
The README inside linux folder mentions on step 6:
- Then paste the userChrome.css and the userContent.css files into the folder
But there is no userContent.css inside the folder. Is the file missing or is the README wrong?
I really love this theme but i also want to have the default buttons instead of using the keyboard.
Is there a way i can do this?
Like adding the back and forward button whre the refresh button is, add a new page button.
I followed all the instructions as given and did not modify any code. Still the URL bar is not hiding.
Hi, could you create a version for macOS? I've tried using the linux version, but it doesn't look how it should look - There's no transparency
Thanks
Hi !
I'm using your CSS for Firefox on Linux, and I'm loving it, great job !
I'm new to CSS, so I have just played around and trying stuff, the way you have made it makes it easy for a newbie, thnx for that ! ๐
I have one question thou, I would like the text/font of the focused tab to be another color than the rest and I can't figure it out. I have manged to get the whole active/focused tab to change color.
But I just want the text to change.
Is that doable, and if so, I would appreciate ideas and pointers ?
how can I use this theme on Firefox Developer Edition ???
Here's the issue I have encountered.
firefox --version
Mozilla Firefox 77.0.1
Turned off all settings on Firefox home content.
Placed all files on chrome directory inside the $HOME/.mozilla/firefox/XXXXXX/.default-release/
pwd
/home/[redacted]/.mozilla/firefox/bovgo6mh.default-release/chrome
ls
userChrome.css userChrome__withoutURLBar.css userContent.css
Followed all instructions on about:config of firefox
All userChrome files have a double _ in their names, expect the NoURLBar.comp version. It would be neat to rename these to have a double _
I wrote everything in the title actually, that's what I want to do. Can you help me? I am using the oneline version by the way.
As SimpleFox comes out-of-the-box it hides #PanelUI-button which completely breaks the "new addon installed" popup dialog similar to this one:
It will keep appearing and disappearing constantly very rapidly and follows you to any other Firefox window you may move your focus to until you restart Firefox entirely.
I'm seeing this on Nightly 104.0a1 (2022-07-14) but believe I already saw this on current stable version before as well.
As I personally prefer having access to the button anyway I ended up just applying the following:
--- a/chrome/userChrome.css
+++ b/chrome/userChrome.css
@@ -165,7 +167,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
#pageActionSeparator,
#tabs-newtab-button,
#back-button,
-#PanelUI-button,
+/*#PanelUI-button,*/
#forward-button,
.tab-secondary-label {
display: none !important;
P.S. Please add a trailing new-line to userChrome.css, thanks :)
--- a/chrome/userChrome.css
+++ b/chrome/userChrome.css
@@ -202,4 +206,4 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
#context_selectAllTabs,
#context_closeTabOptions {
display: none !important;
-}
\ No newline at end of file
+}
Title.
On librewolf, using containers, the titlebar need to be extended. I've looked into the userChrome.css, it's not intuitive for me.
Any help would be much appreciated.
Hey,
is it somehow possible to have the icons show on the tabs? Otherwise its kinda useless to have tabs anyway if you only have text imo.
No Url Bar and With url bar are swicheitched in the readme.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.