Comments (4)
There's bit of compatibility problem with some of those, but firstly, reorder them such that:
window_control_placeholder_support.css
is loaded firstmulti-row_tabs_window_control_patch.css
is loaded aftermulti-row_tabs.css
That should make window control buttons show up in next to the main menu button like you wanted.
The compatibility problem then is between autohide_menubar.css
and multi-row_tabs_window_control_patch.css
. Both of these modify how menubar gets rendered and they're not going to work together - so umm I see two options:
- If you want autohide_menubar.css behavior then remove both
window_control_placeholder_support.css
andmulti-row_tabs_window_control_patch.css
- If you don't want that, then remove
autohide_menubar.css
I also updated multi-row_tabs_window_control_patch.css
just now, so make sure that grab that. I made it depend on window_control_placeholder_support
which should improve style and operating system compatibility a lot.
from firefox-csshacks.
Thank you for the reply. I've ordered the imports as advised but it seems the result is a bit unexpected.
Case 1
multi-row_tabs.css
& autohide_menubar.css
only.
@import url(chrome/multi-row_tabs.css);
@import url(chrome/autohide_menubar.css);
@import url(chrome/tab_close_button_always_on_hover.css);
@import url(chrome/tab_loading_progress_throbber.css);
@import url(chrome/button_effect_scale_onclick.css);
@import url(chrome/hide_toolbox_top_bottom_borders.css);
@import url(chrome/vertical_context_navigation.css);
@import url(chrome/minimal_popup_scrollbars.css);
@import url(chrome/dark_context_menus.css);
@import url(chrome/dark_additional_windows.css);
@import url(chrome/dark_checkboxes_and_radios.css);
@import url(chrome/urlbar_centered_text.css);
@import url(chrome/centered_statuspanel.css);
@import url(chrome/urlbar_popup_full_width.css);
@import url(chrome/compact_extensions_panel.css);
@import url(chrome/iconized_main_menu.css);
@import url(chrome/privatemode_indicator_as_menu_button.css);
@import url(chrome/minimal_in-UI_scrollbars.css);
@import url(chrome/loading_indicator_bouncing_line.css);
It looks good but the top area stills where the tabs are looks a bit underutilized. Are the window controls unmovable? If so then I guess this is the best solution for now.
Case 2
window_control_placeholder_support.css
, multi-row_tabs.css
, & multi-row_tabs_window_control_patch.css
respectively.
@import url(chrome/window_control_placeholder_support.css);
@import url(chrome/multi-row_tabs.css);
@import url(chrome/multi-row_tabs_window_control_patch.css);
@import url(chrome/tab_close_button_always_on_hover.css);
@import url(chrome/tab_loading_progress_throbber.css);
@import url(chrome/button_effect_scale_onclick.css);
@import url(chrome/hide_toolbox_top_bottom_borders.css);
@import url(chrome/vertical_context_navigation.css);
@import url(chrome/minimal_popup_scrollbars.css);
@import url(chrome/dark_context_menus.css);
@import url(chrome/dark_additional_windows.css);
@import url(chrome/dark_checkboxes_and_radios.css);
@import url(chrome/urlbar_centered_text.css);
@import url(chrome/centered_statuspanel.css);
@import url(chrome/urlbar_popup_full_width.css);
@import url(chrome/compact_extensions_panel.css);
@import url(chrome/iconized_main_menu.css);
@import url(chrome/privatemode_indicator_as_menu_button.css);
@import url(chrome/minimal_in-UI_scrollbars.css);
@import url(chrome/loading_indicator_bouncing_line.css);
Still has that white space on the right besides the extensions with the window controls still with the tabs. Not sure if this is expected.
Also, a row of tabs seems to always be missing with these three styles. You can see the tabs on the left using sideberry but they're not at the top. Window control is occupying the empty space which is nice. Usability suffers due to the top row of tabs not being visible. Thoughts?
I'm on commit fc7b95c which should be the latest master at the time of writing.
from firefox-csshacks.
Case 1 looks as if you have not actually enabled menubar in Firefox. You must do that for autohide_menubar.css to work as expected.
And actually same applies to case 2 as well. Both images look what I would expect if menubar is disabled by Firefox options.
You can enable menubar by right-clicking the toolbar area and checking menubar option, or you can do it via cuatomize mode.
from firefox-csshacks.
That explains it. Thank you so much. It's working as expected now.
from firefox-csshacks.
Related Issues (20)
- reduce padding in compact_extensions_panel.css HOT 15
- #Request: Show auto hidden bookmark and main toolbar on active tab click HOT 3
- window_control_force_linux_system_style.css odd hover behavior HOT 3
- button_effect_scale_onclick.css issue HOT 3
- How to use `vertical_tabs.css`? HOT 3
- autohide_toolbox causes toolbar and bookmarks bar to slow down / feels laggy HOT 2
- fake_tab_tooltip redundant in latest version HOT 1
- Show bookmarsk toolbar ONLY when hovering URL bar HOT 3
- overlay_fullscreen_toolbars.css do nothing for me :( HOT 8
- autohide_bookmarks_and_main_toolbars.css: is it possible to hide tabs too? HOT 1
- Firefox 126: --urlbar-toolbar-height replaced with --urlbar-container-height HOT 1
- Firefox 126 broke tabs on bottom again? HOT 4
- multi-row_tabs_below_content.css is above content and partially covered by urlbar HOT 1
- Did Firefox 126 break content/newtab_background_image.css? HOT 3
- View Image Context Menu adjustment HOT 1
- [Feature Request] Floorp support. HOT 2
- Tab reordering works with multi row tabs? HOT 2
- navbar_tabs_responsive_oneliner.css HOT 4
- Using iconized_main_menu.css with Firefox-Mod-Blur and Nightly results in black icons HOT 1
- move application menu button with hidden tab bar HOT 11
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from firefox-csshacks.