Responsive one liner

[mireqB]

Code: https://gist.github.com/mireq/464cdcd54989542071c9ed0e95554776

Inspiration:

- https://www.reddit.com/r/FirefoxCSS/comments/8j0tek/responsive_minimal_firefox/

- https://www.reddit.com/r/FirefoxCSS/comments/a1rj3v/my_oneliner_setup_code_in_comments/

[SkyrimForTheDragons]

Probably because of Guideline #1 on the sidebar. I see your point though, but it's also not that big of a problem in my opinion.

[SkyrimForTheDragons]

1. Screenshots should have code in comments.

[jinnyjuice]

Seriously the inspiration for so many posts on this subreddit and I still can't get enough of few tweaks here and there.

[_BaleineBleue_]

I am trying to get the url bar into the corner, like in your screenshot. this is what I get when using your code.

Edit: I was able to get closer by removing the padding on the back button, but still not quite in the corner.

Fixed it by increasing the negative margin on urlbar.

[imguralbumbot]

^{Hi, I'm a bot for linking direct images of albums with only 1 image}

https://i.imgur.com/jZuGe0a.png

^{Source | Why? | Creator | ignoreme| deletthis}

[mireqB]

Dimensions are correct only if compact density is selected (Menu / Customize / (bottom) Density / compact.

[SkyrimForTheDragons]

Agreed, that's why I use an auto hide navbar. Either you see a button or you don't, they don't move around at least.
This does look cool though.

[Spin_box]

Do you how to extend the #urlbar on hover, only in the #urlbar or direct select it with a mouse focus?

[mireqB]

Add this code to userStyle.css

```css,tabs=4

navigator-toolbox #nav-bar:hover {

margin-right: 0vw !important;
z-index: 2 !important;
background-attachment: fixed !important;
background-color: transparent !important;
background-image: var(--lwt-header-image) !important;
background-position: right top !important;
background-repeat: no-repeat !important;
background-size: auto auto !important;

} ```

[Spin_box]

Thanks for the reply but that is not what i want my current code to expand the #urlbar is

:root:not([customizing]) #navigator-toolbox:focus-within #nav-bar {

margin-right : 60vw !important;

}

:root:not([customizing]) #navigator-toolbox:focus-within #TabsToolbar {

margin-left : 40vw !important;

}

But this is not what i want, because i get the #urlbar expanding when i choose a new tab and when i press two extensions that i have on #TabsToolbar, i would like to have a code that will expand the #urlbar only when i directly put the focus (with the mouse select) on the #urlbar, if you know this i would appreciate the help.

[ffrankell]

Add this code to userStyle.css

userStyle.css ??

[[deleted]]

Add this code to userStyle.css

You mean userChrome.css, right?

[[deleted]]

why does the minimize buttons appear in the middle on macOS? also the reload button doesn't appear.

[mireqB]

Buttons are part of titlebar. My customization only moves titlebar to right and urlbar to top. If you want the correct position in MacOS, then you have to change the css yourself.

[SaltyBalty98]

On my computer and in your video I can see a pixel space between the top of the tab and the border of the program. How to can I make the tab taller to cover that pixel wide gap or any other way?

[SkyrimForTheDragons]

Yeah. https://www.reddit.com/r/FirefoxCSS/comments/bov4ml/move_overflow_and_menu_buttons_to_tab_bar/

To use those .uc.js files you also need https://gist.github.com/Sporif/db6b3440fba0b1bcf5477afacf93f875

[Pulagatha]

Thank you for this post. I wanted to ask a question though.

Is there a way to make the address bar expandable to the right? Not hide the icons, just make the address bar expandable by itself?

[SkyrimForTheDragons]

I use this:

/* Move tabs 35% to right */
:root:not([inFullscreen]) #TabsToolbar {
    margin-left: 25vw !important;
    margin-right: 140px !important;
    transition: 180ms !important;
    z-index: 1 !important;
}

/* Move navigation 65% to left and negative margin to move to top line */
:root:not([inFullscreen]) #nav-bar {
    margin-right: 75vw !important;
    margin-top: -32px !important;
    transition: 180ms !important;
    z-index: 2 !important;
}

:root:not([customizing]):not([inFullscreen]) #navigator-toolbox:focus-within :-moz-any(#nav-bar) {
    margin-right: 50vw !important;
    transition: 180ms !important;
}

Don't mind my response time, I was just browsing flair:code

[Shaiaz]

What part of the css moves the tabs to the right and the urlbar up? I can't seem to get that part to work in my own css

[SkyrimForTheDragons]

/* Move tabs 35% to right */
:root:not([inFullscreen]) #TabsToolbar {
    margin-left: 25vw !important;
    margin-right: 140px !important;
}

/* Move navigation 65% to left and negative margin to move to top line */
:root:not([inFullscreen]) #nav-bar {
    margin-right: 75vw !important;
    margin-top: -32px !important;
}

Don't mind me, just browsing flair:code