search

Aris-t2 / CustomCSSforFx

Custom CSS tweaks for Firefox
GNU General Public License v3.0
1.81k stars 180 forks source link

[!] GENERAL discussion, feedback, questions belong here! (v8) #211

Closed Aris-t2 closed 4 years ago

Aris-t2 commented 5 years ago

Make sure you updated to the most recent version of this projects files "before" reporting problems!

Continued from https://github.com/Aris-t2/CustomCSSforFx/issues/3, https://github.com/Aris-t2/CustomCSSforFx/issues/41, https://github.com/Aris-t2/CustomCSSforFx/issues/88, https://github.com/Aris-t2/CustomCSSforFx/issues/109, https://github.com/Aris-t2/CustomCSSforFx/issues/133, https://github.com/Aris-t2/CustomCSSforFx/issues/163 and https://github.com/Aris-t2/CustomCSSforFx/issues/189.

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

Trying to make CSS code ready for Firefox Quantum (57+)? Remove all @namespace references. They are the reason, if your code refuses to work.

Application/hamburger button in tabs toolbar? Look here: #46

Things this project will not target/recreate

Things not possible with CSS

Achille-Grs commented 4 years ago

Hi @Aris-t2 ! I want to change the hover grey color of a bookmark. How can I do this?

Aris-t2 commented 4 years ago 
#PersonalToolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover,
toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]) {
  background-color: lightblue !important;
}
TroudhuK commented 4 years ago

Hi,

I'm preparing a 63 => 68 upgrade (live bookmarks... adios). I'm training with userchromeCSS/JS in a FirefoxPortable to report the same behaviour and appearance as the current FF63.

Firstable, I don't have the same display with tabs_multiple_lines_v3.css as v1, the active tab at bottom is higher than the others, and I have a vertical scrollbar just for 1 pixel... so I edited to set overflow-y to hidden instead of auto, and I have this:

63 (tabs_multiple_lines_v1): image

68 (tabs_multiple_lines_v3 edited), with #TabsToolbar { border-bottom: 0 !important; } in tabs_below_navigation_toolbar_fx65_v2.css: image (the line disappears, but not the vertical scrollbar if I don't hide it)

68 (tabs_multiple_lines_v3 edited), with the original tabs_below_navigation_toolbar_fx65_v2.css: image

So 1st question: any idea to cancel the overflow-y: hidden and have the same rendering as the first capture?

And the 2nd question is about the tab close button. tab_close_on_active_tab_only.css (and my edited version to merge with tab_close_show_on_hover_only.css) doesn't work: visibility: collapse does nothing. I found opacity: 0, but as you can see, the text is hidden like if the button was displayed, so do you have a better fix?

Bonus question: If you find a way to distinguish bookmarks folders of the Livemarks extension, from normal ones... Using the LivemarkStore?...

TroudhuK commented 4 years ago

Answer to my 2nd question:

image => in tab_close_on_active_tab_only.css visibility: collapse !important; replaced with width: 6px !important; height: 0 !important;

=> Ok.

TroudhuK commented 4 years ago

Answer to my 1st question:

image

In tabs_multiple_lines_v3.css:

/* Test for Firefox > 66 */
@supports (inset-block:auto){
  #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox{
    display: flex;
    flex-wrap: wrap;
    overflow-y: hidden; /* EDITED def: auto */
    max-height: calc(var(--tab-min-height_mlt) * var(--tabs-lines));
  }
  #tabbrowser-tabs > .tabbrowser-arrowscrollbox {
    overflow: -moz-hidden-unscrollable;
    display: block;
    /*margin-bottom:-1px !important;*/ /* EDITED */
  }
  /* ADDED */
  .tabs-newtab-button {
    height: var(--tab-min-height_mlt) !important;
  }
  #TabsToolbar {
    margin-bottom:-1px !important;
  }
}

=> Ok! overflow-y stays hidden to avoid problems when a tab line is added/removed.

Last challenge, Livemarks with a distinct appearance, like live bookmarks (but I think it will need JS).

Aris-t2 commented 4 years ago

@TroudhuK

Regarding your remaining question. Accourding to Livemarks dev Mozilla never provided proper access to item tags for bookmarks within WebExtensions. Because of that the dev is not able to add a custom "livemarks" tag to distinguish them from default bookmarks.

There is a CSS workaround. Add your bookmarks name to the label and the image/path to list-style-image rule like in this example:

.bookmark-item[container="true"]:-moz-any([label="name1"],[label="name2"],[label="name3"],[label="name4"]) {
  list-style-image: url("./rss.svg") !important;
  -moz-image-region: rect(0, 16px, 16px, 0) !important;
}
TroudhuK commented 4 years ago

@Aris-t2 : You helped me a lot, sharing your knowledge. I found an almost perfect way:

  1. Configure Livemarks with one space for read AND unread bookmark prefix, and check the 2 checkboxes about folders => Livemarks add 2 spaces when you create one in the personal bar
  2. "hide" the 2 spaces and set the live bookmarks icon for these For that, I edited bookmark_icons_colorized.css (because I use it): 
    .bookmark-item[container][label^="  "], /* ADDED */
.bookmark-item[container][livemark] {
list-style-image: url("./../../image/livemark-folder.png") !important;
-moz-image-region: auto !important;
}
/* ADDED */
.bookmark-item[container][label^="  "] > .toolbarbutton-text {
margin-left: -6px !important;
}

    So I used a "begin-with" rule instead of a -moz-any list, thanks to the Livemarks prefix feature, and the rendering is perfect, like the real one.

Next thing to do if possible: understand how to work in the popup menu, try to hide spaces and replace favicons with RSS icons.

TroudhuK commented 4 years ago

Suuuuuuuuccess!!!!

  1. Use Livemarks prefixes settings to distinguish read/unread: 1 space for unread, 2 spaces for read

  2. If needed, split the images you need to have one file per image : livemark-item-unread livemark-item-read

  3. A little improvement was pushed in Livemarks, for a perfect result (about the Open "thewebsite" first item), wait for a next version

  4. Code in bookmark_icons_colorized.css (or in your used css) to hide favicons and add a picture instead:

    .bookmark-item[container][label^="  "], /* ADDED */
.bookmark-item[container][livemark] {
list-style-image: url("./../../image/livemark-folder.png") !important;
-moz-image-region: auto !important;
}
/* ADDED >>> */
.bookmark-item[container][label^="  "] > .toolbarbutton-text {
margin-left: -6px !important;
}
.bookmark-item[container][label^="   "] > .toolbarbutton-text {
margin-left: -9px !important;
}
.bookmark-item[container][label^="  "] .bookmark-item:not(:first-of-type) > label,
#PlacesChevronPopup > menu[label^="  "] > label,
#toolbar-menubar menu[label^="  "] > label { {
margin-left: -4px !important;
}
.bookmark-item[container][label^="  "] .bookmark-item:not(:first-of-type)[label^="   "] > label,
#PlacesChevronPopup > menu[label^="   "] > label,
#toolbar-menubar menu[label^="   "] > label { {
margin-left: -7px !important;
}
.bookmark-item[container][label^="  "] .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
display: none !important;
}
.bookmark-item[container][label^="  "] .bookmark-item:not(:first-of-type) label:last-of-type::before {
content: url("./../../image/livemark-item-unread.png") !important;
margin-left: -363px !important;
}
.bookmark-item[container][label^="  "] .bookmark-item:not(:first-of-type)[label^="   "] label:last-of-type::before {
content: url("./../../image/livemark-item-read.png") !important;
}
/* <<< ADDED */

    And the result is perfect (or will be with the French quotation marks with the translation improvement I pushed too): image

Marcosdw commented 4 years ago

Hello, How to reproduct this on FF 70 Thank's request.png

Aris-t2 commented 4 years ago

@Marcosdw https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L723

Marcosdw commented 4 years ago

Thank's Aris but do not work See your modifications: Capture-du-2019-08-24-12-33-07.png

Aris-t2 commented 4 years ago

I posted an updated version on releases area: https://github.com/Aris-t2/CustomCSSforFx/releases

Marcosdw commented 4 years ago

Sorry no change, always this: Capture-du-2019-08-24-12-33-07.png

Aris-t2 commented 4 years ago

z678667

(create a new browser profile)

  1. Download full new package 2.6.7
  2. extract it into your chrome folder like mentioned on main page
  3. edit userChrome.css

Edit.: (tested with and without search bar)

Marcosdw commented 4 years ago

My userchrome.css: Capture-du-2019-08-24-17-51-20.png

See result :( Capture-du-2019-08-24-17-52-26.png

userchrome.css on Linux Mint 19.2 on firefox 70 (2019-08-24)

Aris-t2 commented 4 years ago

You have to set lower width values in general variables file, but other than that it looks like the correct result.

Looks like this on Ubuntu (after reducing the mentioned values): ubuntu_fx70

Marcosdw commented 4 years ago

@Aris-t2 , Ok work fine ;) thank you verry much ;)

rayman89 commented 4 years ago

The "awesome" bar is broken again in firefox beta/dev 70 (im using the latest version available 2.6.7)

image

Aris-t2 commented 4 years ago

Make sure you only enable @import "./css/locationbar/ac_popup_classic_with_two_lines_fx68_star_at_the_end.css";and disalbe @import "./css/locationbar/ac_popup_url_and_title_50percent_width.css";

Works here on Fx 68/69 final, 70 beta 2 dev, 70 Nightly.

rayman89 commented 4 years ago

Using /ac_popup_classic_with_two_lines_fx68_star_at_the_end.css"; instead of ac_popup_classic_with_two_lines_fx68.css"; made it look better but the overflow is still there and the grey area where the other serch engines are is still very wide.

image

krystian3w commented 4 years ago
pic

Firefox 69 RC2 gitch with theme icons from Firefox 45.

Aris-t2 commented 4 years ago

@rayman89 Wait till next update. It seems we are testing different things. ;-)

@krystian3w Next update will fix this.

Acid-Crash commented 4 years ago

Hi @Aris-t2 It seems like this bit of the code/hint is uotdated (maybe the whole module is affected). https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/locationbar/ac_popup_url_and_title_50percent_width.css#L44

I've used it for some time and notice id doesn't work anymore (FF68 win10). Not sure but maybe this is the suitable update (widths are setUp for testing purposes).


/* Recalculating width of the rows */
#urlbar-results .urlbarView-url {
  min-width: calc((100vw - 100px)*0.25) !important;
  width: calc((100vw - 100px)*0.25) !important;
}
#urlbar-results .urlbarView-title {
  min-width: calc((100vw - 100px)*0.75) !important;
  width: calc((100vw - 100px)*0.75) !important;
}

Could you please take a look at it?

Aris-t2 commented 4 years ago

You are right, the example in the out-commented code requires an update:

/* calculate width for action type menuitems like this, *
** if not using 50% widths for title and url. ***********
** 60% url, 40% title in this example ******************//*

#PopupAutoCompleteRichResult[autocompleteinput="urlbar"] .autocomplete-richlistitem .ac-url-text
#urlbar-results .urlbarView-url {
  min-width: calc((100vw - 120px)*0.6) !important;
  width: calc((100vw - 120px)*0.6) !important;
}

#PopupAutoCompleteRichResult[autocompleteinput="urlbar"] .autocomplete-richlistitem .ac-title-text, 
#urlbar-results .urlbarView-title {
  min-width: calc((100vw - 120px)*0.4) !important;
  width: calc((100vw - 120px)*0.4) !important;
}

/**/
Acid-Crash commented 4 years ago

@Aris-t2 I think there is a typo in the first statement (missed comma before #urlbar-results .urlbarView-url)

glennpc commented 4 years ago

Firefox 69 and 70 breaks the border roundness on the search bar. The address bar is fine. I am using the latest custom_css_for_fx_v2.6.9 but older versions didn't work either.

Here's how it looks currently on Firefox 68: search-ff68

Here's how it looks on Firefox 69 and 70: search-ff69

rayman89 commented 4 years ago

@Aris-t2 is version 2.6.9 the one that supposedly fixes the location bar overflow problem I mentioned because it does not fix it for me.

Aris-t2 commented 4 years ago

@glennpc I will look into it.

Edit: This will be fixed on next update. Use this code to set round borders for now:

#urlbar, #searchbar, .searchbar-textbox {
  border-radius: 20px !important;
}

@rayman89 Not sure what causes this for you then. Test on a new browser profile with 2.6.9 and report back.

Edit: Looks like this is related to the number of urlbar results. Small/default value(s) don't cause the glitch.

Aris-t2 commented 4 years ago

@glennpc Fix online in 2.7.0

@rayman89 Fix online in 2.7.0

rayman89 commented 4 years ago

Thanks a lot. Now it's fixed. BTW to fix the "this time search with" bar height "issue"

image vs image

I added

#urlbar .search-one-offs { padding-top: 0px !important; padding-bottom: 0px !important; }

happysurf commented 4 years ago

Maybe is not a new question, but what is the way for hide this horrible address bar separator in Firefox 70beta? Thanks.

Separator

Aris-t2 commented 4 years ago

Should work with Fx70+ (beta, dev, Nightly):

#tracking-protection-icon-container {
  border-image-slice: unset !important;
}
Acid-Crash commented 4 years ago

Hi @Aris-t2 Small question regarding _searchbar_popup_engines_show_labelsfx70.css On initial click search dropdown menu has some double borders (guess because two elements with borders are stacked together).

image

Could you advice how those can be fixed (make them 1px height)?

Aris-t2 commented 4 years ago

The code Mozilla uses to create/hide those separators looks like an overkill, but in my tests this workaround fixed the issue:

#PopupSearchAutoComplete .search-one-offs
#PopupSearchAutoComplete .search-panel-one-offs {
  border: 0 !important;
}

#PopupSearchAutoComplete .search-panel-tree:not([collapsed=true]) + .search-one-offs > .search-panel-header {
  border-top: 1px solid var(--panel-separator-color) !important;
  border-bottom: 1px solid var(--panel-separator-color) !important;
}
Infernoflower commented 4 years ago

Hello, since I updated to Firefox 69, the Reader View button has been showing up despite me having a code in my userChrome that disables it. Please can you tell me how I can fix this?

Acid-Crash commented 4 years ago

@Aris-t2 yes, your code fixed the issue with borders

nollinvoyd commented 4 years ago

Fx 69, CUSTOM CSS FOR FX v2.7.0

When I enable 

@import "./css/toolbars/menubar_color.css"; /**/  `

`/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/

:root {
  --colored_menubar_background_image: linear-gradient(#f9f9fa,#f9f9fa);
  --colored_menubar_text_color: inherit;
}

#toolbar-menubar:not(:-moz-lwtheme) {
  background-image: var(--colored_menubar_background_image) !important;
  border: 0px !important;
  margin-bottom: -1px !important;
}

#main-window:not([style*='--lwt-header-image']):-moz-lwtheme #toolbar-menubar {
  background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)) !important;
  border: 0px !important;
  margin-bottom: -1px !important;
}

#main-window #main-menubar {
  background: none !important;
}

@media (-moz-os-version:windows-win8),(-moz-os-version:windows-win10) {
  #main-window[tabsintitlebar] #titlebar-min .toolbarbutton-icon,
  #main-window[tabsintitlebar] #titlebar-max .toolbarbutton-icon,
  #main-window[tabsintitlebar] #titlebar-close:not(:hover) .toolbarbutton-icon {
    fill: var(--colored_menubar_text_color) !important;
    color: var(--colored_menubar_text_color) !important;
    stroke: var(--colored_menubar_text_color) !important;
  }
}

#nav-bar {
  border-top: 0px !important;
  box-shadow: unset !important;
}

#main-window:not(:-moz-lwtheme) #main-menubar > menu:not(:-moz-any(:hover,[open],[_moz-menuactive])) > :-moz-any(label,description) {
  color: var(--colored_menubar_text_color) !important;
}
#main-window:not([style*='--lwt-header-image']):-moz-lwtheme:-moz-lwtheme-brighttext #main-menubar > menu:not(:-moz-any(:hover,[open],[_moz-menuactive])) > :-moz-any(label,description) {
  color: white !important;
}

#main-window:not(:-moz-lwtheme) #main-menubar > menu:-moz-any(:hover,[open],[_moz-menuactive]) {
  background: Highlight !important;
  color: HighlightText !important;
}

#main-window #toolbar-menubar,
#main-window #main-menubar > menu,
#main-window #main-menubar {
  text-shadow: unset !important;
}

things go from this

TOOLBAR no color

to this

TOOLBAR with color

The color is the way I want it, but the min-max- close buttons are invisible.

Also, is there a way to "shrink" those min-max- close buttons? What a waste of space.

Finally, is it no longer possible to place the Tab bar below the navigation bar and bookmark toolbar without breaking the menubar?

Aris-t2 commented 4 years ago

@Infernoflower 

#reader-mode-button {
  display: none !important;
}

Make sure you enable the pref in about:config to allow custom CSS to be loaded. about:config > toolkit.legacyUserProfileCustomizations.stylesheets > true

@nollinvoyd

The toolbar order was affected last time with Fx65 release. Depending on CustomCSSforFx option you use placing tabs toolbar below navigation and bookmarks toolbar should work as expected. tabs_below_navigation_toolbar_fx68.css still achieves this even on Fx71.

1312

The code to solve your titlebar button problem(s):

.titlebar-button {
  padding: 0 !important; /* no more wasting space */
  color: yellow !important; /* set own color  */
}
bendover22 commented 4 years ago

Re: showing tab close button -only- on hovering: Up through fx 68.x, I used different rules than in the Custom CSS "tab_close_show_on_hover_only.css" file, to only show close button (or button icon) on hovering.

It stopped working in Fx 69_Linux. Also removed tabs labels "fadein" effect (that's not the issue).
userChrome.css was enabled to load in Fx 69 about:config.

I'm curious what changed in Fx 69 .tab-close-button code where the rules stopped working. In Developer Browser Toolbar, I couldn't see why my old code stopped working. (I could've combined the 2 "hiding" rules).

`#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-close-button { visibility: hidden !important; width: 1px !important; height: 1px !important; margin-right: -6px !important; margin-bottom: 0px !important; } / There was a 2nd rule to hide -selected- tab close button, with -same properties as above:*/ .tabbrowser-tab[selected="true"] .tab-close-button {

In the 2 rules above to hide close buttons, I believe there was also

-moz-appearance: none !important;

which worked OK, until Fx 69 (whether it was needed or not). I'm pretty sure the "-moz-appearance: none..." was excluded from the rule to SHOW close buttons on hovering.
What worked up through Fx 68, quit in Fx 69.

FYI, now I'm using code from v2.7.0 "tab_close_show_on_hover_only.css." But, using "visibility: collapse !important;" to hide close buttons, doesn't allow making hidden button size small (1px wide), so more tab label characters can show. Least, I couldn't find a way.

bendover22 commented 4 years ago

Sorry - for me, Github's Insert Code formatting doesn't maintain line returns. It's copied straight out of the file (formatted correctly), inserted between the code tags. Maybe something to do w/ other text formatting.

nollinvoyd commented 4 years ago

@Aris-t2

When I enable

@import "./css/tabs/tabs_below_navigation_toolbar_fx68.css"; /**/ /* <-- tabs not on top - Fx68+ - Windows/Linux */

I get this (hidden min-max-close button)

TOOLBAR 1

No matter what addon button you place to the extreme right of the menubar, the button becomes inaccessible, and is superimposed by the close browser button when it is hovered over. If you move that button, the next one that takes it's place becomes inaccessible.

TOOLBAR 2

The close button works, but there is no min or max function

I would have reported this sooner but I no knowledge since I was using .css you created to hide the min-max-close button (and perform other alterations), and replaced them with custom buttons, which were working until FX 69. I removed all added css in userchrome.css, but It had no effect on this situation. Essentially, all I've done is make some customization choices to CustomCSSforFx

The title bar code didn't work either.

Infernoflower commented 4 years ago

Hello, since I updated to Firefox 69, the Reader View button has been showing up despite me having a code in my userChrome that disables it. Please can you tell me how I can fix this?

@Infernoflower

#reader-mode-button {
  display: none !important;
}

Make sure you enable the pref in about:config to allow custom CSS to be loaded. about:config > toolkit.legacyUserProfileCustomizations.stylesheets > true

Thank you, but that preference is set to "true" and it still happens.

Acid-Crash commented 4 years ago

@Infernoflower Have you tried to disable reader mode via acout:config >> reader.parse-on-load.enabled:false

Infernoflower commented 4 years ago

@Infernoflower Have you tried to disable reader mode via acout:config >> reader.parse-on-load.enabled:false

Thank you. I tried that and it worked.

Aris-t2 commented 4 years ago

@bendover22

This works even on Fx71.

@nollinvoyd

I can not reproduce your setup. Please replicate it with 2.7.1+ release and upload your chrome folder.

@Infernoflower Try what Acid-Crash suggested. Other than that I don't know what to tell you. The code works here and if your userChrome.css is loaded correctly, it should work for you too.

Do other tweaks of the project work for you? Have to tested the complete package? Is chrome folder in the right place?

GvsE commented 4 years ago

Hello, could somebody let me know the ID of the pop-up "balloon" that appears when you add a new bookmark. It says "saved to bookmarks" and in the default version is blue. In my edits I inadvertently changed the background color of it, and I see I need to add an exclusion just for this item. Hope someone can help!

bendover22 commented 4 years ago

@Aris-t2

@bendover22 clean/backup your chrome folder extract latest CustomCSSforFx files into chrome folder edit userChrome.css and --- enable tab_close_show_on_hover_only.css --- disable tab_close_always_visible.css

Thanks. I don't / didn't use --- tab_close_always_visible.css, or all files in CustomCSSforFx (not v2.7 or ever - usually works fine.). I copy content from a couple of files I'm interested into my userChrome.css.

A problem I see with v2.7 tabs_multiple_lines_v3.css and tab_close_show_on_hover_only.css, is the rule in tabs_multiple_lines_v3.css:

/* Fx66+ tab close fix */
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-close-button {
  visibility: visible !important;
  display: block !important; }

conflicts w/ code in tab_close_show_on_hover_only.css

.tabbrowser-tab:not([pinned]):not(:hover) .tab-close-button {
  visibility: collapse !important; }
.tabbrowser-tab:not([pinned]):hover .tab-close-button {
  visibility: visible !important;
  display: block !important; }

If I wanted to use tabs_multiple_lines_v3 and tab_close_show_on_hover_only, I had to comment the rule about: / Fx66+ tab close fix / Is that not a conflict, even those using entire CustomCSS, if those 2 files are enabled?

Aris-t2 commented 4 years ago

@bendover22

Wasn't aware of you were using tabs_multiple_lines_v3. Extend the tab close on hover only rule to this one and add it after tabs_multiple_lines_v3:


#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]):not(:hover) .tab-close-button {
  visibility: collapse !important;
  display: none !important;
}

#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]):hover .tab-close-button {
  visibility: visible !important;
  display: block !important;
}
Aris-t2 commented 4 years ago

@GvsE

#confirmation-hint is the id of that panel. You can find it using developer tools like mentioned on main page.

GvsE commented 4 years ago

Thank you kindly, Aris-t2! I usually have no problems finding IDs, classes etc. with dev tools but this item disappears before I manage to select it, even when I tick the option "disable pop-up auto hide." Thanks again.