Replies: 25 comments 2 replies
-
|
Hi @Aris-t2 I have also checked real_compact_mode.css |
Beta Was this translation helpful? Give feedback.
-
|
How I wish mozilla would just leave the uI alone and concentrate on more important things but it's not in their nature sadly. For now I'm only seeing two issues: the bookmark toolbar on the bottom no longer autohides and the custom button icons (from the legacy custom button addon) are about as big as a breadcrumb while webextension icons remain the same. I don't mind them small but they could stand to be made a little bigger. For now, proton is disabled but at some point when the current layout is gone I'm sure you will have lots of requests from users like me wanting to get back to normal. |
Beta Was this translation helpful? Give feedback.
-
|
At some point I will release CSS code to undo (some of) the Proton UI changes. |
Beta Was this translation helpful? Give feedback.
-
Never mind, I forgot to set Sorry for posting this in the wrong place. |
Beta Was this translation helpful? Give feedback.
-
|
Of course it would be better, but this is not about improving Proton UI. |
Beta Was this translation helpful? Give feedback.
-
You're right of course. Thanks for your hard work! |
Beta Was this translation helpful? Give feedback.
-
|
@Aris-t2 Have you tried to get multi-row tabs working with Proton and these "compact mode" tweaks? |
Beta Was this translation helpful? Give feedback.
-
|
No I have not tested multi row tabs with protons compact mode. |
Beta Was this translation helpful? Give feedback.
-
How about multi-row tabs with vanilla, non-compact? Any intent tu update that part of the project? |
Beta Was this translation helpful? Give feedback.
-
|
Multiple tab lines should work using this code: https://github.com/Aris-t2/CustomCSSforFx/blob/master/proton/multiple_tab_lines.css (It is a minor modification of https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_multiple_lines_fx81.css) |
Beta Was this translation helpful? Give feedback.
-
Awesome, thanks! Two caveats, both regarding muted tabs:
|
Beta Was this translation helpful? Give feedback.
-
|
Not sure I can follow. Using the code, while not having current 'compact mode' active, is not intended, at least for now.
|
Beta Was this translation helpful? Give feedback.
-
As you can on the muted tab in that picture, the "muted" icon is covering the favicon of the site, which is bad UX. I personally keep all tabs muted by default and only unmute the ones i need, so this would be a complete no-go for me. Since Mozilla do not officially support "compact mode" anymore, I doubt they'll ever fix that, so can it be moved to the left of the close button, where it used to be? Unrelated: I think should account for--proton-tab-block-margin in order to be able to show the set --tabs-lines number of lines without showing the scrollbar.
|
Beta Was this translation helpful? Give feedback.
-
|
You can not move the icon out of the favicon box. This should hide the icon in general: .tab-icon-overlay{
display: none !important;
}And this only when muted. .tab-icon-overlay[muted="true"]{
display: none !important;
} |
Beta Was this translation helpful? Give feedback.
-
|
Hi Aris,
But there is one inconvienience.
TIA, |
Beta Was this translation helpful? Give feedback.
-
|
This is default browser behavior. You can override it using this code: /* always show 'close tab icon' */
.tabbrowser-tab:not([pinned="true"]) > .tab-stack > .tab-content > .tab-close-button:not([selected="true"]) {
display: initial !important;
} |
Beta Was this translation helpful? Give feedback.
-
|
Thanks a lot. :) Maybe I can try to ask for another little thing? Is it possible to distinguish somehow not_activ/not_hovered tabs each to other? Outline? Vertical separator? |
Beta Was this translation helpful? Give feedback.
-
.tabbrowser-tab:not(:hover) > .tab-stack > .tab-background:not([selected=true], [multiselected]) {
background-color: color-mix(in srgb, currentColor 11%, transparent);
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true], [multiselected]) {
background-color: color-mix(in srgb, currentColor 17%, transparent) !important;
} |
Beta Was this translation helpful? Give feedback.
-
|
Thanks again, Aris! |
Beta Was this translation helpful? Give feedback.
-
|
The Proton real-compact-mode is really compact ;). But customization is not able any more. So i created a simple proton compact mode focused on screen height and width in relation of tabtoolbar, tabs down below and simple borderless buttons for those who works with a lot of pinned tab and open tabs. Tested on Debian 10/11 | FF 91.0.1 | should work on all linux distributions - OSX and Windows not tested HowTo : https://speefak.spdns.de/oss_lifestyle/firefox-style-framework/ (german) TODO :
aris: i suggest to create a new css file : ./css/tabs/tabs_below_navigation_toolbar_compact.css and linked from userChrome line 326 => @import "./css/tabs/tabs_below_navigation_toolbar_compact.css"; /**/ |
Beta Was this translation helpful? Give feedback.
-
|
@Aris-t2 /* compact lines in bookmarks & history */
.sidebar-placesTree treechildren::-moz-tree-row {
min-height: unset !important;
height: 1.5em !important;
border-width: 1px !important;
}
/* popup_compact_menus.css lines 19-25*/
menupopup > menuitem,
menupopup > menu {
padding-block: 0 !important;
padding-inline-start: 4px !important;
min-height: unset !important;
height: 1.5em !important;
}
/*** Set custom colors for popup menu color variables ***/
/* thanks to jscher2000 & black7375*/
menupopup {
--menu-color: #000 !important;
--menu-disabled-color: color-mix(in srgb, var(--menu-color) 50%, transparent) !important;
--menu-background-color: #fff !important;
--menuitem-hover-background-color: #d4d4d4 !important;
}
Since ver 91 I have had problems with popup menus being black in themes where they previously they were white.
I tried using different color variables without luck. Did I miss something? I finally used some css to fix it. |
Beta Was this translation helpful? Give feedback.
-
|
I have #PlacesToolbar .bookmark-item :is(menu, menuitem) {
margin: 0 2px 0 4px !important;/* 2px left, 4px right */
min-height: 20px !important;
}I already had added this style which overrules some code from menupopup > :is(menu, menuitem) {
padding-block: 1px !important;/* 2px */
padding-inline-start: 0 !important;/* 4px */
}/* has an influence on symbol position */ |
Beta Was this translation helpful? Give feedback.
-
|
Too fast with sending … @Pizzapops could you try to fix your message above? The sentences
Are in the code block, but I am sure this was not your intention. (Forgot twice a backtick?) |
Beta Was this translation helpful? Give feedback.
-
|
I'm not sure as I did not face this issue yet. Does this also happen without any other code? I just posted a new file to fix the issues with Fx97+/ESR 91.6. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @Aris-t2 |
Beta Was this translation helpful? Give feedback.
-
|
There were some issue with recent updates regarding the location bar. Ty to replace the code for urlbar with this one (it was fixed for Fx 126+): |
Beta Was this translation helpful? Give feedback.
-
|
Everything works again! |
Beta Was this translation helpful? Give feedback.
-
Has anyone already tested "Proton" UI? Mozilla planned to remove "compact mode", but backed down.
After looking into what they call "compact" in Proton UI, I decided to run some tweaks and tests. The result was a "more compact mode". The code relies on latest Nightly builds and some
about:configpreferences:real_compact_mode.css
Besides code tweaks to change toolbar, tabs and app menu the "real compact mode" additionally uses CSS code from existing CustomCSSforFx settings: hiding megabar breakout, compact results and very classic results appearance (title+url).
Beta Was this translation helpful? Give feedback.
All reactions