search

Aris-t2 / CustomCSSforFx

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

General discussions, feedback, questions belong here (v5) #133

Closed Aris-t2 closed 6 years ago

Aris-t2 commented 6 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 and https://github.com/Aris-t2/CustomCSSforFx/issues/109.

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

John0877 commented 6 years ago

Hi, I have this code in my UserChrome.css file for hiding the favicons and supposedly hiding the throbber for page loading but its not working.

/* Hide both tab icon and throbber: */
.tabbrowser-tab .tab-throbber,
.tabbrowser-tab .tab-icon-image{
  display: none !important;
  visibility: collapse !important;
}

I'm on 61.0.2 64bit.

Aris-t2 commented 6 years ago

@krystian3w

You can hide "confirmation hints" in general using this code:

#confirmation-hint {
  display: none !important;
}

@rayman89 If you are using one of the options added/modified in 1.9.9, that may be true. Are you using any of these options:

@John0877 You code still works fine for me in Firefox 61-63. Make sure your userChrome.css in the correct place and not beginning with a capital letter.

fff

John0877 commented 6 years ago

The folder name is "Chrome" and the filename is "userChrome.css".

It is after some @import lines though. I figured it wouldnt hurt to leave it there since its small. I did find out though the @import lines all have to be first or they wont work I guess.

For me the icons are all hidden just fine but the page loading throbber thing still shows up when the page loads. I want that gone too.

Aris-t2 commented 6 years ago

Try this:

/* Hide both tab icon and throbber: */
.tabbrowser-tab .tab-throbber-fallback[busy],
.tabbrowser-tab .tab-throbber-fallback[progress],
.tabbrowser-tab .tab-throbber[busy]::before,
.tabbrowser-tab .tab-throbber[progress]::before,
.tabbrowser-tab .tab-throbber,
.tabbrowser-tab .tab-throbber-fallback,
.tabbrowser-tab .tab-icon-image{
  display: none !important;
  visibility: collapse !important;
}
John0877 commented 6 years ago

Appears to be working as intended. Even without a restart.

krystian3w commented 6 years ago

Works without restart if add by Browser Toolbox #how-to-find-item-ids-and-attributes.

rayman89 commented 6 years ago

@Aris-t2 Yes I think it's that I was using the padlock and the 'old icons' inside bookmark menu popups I disabled them and it's all normal.

BTW I noticed that firefox 62 beta allows multiple tab selection but there is no way of telling what tabs are selected when using the tabs css. Could you add something to make it noticeable (maybe changing the bg color like one is able to do with unloaded tabs or current tab etc)?

Pizzapops commented 6 years ago

@Aris-t2 I noticed the last couple days that Nightly broke part of my _compact_sidebarmenu.css 2018-08-17_093525

/* compact lines in bookmarks & history */
.sidebar-placesTree treechildren::-moz-tree-row {
    height: 1.3em !important;
    border-width: 1px !important;
}

This even happens with no other custom css files and no userChrome.js. Have you noticed this or any other CSS problems?

Aris-t2 commented 6 years ago

@rayman89 I will add an indicator for multiselected 'classic tabs' on next update. Default tabs have an own indicator.

.tabbrowser-tab[multiselected="true"] .tab-stack .tab-content {
  box-shadow:   inset 2px 0 0 Highlight,
            inset -2px 0 0 Highlight,
            inset 0 2px 0 Highlight,
            inset 0 -2px 0 Highlight !important;
}

@Pizzapops They have added a min-height you have to reset to get the old treechildren height.

/* compact lines in bookmarks & history */
.sidebar-placesTree treechildren::-moz-tree-row {
    min-height: unset !important;
    height: 1.3em !important;
    border-width: 1px !important;
}

So far I've noticed some code changes in Fx63, that required updating the options ac_popup_classic_with_two_lines and oldsearch to work again.

John0877 commented 6 years ago

Is there any way to get rid of the text fade on the right side of the tabs?

Aris-t2 commented 6 years ago

@John0877 Try this: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tab_titles_remove_blur.css

Edit Here is how it can look.

111

(default / remove blur / remove blur & cut content)

remove blur

.tab-label-container[textoverflow]:not([pinned]) {
  mask-image: unset !important;
}

remove blur & cut content

.tab-label-container[textoverflow]:not([pinned]) {
  mask-image: unset !important;
}
.tab-label-container[textoverflow]:not([pinned])::after{
 content: "" !important;
}
.tab-label-container[textoverflow]:not([pinned]) .tab-text {
  white-space: unset !important;
}
Pizzapops commented 6 years ago

@Aris-t2 Thanks for the fix.

lakitu13 commented 6 years ago

Hi, any plans for a new version of tabs multiple lines? That was one of the key features of Tab Mix Plus for me, and when I use V2 with the default tabs it leaves some extra pixels under the tab, even on a single row.

2018-08-23_20-58-14

Aris-t2 commented 6 years ago

@lakitu13 I was not aware of this issue. Next update will fix this problem.

If you have any other questions or find other problems with multiple tab lines, look into this thread: [MULTIROW TABS SUPPORT THREAD] - multiple tab lines. Most likely you will get support there faster.

Pizzapops commented 6 years ago

Just updated to 2.0.3 and noticed overflow_button_rotate_on_open.css. I felt I no longer needed the panel arrow pointing at the button and modified the script. I also changed the button icon color.

#nav-bar-overflow-button[open="true"] .toolbarbutton-icon {
  transform: rotate(90deg) !important;
  fill:white  !important; /* change to compliment your theme */
}
#widget-overflow .panel-arrow{display:none !important;} /* hide arrow */
lakitu13 commented 6 years ago

@Aris-t2 Thanks, appreciate it. Didn't see the multirow thread.

MarkRH commented 6 years ago

Hey @Aris-t2 do you have a Thunderbird (60) version of this? I managed to find some CSS to make the column headers stand out: image

treecol, .treecol-image {
   background-color: peachpuff !important;
   border-right-style: solid !important;
   border-right-width: 1px !important;
}

Just wondered about column separators. I might bug report on it. I feel there should be some visible ones.

Edit: filed a bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1488360 and added CSS to give a border to the columns.

Aris-t2 commented 6 years ago

I use this in Thunderbird: https://github.com/Aris-t2/CustomizeMyBird/blob/master/xpi/content/css/treecol_aero.css

ImSpecial commented 6 years ago

Ugh, why do I always find my self back here whenever a new FF version is released... Oh right Aris needs to fix FF's mistakes.

Okay, so maybe I'm jumping the gun here, but with FF 62.0, I'm noticing that when starting up Firefox that there is this second long delay white screen, is this something that can be fixed with CustomCSSforFx? Is this even an issue with others... I hope so, else it means it's just me.

I also notice that Firefox is opening in different window sizes and window positions are not saving correctly when opening and reopening Firefox, maybe a multi monitor thing I'm not sure, but this is not a CustomCSSforFx problem, just a FFS Mozilla problem.

Aris-t2 commented 6 years ago

@ImSpecial Yes, this startup / white screen delay can be reproduced here too, but it was already present before Fx62 (for me). The delay is not fixable by CSS, but can be reduced by disabling all "telemetry" and "data collection" settings listed on this projects main page. Try also to block "pingsender.exe" in your Firewall (temporary?).

I could not reproduce the window size glitch on my systems. Who knows what causes it, but you always can test a new profile to see, if any of Firefox's (temporal) configuration files/setting are responsible for the issue.

ImSpecial commented 6 years ago

Good to know it's not just me, I did notice the white screen before in v61.XX, but it was not as noticeable as it is now, here it seems to last a good 0.5 seconds longer.

About the window size not saving, I'll have to test it more, it could be something wonky with how Windows 10 DPI settings are used, I use a custom 125% IIRC. But one thing is for sure, 61 worked fine, 62 does not. All I changed on my end up just running the 62 installer to upgrade versions.

nollinvoyd commented 6 years ago

I want to unhide the 3 bar button. I know_ there is a setting that hides it, but I can't figure out what it is.

nollinvoyd commented 6 years ago

Is it possible to alter the text size in the address bar and search bar that does not affect the text in other areas

I've got these:

/* INCREASE SEARCH BAR FONT SIZE ****/

searchbar .searchbar-textbox {

font-size: 14px !important; }

/* INCREASE URL BAR FONT SIZE ****/

urlbar {font-size: 14pt !important}

But I'm guessing the must be put in a specific spot in userchrome.css to work?

Aris-t2 commented 6 years ago

@ImSpecial Just for testing: is everything going back to normal, if you reinstall Fx61 or Fx60ESR?

@nollinvoyd Application button You are looking for the "appbutton" settings. Disable all active appbutton_in_titlebar setting to restore buttons initial position.

Location/search font size Which areas are you referring to? Normally this code would be enough to change the font size in location bar and search bar:

:-moz-any(.searchbar-textbox, #urlbar) {
  font-size: 14pt !important;
}

But to override some of this projects files I would recommend to use this...

#main-window:not(:-moz-any([uidensity="compact"],[uidensity="touch"])) :-moz-any(.searchbar-textbox, #urlbar),
#main-window:-moz-any([uidensity="compact"],[uidensity="touch"]) :-moz-any(.searchbar-textbox, #urlbar) {
  font-size: 14pt !important;
}

... or this...

#main-window:not(:-moz-any([uidensity="compact"],[uidensity="touch"])) #urlbar[type="autocomplete"],
#main-window:-moz-any([uidensity="compact"],[uidensity="touch"]) #urlbar[type="autocomplete"],
#main-window:not(:-moz-any([uidensity="compact"],[uidensity="touch"])) #searchbar .searchbar-textbox[type="autocomplete"],
#main-window:-moz-any([uidensity="compact"],[uidensity="touch"]) #searchbar .searchbar-textbox[type="autocomplete"]{
  font-size: 14pt !important;
}

Own code should always by added at the end of userChrome.css.

ImSpecial commented 6 years ago

Yeah going back to 61.0.2 fixes my issues, and I've tried 62.0 while renaming the chrome folder and it still happens so it's not an CustomCSSforFx issue, my guess it is has something to do with Windows 10 DPI but I just don't have time to muck around with that right now, I'd just stick with 61.0.2... but you know security patches make that hard, ugh.

EDIT: And for Science! Refreshing FF and it still happens, yay! My guess is once 62 hits the masses more reports will come in about this, so I'm going to wait a see. But if you have any ideas let me know.

ghost commented 6 years ago

I'm not sure if this has already been proposed, just found it on the web:

/ remove thumbnail in the bookmark popup /

editBookmarkPanelImage, #editBookmarkPanelFaviconContainer {display: none !important;}

Personally I find it bothering. Cheers.

happysurf commented 6 years ago

Aris, I need your help for make black the badge background of ublock origin only. Is possible? Thanks.

Aris-t2 commented 6 years ago

@ImSpecial You are right "more and more" things will break in the upcoming Fx versions. It like something never change. Your "window" issue is worth reporting on Bugzilla in my opinion.

@StanGets Thanks for the note. I will add this to the collection on next update.

@happysurf Its possible to set own background/text colors for Ublock Origins badge. Look at this example:

#ublock0_raymondhill_net-browser-action .toolbarbutton-badge-stack .toolbarbutton-badge {
  color: white !important;
  background: black !important;
}

grafikgrafikgrafik

Acid-Crash commented 6 years ago

@happysurf @Aris-t2 Hi Here. If the badge has few background color states I tried to do the following to color the separate badge colors. Not sure if this is the cleanest solution though. @Aris-t2 it would be nice hear your thoughts on this.

/* For Ublock origin */
#ublock0_raymondhill_net-browser-action[badgeStyle*="background-color: rgba(102, 102, 102, 1)"] .toolbarbutton-badge-stack .toolbarbutton-badge {
  color: green !important;
  background: black !important;
}

/*https://addons.mozilla.org/en-US/firefox/addon/cookie-autodelete/*/
/* Option 1 - For Cookie Autodelete via BG color */
#cookieautodelete_kennydo_com-browser-action[badgeStyle^="background-color: rgba(0, 0, 255, 1)"] .toolbarbutton-badge-stack .toolbarbutton-badge {background-color: rgba(41, 156, 32, 1) !important;}
#cookieautodelete_kennydo_com-browser-action[badgeStyle^="background-color: rgba(255, 0, 0, 1)"] .toolbarbutton-badge-stack .toolbarbutton-badge {background-color: rgba(217, 0, 0, 1) !important; color: #fff !important;}
/* Option 2 - For Cookie Autodelete via IconFilePath */
#cookieautodelete_kennydo_com-browser-action[style*="icon_48.png"] .toolbarbutton-badge-stack .toolbarbutton-badge {background-color: rgba(41, 156, 32, 1) !important;}
#cookieautodelete_kennydo_com-browser-action[style*="icon_red_48.png"] .toolbarbutton-badge-stack .toolbarbutton-badge {background-color: rgba(217, 0, 0, 1) !important; color: #fff !important;}
ImSpecial commented 6 years ago

@Aris-t2 Already their, https://bugzilla.mozilla.org/show_bug.cgi?id=1489214

Lets see what happens...

chriscjs commented 6 years ago

Is it possible to change the default favicon for bookmarks from the photon globe to something else? This would be for sites that have no favicon and so use the default.

Aris-t2 commented 6 years ago

@Acid-Crash Your solution is even better.

@chriscjs Mozilla changed bookmarks code in Firefox 55. Afterwards detecting "empty" bookmark icons in general was not possible anymore. If you want to change specific bookmarks you can of course still change the icons, when the code is based on bookmarks label for example:

menuitem[label="My Bookmark name"] .menu-iconic-left .menu-iconic-icon {
  visibility: hidden !important;
}
menuitem[label="My Bookmark name"] .menu-iconic-left {
  list-style-image: url('path_to_image') !important;
}

or

menuitem[label="My Bookmark name"] .menu-iconic-left .menu-iconic-icon {
  visibility: hidden !important;
}
menuitem[label="My Bookmark name"] .menu-iconic-left {
  background: url('path_to_image') center no-repeat !important;
}
Achille-Grs commented 6 years ago

Hello @Aris-t2 how are you? :-) Everything is fine here, except one small detail... Is there a fix for this yellow spot to get in the right position and size? (see pic) 1 Thank you very much!

Aris-t2 commented 6 years ago

Hi, everything is fine here.

If you want to change the size of download buttons badge, try this code:

#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  height: 8px !important;
  width: 8px !important;
  min-width: 0 !important;
}

To hide it this should do the trick:

#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  display: none !important;
}
Achille-Grs commented 6 years ago

The first code works perfect! I changed the dot color to red. this yellow spot occurs when the download fails.

Thank you so much!

Underx01 commented 6 years ago

Hello all,

I hope you can answer my question: Is it possible to change the background color of the drop-down-menu's: "folders of bookmarks" "top menubar" "right-click context menu" to a different color other then the default White/Grey? 1

Changing themes doesn't work with my current CSS configs, the BG color of the drop-down-menu's stay the same. Where should I look into and what should I change? Thank you very much for the reply.

Aris-t2 commented 6 years ago

Try something like this:

menupopup,
menupopup menugroup {
  -moz-appearance: none !important;
  background: blue !important;
  border: 0 !important;
}

menupopup > :-moz-any(menu,menuitem,menugroup) label {
  color: white !important;
}

menupopup > :-moz-any(menu,menuitem,menugroup)[disabled] label {
  opacity: 0.5 !important;
}
Underx01 commented 6 years ago

@Aris-t2 Awesome, that's what I was looking for! Thank you very much!

Underx01 commented 6 years ago

@Aris-t2 Sorry to bother you again or anyone in this matter. 1 small problem is that there is no more vertical separator line: 2

As you can see on the right side (that's with the code provided) there is no vertical separator line. Also is there a way to change the color of the separator line aswell?

Thank you very much for the reply.

Aris-t2 commented 6 years ago

The vertical line is part of the background image. The custom background overrides the default one.

Play with these values to change separator color.

menupopup menuseparator {
 -moz-appearance: none !important;
  border-top-color: transparent !important;
  border-bottom-color: red !important;
  padding-bottom: 1px !important;
  margin-inline-start: 30px;
}

This will create a vertical border

menupopup {
  background: linear-gradient(to right, blue 26px, red 26px, blue 27px) !important;
}
Underx01 commented 6 years ago

@Aris-t2 Thank you again for your time and your fast replies. The vertical lines aren't showing, but the color changing is working and thats good enough for me. Will try to play with values later today as you suggested & if I find the solution for the V-line then I'll let you know. Thanks again!

LionWrathz commented 6 years ago

@Aris-t2 https://github.com/Aris-t2 how can i remove this space.

On Wed, 12 Sep 2018 at 20:19, Underx01 notifications@github.com wrote:

@Aris-t2 https://github.com/Aris-t2 Thank you again for your time and your fast replies. The vertical lines aren't showing, but the color changing is working and thats good enough for me. Will try to play with values later today as you suggested & if I find the solution for the V-line then I'll let you know. Thanks again!

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/Aris-t2/CustomCSSforFx/issues/133#issuecomment-420709571, or mute the thread https://github.com/notifications/unsubscribe-auth/ANXvJfHNRU8xjC4qC1DtlmvLmCZuf4PVks5uaTQOgaJpZM4VKedm .

Aris-t2 commented 6 years ago

@LionWrathz

What space?

Please do not use email response to chat here, visit the page itself. ;-)

Underx01 commented 6 years ago

@Aris-t2 Awesome! Thank you very much!

Underx01 commented 6 years ago

Hello,

I've looked all over but couldn't find a solution for the following: Is it possible to move the search/address bar below the navigation icons exactly as the picture below?

2 As you can see that the bookmarks are on the same row as the search/address bar, below the navigation icons.

Thanks in advance for the reply.

Aris-t2 commented 6 years ago

@Underx01 CSS can not move the "location bar" to another toolbar, but you can experiment with CSS rule "position" to cheat location bar to a lower position. This code is just a demo and is not fully working (space on navigation toolbar is still occupied).

#nav-bar-customization-target {
  padding-bottom: 32px !important;
}

#urlbar-container {
  position: absolute !important;
  bottom: 1px !important;
}

#urlbar {
  padding: 0 !important;
  margin: 0 !important;
  width: 100vw !important;
}

#urlbar-search-splitter {
  display: none !important;
}
John0877 commented 6 years ago

I don't know if this has been answered before but I seem to have this annoying blank space at the end of my first row tab bar when it goes to a second row. I'm @import'ing tabs_multiple_lines.css from your collection.

2018-09-14_06-12-11

Aris-t2 commented 6 years ago

There is a case where the new tab button gets moved to next line sometime causing this glitch. Sometimes it is caused by a certain window width. Try to minimize and maximize window again.

Not sure, if it helps, but I posted a new version today taking care of some "multiline tab" issues. Maybe this helps you too.

Underx01 commented 6 years ago

@Aris-t2 Awesome & its more than enough for my simple browsing needs. Thank you again very very much for your time!

John0877 commented 6 years ago

There is a case where the new tab button gets moved to next line sometime causing this glitch. Sometimes it is caused by a certain window width. Try to minimize and maximize window again.

Not sure, if it helps, but I posted a new version today taking care of some "multiline tab" issues. Maybe this helps you too.

Nope, still present with the new file of same name replacing the old one.

I dont have the New Tab Button visible.