Aris-t2 commented 3 years ago

Make sure you have updated your configuration to the most recent version of this projects files and are using the latest version of the "options" required by your Firefox version >before< reporting problems!

Instead of opening new "issues" for general talk we can use this area for discussions, feedback and questions. Open new "issues" for real bugs and problems.

Custom JS scripts to restore more classic features https://github.com/Aris-t2/CustomJSforFx

Things this project will not target/recreate

a CTR like plugin/application to generate ready-to-use CSS
curved tabs (thanks those are finally gone!)
old complete themes

Things not possible with CSS

more toolbars like add-on/status bar (CSS can not create new toolbars)
- displaying full sized status popup below window content is possible
- bookmarks toolbar at windows bottom is possible (simulated addon-bar)
new buttons (CSS can not create new buttons)
additional menuitems (CSS can not create new items)
custom/new/different functions for buttons/menuitems/menus
activity indicator (see 'custom JS scripts')
preference/options window
additional location bar
favicon in location bars identity box (see 'custom JS scripts')
moving menubar items to a different toolbar
restart button (see 'custom JS scripts')
... many more

TW462 commented 3 years ago

Aris-t2 fixed the issue, somehow the system color check box got unchecked. I may have done it when I was looking on that page. Checked the box, and all is well.

Thanks for your input

Screen Shot 2021-08-11 at 6 52 53 PM

rebop commented 3 years ago

OK, Aris-t2. Down to 3.5 issues. two of them fairly broken. SO let me take one at a time please.

Unfortunately this did not do much for me:

box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset, 0 0 0 2px rgba(255,255,255,.1) inset, 0 0 0 1px rgba(0,0,0,.4) inset, 1px 1px 2px rgba(0, 0, 0, 0.15) !important;

So I shall forgo.

Seems a shame we cannot get closer to either of the old installs I have where these controls look so much better. You have seen my images above. At the least, coloring the white back button circle would be nice. BUT...this is now broken :(

No matter what I have tried, the back button is "lit" as if there are pages to go back to, even on a brand new tab. Every tab. Searched, tried, cannot fix that. Can you help please?

ibf

If I disable this: @import "./css/buttons/buttons_on_navbar_classic_appearance.css"; /**/ it works again, but I lose all I desire in classic appearance and the buttons look terrible.

Thanks.

rebop commented 3 years ago

And here is the .5 question :)

Any way to move the location of the dialog box for close tabs? Such an inconvenient place. Center screen would be so much better.

1close

I'll save the other two until we get the nav buttons working. Thanks again.

p1nkyy commented 3 years ago

@p1nkyy
1. Right-click on your main toolbar and select "Customize Toolbar".
   ![image](https://user-images.githubusercontent.com/6013569/129063459-81019afc-a320-4534-9a85-c8ac4c1e0770.png)
2-3. You are most likely using the wrong file. Switch from tabs_below_navigation_toolbar.css to tabs_below_navigation_toolbar_default_tabs.css

Hello, Customize Toolbar can't change the height of my tab. It's still too tall or too fat in my opinion 2nd solution fixed the overlap with Bookmarks toolbar, thank you, but there's still a gap between tabs and main browser content.

Also the font in my megabar/location bar seems to be smaller. Can it be restored?

https://puu.sh/I3gTb/62973ae39c.png

megabar

AndersOhrt commented 3 years ago

@Aris-t2 I managed to solve most of the issues with your help, thanks!

I enabled urlbar_restore_visible_border, and found an issue. When you give the urlbar the focus there is a short time when the border is white before switching to blue, making it look like it flickers. It's easiest to see if you hold down Ctrl-D.

I found this solution:

urlbar[focused="true"][suppress-focus-border] > #urlbar-input-container {

border: 1px solid var(--chrome-content-separator-color) !important; }

Aris-t2 commented 3 years ago

@EdwardKiefer To be honest I don't know what happened. During my tests before last update/change icons looked fine. Todays test confirms they are not.

This will be fixed on next update.

@re11ding This project offers an option for that too: top_toolbar_OS_accent_colors.css.

@rebop The main "problem" with back buttons color is the way back and forward buttons overlap. Back buttons color has to be solid or you would see the forward button behind it.

The "classic toolbar button" appearance offers transparent colors for buttons in general and lower opacity values for disabled buttons. This causes the issue mentioned above. Because of that custom_backforward_connected.css and custom_backforward_connected_to_location_bar.css have to offer solid colors for back button.

Reposition dialog box using this. (a value of 40-50 might be better in some cases)

#window-modal-dialog {
  margin-top: 50vh !important;
}

@p1nkyy The only thing controlling tab height atm. is browsers density setting in customizing mode.

You can reduce the gap between main content an tabs toolbar using code like this:

#tabs-newtab-button,
.tabbrowser-tab {
  margin-bottom: -3px !important;
  margin-top: 3px !important;
}

#PersonalToolbar {
  margin-bottom: -6px !important;
}

Keep in mind the new default tabs are floating, but only visually. Its a a trick by colorizing only some parts of the tab to create that effect.

Also the font in my megabar/location bar seems to be smaller. Can it be restored?

It is the default font size used by Firefox, but you can use a custom value inside general_variables.css. --results_font_size: var(--general_ui_font_size,10pt) !important; --> --results_font_size: 14pt !important;

@AndersOhrt Thanks. I will incorporate this into current urlbar_restore_visible_border.css file. There is one small tweak required for location bars bottom border do not appear, when the popup is visible.

EdwardKiefer commented 3 years ago

@Aris-t2

All good now with 4.0.2pre1 context menu icons height looks good :)

EdwardKiefer commented 3 years ago

Ok, here is something with the "Manage bookmarks" window, It is showing the top header and top options all white and you can't see the options (organize, view and import and backup) till you hover the mouse over. This is with OS with the dark theme, so FF is dark except here. OS win10 20h1, FF 91.0

DavyRay commented 3 years ago

@DavyRay Its hard to pinpoint what is causing this on your end. Try to a fresh version of your chromefolder with just the latest unmodified files of this project. Also make sure layout.css.devPixelsPerPx is set to -1.0 during your tests.

@Aris-t2 I downloaded a fresh version of the script which happened to be 4.01 pre.... renamed the original chrome folder and created a new one... dumped the new files to it and made no changes.. restarted FF... same issue. I thought perhaps it was my theme (light fox), but if i tried any other of the themes I have on FF, it made no difference.

I also went into about:config and layout.css.devPixelsPerPx was already set to -1.0

p1nkyy commented 3 years ago

@p1nkyy The only thing controlling tab height atm. is browsers density setting in customizing mode.

You can reduce the gap between main content an tabs toolbar using code like this:
#tabs-newtab-button,
.tabbrowser-tab {
  margin-bottom: -3px !important;
  margin-top: 3px !important;
}

#PersonalToolbar {
  margin-bottom: -6px !important;
}
Keep in mind the new default tabs are floating, but only visually. Its a a trick by colorizing only some parts of the tab to create that effect.

Also the font in my megabar/location bar seems to be smaller. Can it be restored?

It is the default font size used by Firefox, but you can use a custom value inside general_variables.css. --results_font_size: var(--general_ui_font_size,10pt) !important; --> --results_font_size: 14pt !important;

Hi, thanks for replying as usual. Sorry I didn't take a look clearly at the Customize Tab window. I've found the option and sadly it makes the Megabar smaller as well! >.< I saw screenshots where people have normal Megabar but smaller tabs. Perhaps the Megabar can be fixed by CSS? OK I've resigned to the fact about the floating tabs. Thank you again for always responding to us.

Aris-t2 commented 3 years ago

@EdwardKiefer The glitch on bookmarks/history/downloads is caused by general_toolbar_colors.css. toolbar:not(:-moz-lwtheme):not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar) has to be changed to #main-window toolbar:not(:-moz-lwtheme):not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar).

This will be fixed on next update.

@DavyRay Unfortunately I have no more ideas, what could cause this.

Try to setup "Portable Firefox", if you are using Windows and test 4.0.2pre1 there.

@p1nkyy

You can change tab height using this:

:root {
  --tab-min-height: 24px !important;
}

EdwardKiefer commented 3 years ago

@EdwardKiefer The glitch on bookmarks/history/downloads is caused by general_toolbar_colors.css. toolbar:not(:-moz-lwtheme):not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar) has to be changed to #main-window toolbar:not(:-moz-lwtheme):not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar).

This will be fixed on next update.
I edited that file as above and it does now show options correctly but the very top header (library -minimize- close) is still white but doesn't effect usage.
Almost looks like its not using dark OS theme.

Edit, I disable the "/* @import "./css/toolbars/general_toolbar_colors.css"; /**/ " and the above still happens so that top section is not the issue (maybe clean 91.0 does it). Edit2: yes w/o any userchrome.css files it still does it so that part is just FF-91.0

Pizzapops commented 3 years ago

@Aris-t2
I rebuilt my Chrome preferences using 4.0.1 and it is working in ESR91, Beta and Nightly. Thanks! I finally found that the findbar's match diacritics can be hidden in about:config by setting findbar.matchdiacritics to 3. I also discovered css for changing the new tab background color. An upgrade of a 2019 moz://a help posting.

/*CHANGE NEW TAB BACKGROUND COLOUR*/

@-moz-document url-prefix(about:newtab), url-prefix(about:blank), url-prefix(about:home) {
body { background-image: linear-gradient(to right, #D8D8D8, #A4ADB6 ,#D8D8D8 ) !important; }
}
.browserContainer {
background-image: linear-gradient(to right, #D8D8D8, #A4ADB6 , #D8D8D8) !important;
}`

Can the (disabled) text in about:addons extensions and themes hidden? FxP93

rebop commented 3 years ago

Thanks @Aris-t2 . I am now updating (again!!!) to 4.01. So much work to update every day or so :) And also will move to FF 91 portable. So test ting to do.

But you said:

"@rebop The main "problem" with back buttons color is the way back and forward buttons overlap. Back buttons color has to be solid or you would see the forward button behind it.

The "classic toolbar button" appearance offers transparent colors for buttons in general and lower opacity values for disabled buttons. This causes the issue mentioned above. Because of that custom_backforward_connected.css and custom_backforward_connected_to_location_bar.css have to offer solid colors for back button.

Reposition dialog box using this. (a value of 40-50 might be better in some cases)

window-modal-dialog {

margin-top: 50vh !important; } " Bu two issues here. Never before was it colored like it is now with white back button. And never before bold as lit when no page to go back to. Have to solve this.

Perhaps putting the images here will help?

BAD today: 4 0 back button

Great previously:

bf2

BF1

Thanks. Will finish 4.01 and 91 and be back. Will try the modal. Thanks much for that!

rebop commented 3 years ago

Moving the modal messages worked fabulously well. Thank you.

And one more comment, though will test again later, this: @import "./css/buttons/buttons_on_navbar_classic_appearance.css"; /**/ is what breaks the back button so it always shows as active. But I do not want to lose the classic appearance.

Back perhaps tonight. Thanks.

Achille-Grs commented 3 years ago

Hi @Aris-t2 and thanks for your perfect work on CSS for Proton!
• Firefox 91 - CSS v4.0.1 - 4.0.2pre2 • I thing I found a strange bug or something missing in the code (I'm not sure) for all the new css files about "Tabs". The default height for tabs is 26px and I changed to 30px. As you can see the 1st pic, the mouse pointer is hovering the tab and clicking it works fine. In the 2nd pic, when I moved the pointer above the label, hover and clicking doesn't work. So, it's like a missing some layer. Is there a fix for that? Thank you very much! Στιγμιότυπο οθόνης (14)

Speravir commented 3 years ago

(Disabled theme is selected, so that it is visually displayed in about:addons page.)

@Pizzapops

Can the (disabled) text in about:addons extensions and themes hidden?

Not with CSS, but should be possible with Javascript (I am not able to provide such code). For unselected state there is a setting in addons_manager_alternative_appearance.css that sets the text colour to grey.

But @Aris-t2: It could be more kind of grey (probably better something like dimgrey) here, too:

addon-card[expanded] .addon-name[data-l10n-id="addon-name-disabled"] {
    color: dimgray !important;
}

BTW just as remark: I’ve read in addons_manager_alternative_appearance.css something like “workaround for …”. Maybe these are not necessary anymore, or the comment should be removed?

Speravir commented 3 years ago

On updating with Fx 91 to v.4 (actually 4.0.1) I’ve accidentally activated addonlists_show_buttons_instead_of_menu_popup_compact_view.css for about:addons (I intended to use the “not that compact” variant). But this leads to these glitches (addonlists_compact.css is active, as well):

In addon list popup after pressing on the ellipse …
In list for available updates (perhaps only for people who have disabled automatic updates) there is an additional blue point visible above the ellipse:
After click on the ellipse it looks like this: Note the blue point, again. The grey line is caused by the cursor.

I did not check, how it looks with the even more compact setting, i.e. addonlists_show_buttons_instead_of_menu_popup_more_compact_view.css.

Addition:
Having only addonlists_compact.css activated the themes section is displayed compact as certainly intended, but after activation of addonlists_show_buttons_instead_of_menu_popup.css the display is not compact anymore, the space for the images is reserved, but they still are not visible, so there is a lot of white space.

nollinvoyd commented 3 years ago

Just upgraded from Fx 90.02

firefox 90

to Fx 91

firefox 91

Pinned tabs need horizontal height adjustment, close button needs resizing, eliminate space between tabs

My current tab related myuserchrom.css

/* close icon */
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-close-button {
  -moz-box-ordinal-group: 0 !important;
  -moz-margin-start: -9px !important;
  -moz-margin-end: 0px !important;
}

#main-window #navigator-toolbox #TabsToolbar .close-icon > .toolbarbutton-icon,
#main-window #navigator-toolbox #TabsToolbar .tab-content .close-icon  {
  min-width: 20px !important;
  width: 20px !important;
  min-height: 20px !important;
  height: 20px !important;
}

/* Tab numbers on tabs / Tabs numbers in 'all tabs' popup */ 
#tabbrowser-tabs,
#alltabs-popup, /*Fx60-61 */
#allTabsMenu-allTabsViewTabs { /*Fx62+ */ 
  counter-reset: n_tabs 0; 
}
.tabbrowser-tab .tab-content {
  -moz-padding-start: 0px; 
} 
.tabbrowser-tab .tab-content::before,
.alltabs-item::before, /*Fx60-61 */
.all-tabs-button::before { /*Fx62+ */
  display: -moz-box; 
  -moz-padding-end: 8px; 
  counter-increment: n_tabs; 
  content: counter(n_tabs); 
  font-weight: bold !important; 
  font-size: 14px !important; 
  margin-top: -2px !important; 
}
/* fix tab toolbars button width/height for default tabs */

#navigator-toolbox #TabsToolbar .scrollbutton-up,
#navigator-toolbox #TabsToolbar .scrollbutton-down,
#navigator-toolbox #TabsToolbar #alltabs-button,
#navigator-toolbox #TabsToolbar #new-tab-button {
  padding: 0px !important;
}

#navigator-toolbox #TabsToolbar .scrollbutton-up > .toolbarbutton-icon,
#navigator-toolbox #TabsToolbar .scrollbutton-down > .toolbarbutton-icon,
#navigator-toolbox #TabsToolbar #alltabs-button > .toolbarbutton-icon,
#navigator-toolbox #TabsToolbar #new-tab-button > .toolbarbutton-icon,
#navigator-toolbox #TabsToolbar .tabs-newtab-button > .toolbarbutton-icon {
  padding: 0px !important;
  width: 16px !important;
  height: 16px !important;
}

/* hide empty space before and after tabs */
hbox[type="pre-tabs"],
hbox[type="post-tabs"] {
  min-width: 1px !important;
  width: 1px !important;
  max-width: 1px !important;
  opacity: 0 !important;
}

#main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive="true"],
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] {
  margin-top: unset !important;
}

#main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar:not(:-moz-lwtheme),
#main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar {
  -moz-margin-end: 1px !important;
  -moz-appearance: none !important;  
  background: transparent !important;
  border-top: unset !important;
}

#main-window[sizemode="normal"] #navigator-toolbox #nav-bar {
  border-left: 0px !important;
  border-right: 0px !important;
}

#main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar #nav-bar-customization-target {
  -moz-padding-start: 50px !important;
}

/* selected tab text color ****************************/
/* text color */
.tabbrowser-tab[selected] .tab-label {
  color: red !important;
}

p1nkyy commented 3 years ago

@p1nkyy

You can change tab height using this:
:root {
  --tab-min-height: 24px !important;
}
Thanks, where should I put this code? In general variables?

rebop commented 3 years ago

HI @Aris-t2 The back button :) Boy did I work on this! Not perfect, but so much improved:

1newbf

Used these changes:

#main-window #nav-bar #back-button > .toolbarbutton-icon {
  width: 100% !important;
  height: 100% !important;
  border-radius: 10000px !important;
  padding: 8px !important; 
  /*background-color: #f9f9fa !important;*/
}

#nav-bar toolbarbutton[disabled=true] > .toolbarbutton-icon {
  opacity: .6 !important;
}

#nav-bar toolbarbutton[disabled=true]{
  opacity: .6 !important;
}

Now this is actually the best this has ever been:

1bestbf

If there is anything you could suggest to get closer to that desired effect, I'd really appreciate it. But at least I have something that works right now.

I have two more issues. One important to solve, one an aesthetic issue. Will post both in the morning. Too tired right now. Thanks!

Aris-t2 commented 3 years ago

@EdwardKiefer

Looks like this for me: 13212

@rebop Good to hear you found an acceptable solution. For me your code creates a minor issue. It is not possible to override a solid background color with a transparent one.

In previous Firefox/Waterfox builds the connection was achieved differently, but we have to work with what we have now.

Next update will optimize the usage of custom icons with connected "back/forward" buttons.

If there is anything you could suggest to get closer to that desired effect, I'd really appreciate it. But at least I have something that works right now.

You could try to replace the image used by e.g. custom_backforward_small_ff3_strata.css with an own one using bf_ff3_strata.png file as base. I have not tested this, but it might lead somewhere.

@Achille-Grs Testet 30px for --classic_squared_tabs_tab_height in general_variables.css and I can not reproduce your issue. Can anyone reproduce this bug?

@Pizzapops Unfortunately the "disabled" can not be removed. It is part of the full name/label:

@Speravir Thanks for pointing this out. Looks like I have missed to add @import "./addonlists_show_buttons_instead_of_menu_popup.css"; to addonlists_show_buttons_instead_of_menu_popup_compact_view.css and addonlists_show_buttons_instead_of_menu_popup_more_compact_view.css files in the 4.0.0preX cleanup.

This will be fixed on next update.

@nollinvoyd Your code works fine with default setup and with tabs below navigation toolbar for me. Make sure you are using the latest (pre) files.

(Fx91)

I suggest to ditch close-icon width/height code or the icon will look too blurry.

@p1nkyy It will work in general_variables.css, userChrome.css and my_userChrome.css.

EdwardKiefer commented 3 years ago

@Aris-t2 Yeah, for me that blue title header is white for some reason, I even used your whole default files, thinking it was an option I changed. Anyway no biggy it is very minor thing. It does it w/o any css so it is something with window themes.

Edit: I fixed it needed to enable last two options in window settings color page.

"Testet 30px for --classic_squared_tabs_tab_height in general_variables.css and I can not reproduce your issue. Can anyone reproduce this bug?"

I have mine set to 30 in general_varibles.css, all working fine.

/ custom height for 'classic squared tabs' only / --classic_squared_tabs_tab_height: 30px !important;

silverwings15 commented 3 years ago

does anybody know how to get the findbar to hide itself when it loses focus? i've been using the following with my floating findbar but it hasn't worked since v89 or so


/* Findbar disappears when unfocused */
findbar:not(:focus-within) {
  height: 0 !important;
  overflow: hidden !important;
  transition: height 0.0s ease 0s !important;
}

Achille-Grs commented 3 years ago

@Aris-t2 I found a fix for this strange bug in background of the tabs. The problem was in the file "tabs_below_navigation_toolbar.css" and I just add this line: • z-index: 2; • in your code below.

TabsToolbar {

position: absolute; display: block; bottom: 0; width: 100vw; background-clip: padding-box; color: var(--toolbar-color); z-index: 2; }

Everything it's fine now! Thank you!

glennpc commented 3 years ago

How do I change the findbar background color to white in the "Find in page" field and the check boxes the way it used to be on fx90? I'm showing an example on how it looks now on fx92 beta below.

Findbar

Aris-t2 commented 3 years ago

@mimecry

I'm surprised there even was a way to achieve this. The findbar node does not offer any attributes to work with.

@Achille-Grs Thanks.

@glennpc

input.findbar-textbox {
  background: white !important;
  color: black !important;
}

Checkboxes and radio buttons are now like this. There are no options or tweaks inside this projects files to change them.

glennpc commented 3 years ago

@Aris-t2

Thanks for the quick reply! At least the text box is now white again.

silverwings15 commented 3 years ago

@Aris-t2 thank you for the info. would it then be feasible to achieve the intended effect via JS instead?

drewjc75 commented 3 years ago

I am pulling out my hair trying to figure this out.

My Fx client updated itself today and ruined my custom settings, so I spent the better part of the morning looking here and updating using the 4.0.2pre3 file you recently uploaded. The ONE thing I can't figure out how to do is, when using the Dark theme:

Untitled-1

All I want to do is swap the colors on the tab bar so that the active tab is the lighter color and the unselected tabs are darker. That's it. But I cannot for the life of me figure out what controls them in the dark theme. No matter what I try to edit in the browser inspector, nothing changes them. I would have thought it was located here in the custom_tab_color_settings.css file

But changing those doesn't affect anything either. Is there something really simple I'm missing here or what?

EdwardKiefer commented 3 years ago

drew7579

This option is changing FF default tab colors, dark mode. @import "./css/tabs/classic_squared_tabs.css"; /**/ If you turn this off you will get dark unloaded/light loaded tabs. read the lines in css below that swtch to custom color. It says

/ TABS - appearance and position "/ custom tab colors are set inside color_variables*.css file(s) ****/"

Hope that points you in the right direction.

drewjc75 commented 3 years ago

/ TABS - appearance and position "/ custom tab colors are set inside color_variables*.css file(s) ****/"

So I did look in there and modifying the color_variables.css file didn't change anything either. However, it just goes to show that I'm dumber than I thought, because I was looking through the userChrome.css file one more time to see what other files I could be missing and it turns out that this section

/* TAB BACKGROUND COLORS for default/active/hovered/unloaded tabs and 'new tab' tab *************/
/* edit target file to set own custom colors ****************************************************/
@import "./config/custom_tab_color_settings.css"; /**/
/* TAB TEXT colors/shadow/weight/style for default/active/hovered/unloaded tabs *****************/
/* edit target file to set own custom colors ****************************************************/
/* @import "./config/custom_tab_text_settings.css"; /**/

was still commented out.

So here I was making modifications to a file that was never being imported. Talk about hours wasted on the most idiotic of mistakes.

EdwardKiefer commented 3 years ago

I was about to edit my post and add that custom_tab_color_settings line, great you figured it out. It can get a little confusing following all linked files.

rebop commented 3 years ago

@Aris-t2 you said:

"You could try to replace the image used by e.g. custom_backforward_small_ff3_strata.css with an own one using bf_ff3_strata.png file as base. I have not tested this, but it might lead somewhere."

Unsure what image you suggest replacing it with?

OK last two issues:

In all previous versions, hovering a bookmark in the bookmark bar, which I have to the right of the menus, was transparent and accentuated the border so I new what I was over. The same with the zoom level in the location bar. Now they are all a medium gray. Where can I edit that to be transparent fill?

Let me know if you need screen shots for that.

In previous versions I set minimum tab width to 85 and max to 135. Open one tab it is at 135. Keep opening tabs and when they fill the tab bar, they start shrink to no less than the min.

NOW, the open at minimum and never change no matter how many. There are so many** places to edit that including tab maxwidth, about:config, generalui - maybe more that I am lost and may have screwed it up worse. How can I fix please?

Screenshots if needed, of course.

And thanks!

rebop commented 3 years ago

Disregard 2 above. Sometimes the minute I post I think of the solution :)

But I do see the ALl Tabs dialog needs padding now. Forgot where that was.....hmmm?

rebop commented 3 years ago

OK, fixed the All Tabs padding :)

And aris-t2, just fyi I do not have the transparent button issue. Maybe its my theme and I am lucky, but doesn't look like it is an issue. I do wish the borders on the BF buttons were a tad darker. Maybe even shadowed.

1fp

So, just the bookmark and zoom highlights for now and I can then try ff91 and hope nothing breaks.

Thanks.

Aris-t2 commented 3 years ago

@drew7579

Open color_variables.css and look for these values to change tab colors for lw-themes:

  --classic_squared_tabs_lwt-dark_active_tab: inherit !important; /* linear-gradient(blue, hsla(0,0%,60%,.5) 80%) */
  --classic_squared_tabs_lwt-dark_hovered_tabs: linear-gradient(hsla(0,0%,80%,.5), hsla(0,0%,60%,.5) 80%) !important;
  --classic_squared_tabs_lwt-dark_other_tabs: linear-gradient(hsla(0,0%,60%,.5), hsla(0,0%,45%,.5) 80%) !important;
  --classic_squared_tabs_lwt-bright_hovered_tabs: linear-gradient(hsla(0,0%,60%,.6), hsla(0,0%,45%,.6) 80%) !important;
  --classic_squared_tabs_lwt-bright_other_tabs: linear-gradient(hsla(0,0%,40%,.6), hsla(0,0%,30%,.6) 80%) !important;
  --classic_squared_tabs_lwt-bright_active_tab: inherit !important; /* linear-gradient(blue, hsla(0,0%,60%,.5) 80%) */

@rebop Yes, please always post screenshots of the issue you describe.

Bookmarks look like this in default setup:

Are you talking about the "grey" color seen on above's screenshots?

Edit buttons_on_navbar_classic_appearance.css and change border colors there.

The other possible solution I suggested is based on images like used by custom_backforward_large_ff3_strata.css. bf_ff3_strata

If you mange to photoshop your back/forward into the areas of that image, you might get a decent result. (I have not tested this yet.)

Aris-t2 commented 3 years ago

I will add a new option to change the appearance of items in panels and popup menus. Based on that you can create own colors for those items.

Just noticed, there already is an option for that ;-)

popup_items_hover_appearance_aero.css

m4n8tpr4 commented 3 years ago

After the FF91 update today messed up everything, I updated to Custom CSS v4.0.2pre1 both on my desktop & my notebook. Both machines run Windows 10 and have FullHD displays. I copied the entire chrome library so the Custom CSS settings are exactly the same. Yet, the toolbar button margins & paddings look very different:

FFtopdesktop FFtopnotebook

What could be the reason? Maybe some about:config setting?

One further issue: is there a way to reduce the line spacing in menubar dropdown menus? Also, eliminate the empty space left of the items that appeared in some of the dropdown menus, including View (as in the example below)?

FFtopdropdown

Aris-t2 commented 3 years ago

@m4n8tpr4

Make sure you make a clean setup of this projects latest files (4.0.2).

Most likely some custom code corrupts the icons on your end.

To reduce menuitem spaces you have to enable popup_compact_menus.css.

Roadfox-Master commented 3 years ago

Is a way to change in context menu the distances? contextmenue

m4n8tpr4 commented 3 years ago

@m4n8tpr4

Make sure you make a clean setup of this projects latest files (4.0.2).

Most likely some custom code corrupts the icons on your end.

To reduce menuitem spaces you have to enable popup_compact_menus.css.

Thanks, popup_compact_menus solved the spacing issue!

As for the button corruption, I had a clean setup of v4.0.2pre on the desktop and, after customizing the settings, copied the entire chrome folder and copied it to the respective folder on my notebook. I'll try to repeat this with v.4.0.2 and report back.

Achille-Grs commented 3 years ago

@Aris-t2 Hi again! :-) Can we change the hover color in top bar menu items? Στιγμιότυπο οθόνης (15) Thank you!

Aris-t2 commented 3 years ago

@Roadfox-Master Test without custom code.

The code you are using to recreate the "old" popup menu appearance is not compatible with this projects files. If you want to play with the values used by this project, modify this file: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/generalui/context_bfrsb_labels_with_icons.css

@Achille-Grs

#main-menubar > menu:hover {
  background: red !important;
}

Roadfox-Master commented 3 years ago

Thank you. I've set in context_bfrsb_labels_with_icons.css : #context-navigation:not([hidden]) { display: flex; flex-direction: column !important; --menuitem-min-width: unset !important; min-width: unset !important; padding-bottom: 6px !important; (from 0 to 6)

#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { width: 24px !important; (from 16 to 24) height: 10px !important; (from 16 to 10) padding: 0px !important; margin-top: 7px !important; margin-bottom: 7px !important; margin-inline-start: 12px !important; margin-inline-end: 8px !important; Well, I can live with the look now.

rebop commented 3 years ago

@Aris-t2 You said:

Are you talking about the "grey" color seen on above's screenshots?

Edit buttons_on_navbar_classic_appearance.css and change border colors there.

Tough to capture as requires hover. I think the bookmark "button" issue is related to here on the zoom which I can capture:

Desired:

Not desired:

Captured the bookmark buttons: Here is desired and now. Would like to lose the shadow.

1button

2button

Thanks, as always. Next after this is seeing what changes with 91.

m4n8tpr4 commented 3 years ago

@m4n8tpr4 Make sure you make a clean setup of this projects latest files (4.0.2). Most likely some custom code corrupts the icons on your end. To reduce menuitem spaces you have to enable popup_compact_menus.css.

Thanks, popup_compact_menus solved the spacing issue!

As for the button corruption, I had a clean setup of v4.0.2pre on the desktop and, after customizing the settings, copied the entire chrome folder and copied it to the respective folder on my notebook. I'll try to repeat this with v.4.0.2 and report back.

Okay, I solved it. I did the v4.0.2 clean re-install on my notebook, and manually edited all of my dozens of customizations, but that didn't change a thing. Then I tried a lot of things, one of which worked: I right-clicked on the toolbar, chose Customize toolbar, then at the bottom, pulled down the "Density" drop-down menu, where I found I was set to "Normal" but there was a "Compact (unsupported")" choice.

This was weird because I looked at this before the v4.0.2 install, and I'm pretty sure the "Compact" choice wasn't there, the drop-down menu only had two choices. I found this is influenced by the browser.compactmode.show setting. The part I don't get is how I could have changed that setting (unpacking the Custom CSS install package does nothing to about:config settings, or does it?)

Maybe for future reference to other n00bs like me, you could add a note about browser.compactmode.show in buttons_on_navbar_more_compact_mode.css and its activation line in userChrome.css.

Speravir commented 3 years ago

Aris, I do not use a dark theme, so I always forget about this: Wouldn’t it be good to add a dark theme alternative for these color settings with lighter grey tones in addons_manager_alternative_appearance.css or this is not necessary?

/* reduce opacity for disabled add-ons */
section[section="1"] addon-card:not([expanded]) > .addon.card:not([active="false"]),
/* left out  some selectors */
addon-card:not([expanded]) > .addon.card[active="false"]:hover {
  color: grey !important;
  transition: unset !important;
}
/* … */
addon-card[expanded] .addon-name[data-l10n-id="addon-name-disabled"] {
  color: dimgray !important;
}

Aris-t2 commented 3 years ago

@rebop

#urlbar-zoom-button {
  background: unset !important;
}

#PlacesToolbarItems > .bookmark-item {
  border: 1px solid transparent !important;
}

#PlacesToolbarItems > .bookmark-item:not([disabled=true], [checked], [open], :active):hover,
#PlacesToolbarItems > .bookmark-item:not([disabled=true]):is([open],[checked],:hover:active) {
  appearance: none !important;
  background-color: unset !important;
  border: 1px solid lightgrey !important;
}

@Speravir Sounds like a good idea.

rebop commented 3 years ago

@aris-t2 Zoom is great, the buttons "almost" no more background but nothing on hover or click.

The best implementation of this looks like:

Dormant