search

Aris-t2 / CustomCSSforFx

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

GENERAL discussion, feedback, questions belong here! (v13) #404

Closed Aris-t2 closed 3 years ago

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!

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, https://github.com/Aris-t2/CustomCSSforFx/issues/189, https://github.com/Aris-t2/CustomCSSforFx/issues/211, https://github.com/Aris-t2/CustomCSSforFx/issues/241, https://github.com/Aris-t2/CustomCSSforFx/issues/273, https://github.com/Aris-t2/CustomCSSforFx/issues/308 and https://github.com/Aris-t2/CustomCSSforFx/issues/368.

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

Things not possible with CSS

M7amma commented 3 years ago

How can I add outline around Back & Forward buttons (when button are active and inactive) same as the outline around url box?

Untitled

rebop commented 3 years ago

Went ahead and updated to FF 91 and cannot detect anything that does not work as expected!

dinkydogs commented 3 years ago
Screen Shot 2021-08-15 at 7 22 25 PM

How do I adjust the height of the bookmarks toolbar so it's more centered between the address bar and tabs and not so close to the tabs?

Thalon77 commented 3 years ago

Still adapting the custom CSS to V91: I had to say that it went smoothly (had only to erase the old profile and recover everything from my FF account), I managed to get everything "the way it was" but I'm still missing a thing: how do I change the color around the Icons (back-forward, home, etc.) around the address bar to an aero light blue like I managed to do for the menus using the option I found here some post above? Now it has a gray shade I don't like.

Aris-t2 commented 3 years ago

@Marvinoo Edit the border color inside buttons_on_navbar_classic_appearance.css and also change

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

to

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

@dinkydogs

Are you using toolbar text or icon+text modes? If not, I'm not sure what is causing the gap on your system. Try to reduce the space above bookmarks toolbar:

#PersonalToolbar {
  margin-top: -10px !important;
}

@Thalon77 Do you mean the Aero blue theme colors?

There is a whole area for different "themes" inside userChome.css:

/* COLOR VARIABLES FOR DEFAULT BROWSER THEME ONLY - MAIN UI - [only use one at a time] **********/
/* [!] set own colors for tabs & toolbars inside 'color_variables.css' or use available presets */
/* [!] enabled 'menubar_color.css' and 'statusbar_color.css' might be required in some cases ****/
/*@import "./config/color_variables.css"; /**/  /* <- default 'grey' colors */
 @import "./config/color_variables_aero.css"; /**/  /* <- 'AeroBlue' colors (Win 7 Aero) */
/* @import "./config/color_variables_classic-grey.css"; /**/  /* <- 'classic grey' colors (Win Classic) */
/* @import "./config/color_variables_fx3.css"; /**/  /* <- 'Firefox 3-like' blueish colors */
/* @import "./config/color_variables_transparent.css"; /**/  /* <- (semi-)'transparent' colors */
/* @import "./config/color_variables_aeroglass.css"; /**/  /* <- 'AeroGlass' colors / Win10+Glass8 fix can be found in 'toolbars' area */
/* @import "./config/color_variables_deved.css"; /**/  /* <- based on 'Developer Edition' colors */
/* @import "./config/color_variables_noia4_grey.css"; /**/  /* <- based on 'Noia 4 themes' grey colors */
/* @import "./config/color_variables_noia4_lightgrey.css"; /**/  /* <- based on 'Noia 4 themes' lightgrey colors */
/* @import "./config/color_variables_noia4_dark.css"; /**/  /* <- based on 'Noia 4 themes' dark colors */
Thalon77 commented 3 years ago

@Aris-t2 I noticed an extension of mine (colorful tabs) was overriding the default color palette to function properly (bad thing, I need to report that to its author), but it didn't matter really considering I was using the "default grey colors" option. I remember that the hover color for that palette wasn't so dark before, maybe my memory is faulty but, is there a way to manually override that color inside the "general grey colors" preset?

dinkydogs commented 3 years ago

@Aris-t2

i'm using this one

@import "./css/toolbars/toolbar_mode_icons_and_text_macOS.css"; /*/ / -> also offers alternative appearance on Linux */

rebop commented 3 years ago

@Aris-t2 You posted this for me.

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; } Actually, that all works well. Only thing missing is some good indication when I hover. Border, inner shading? Something to know when hovered and clicked.

Thanks.

EdwardKiefer commented 3 years ago

I find using dark theme there not a lot of appearance options that look good IMO. I did find @import "./css/buttons/buttons_on_navbar_glass_appearance.css"; this switch to look not bad but still the icon background/shading color seems to bright still. So I modified a few values in that file to look like this, which seems better for dark themes (note mouse hover is over DL icon) custom_dark_nav_buttons This is the area I modified in file, just these lines, rest I left alone. I is basically outlined border and slight change in hover. / transparent button style /

nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active) > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon {

background: transparent !important;

nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon {

background: hsla(190,10%,30%,.3) !important; border-color: hsla(190,10%,45%,.8) hsla(190,10%,40%,.8) hsla(190,10%,30%,.8) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset, 0 0 0 1.5px rgba(255,255,255,.1) inset, 0 0 3.5px hsl(190,10%,50%),

Now I don't know if this could be done with less code, that is above my pay grade but I like how this looks in dark theme.

dinkydogs commented 3 years ago

@Aris-t2

I used your fix to reduce space between the toolbar but i added one line to increase space between the tab and toolbar as well. now there is a visible line that goes across the whole page just above the top of the tabs. Here is what i added and a picture of the line. Is there a way to get rid of/hide this line?

PersonalToolbar {

Margin-top: -10px !important; Margin-bottom: +5px !important; }

Screen Shot 2021-08-16 at 11 22 46 PM
BhaaLseN commented 3 years ago

I use a dark theme (specifically Blue Polarity), and the only thing that I can't get to look sane is the Identity/Tracking Protection/Remote Control things in front of the url bar: image

I tried my luck with the inspector, and I found the elements (should be #remote-control-box, #identity-box and #tracking-protection-icon-container) - but any attempts of changing background-color, color or anything else seems to be in vain. #urlbar-container is the next-best match where changing the background-color actually has any effect (and thats like, 3 levels up from where I want to be?) Going further down into the containers doesn't seem to be right either, since the inspector shows me those are smaller than the background (and would leave bright spots)

Any ideas on how to change their background color? I think I uncommented all the relevant styles in userChrome.css, but nothing else sticks out.

Andy2No commented 3 years ago

Is there a way to see the CSS that Firefox uses by default?

After each major update, I've been searching for other people's workarounds for particular problems caused by it, so far - which is fine, when I find one, but otherwise, I have no way of knowing what CSS to try, because I don't know what causes the behaviour in the first place.

Is there some documentation somewhere that I'm missing, or just a set of CSS stylesheets that Firefox uses, perhaps?

CO-Windler commented 3 years ago

Please add a curved tabs style like wilfredwee/photon-australis. The squared modern tabs or floating FF91 tabs look atrocious.

https://github.com/wilfredwee/photon-australis

Please add a download progress indicator. When default icons are replaced, the download icon does not change to hint that something is still downloading. (Is it possible to display the replaced icon only while nothing is downloading, but the download progress icon while there is a download?)

Please make it possible to replace the default favicon globe icon with something else (e.g. earth-style globe from older FF). The thick lined grid globe 1.) is very ugly and 2.) a symbol for colonialism.

ThiefMaster commented 3 years ago 
.urlbarView-row[label]{
  display: none !important;
}

I just realized that this change doesn't hide only the "Firefox Suggest" label but also the actual entry the label is attached to...

9jkh commented 3 years ago

Hi Aris,

Wondering if the line height in just the toolbar overflow menu (>>) can be increased - spacing in all the other menus is more or less normal. Plus could use a bit more bolding.

Looks like this right now

overflow menu too tight

Should look more like this

overflow menu normal

Aris-t2 commented 3 years ago

@Thalon77 Isn't he main pupose of Colorful Tabs add-on to override colors or does it override more than just the tabs?

You can override CTs colors using this code:

#main-window box #navigator-toolbox #titlebar+#nav-bar,
#main-window box #navigator-toolbox #titlebar+#nav-bar+#PersonalToolbar {
  appearance: none !important;
  background: var(--general_toolbar_color_toolbars, inherit) !important;
}

@rebop

From your previous screenhots, I was under the impression you wanted the grey indicator to be gone.

Change

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

to

#urlbar-zoom-button:not(:hover) {
  background: unset !important;
}

Instead of background: unset !important; you can use other known border/background rules to get the desired result:

#urlbar-zoom-button {
  background-color: unset !important;
  border: 1px solid transparent !important;
}

#urlbar-zoom-button:hover {
  background-color: unset !important;
  border: 1px solid lightgrey !important;
}

@EdwardKiefer When most of the CSS were written there were no "dark modes". ;-) I will add one more style, but your result looks good too.

@dinkydogs

Try this instead:

#PersonalToolbar {
  margin-top: -10px !important;
  padding-bottom: 5px !important;
}

@BhaaLseN

#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box > #tracking-protection-icon,
#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box[hasException] > #tracking-protection-icon,
#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon,
:root[lwt-toolbar-field-brighttext] #urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon {
  list-style-image: url(chrome://browser/skin/tracking-protection.svg) !important;
  fill: red !important;
  -moz-context-properties: fill, fill-opacity !important;
}

@Andy2No You can inspect CSS files using devoloper tools. That way you can navigate to a certain ui element and look what code is uses.

Read main page how to enalbe developer tools.

@CO-Windler Sorry, but curved Australis-like tabs won't be part of this project.

Please add a download progress indicator. When default icons are replaced.

Maybe in a future update.

Please make it possible to replace the default favicon globe icon with something else

CSS can not replace that icon.

@ThiefMaster

This was not intended. Next update will fix that issue.

@9jkh

Maybe popup_compact_menus.css is too compact?

.widget-overflow-list .toolbarbutton-1 {
  padding: 4px 2px !important;
}
BhaaLseN commented 3 years ago

@Aris-t2 Thanks, but thats just the fill color, not the background color. The background is still bright; and when I add a background-color it just colors the area with the icon, but not its parent container (which doesn't budge, no matter how I write the selector). Any idea what I could be missing?

Aris-t2 commented 3 years ago

You are using identitybox_colors.css, so you have to override, what was set there:

#tracking-protection-icon-container:not([hidden]):hover {
  background: blue  !important;
}
#tracking-protection-icon-container:not([hidden]),
#tracking-protection-icon-container:not([hidden]):is([open="true"],:hover:active) {
  background: red  !important;
}

#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box > #tracking-protection-icon,
#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box[hasException] > #tracking-protection-icon,
#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon,
:root[lwt-toolbar-field-brighttext] #urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon {
  list-style-image: url(chrome://browser/skin/tracking-protection.svg) !important;
  fill: yellow !important;
  -moz-context-properties: fill, fill-opacity !important;
}
BhaaLseN commented 3 years ago

Thanks! That sent in the right direction, I think that was a left-over from when i was toying with other options 👍

rebop commented 3 years ago

@aris-t2 Thanks for all the help. Will sit where I am right now. Workable.

Andy2No commented 3 years ago

devoloper tools.

Thanks very much. Is it possible to direct the inspection to the Library window? I can't seem to find a way to inspect any part of that. For example, the window I get when I choose Manage Bookmarks.

FWIW, it seems the menu structure in Firefox 91 is different, so I think that page needs updating.

Under: How to find item ids and attributes?

Firefox 61+

Tools > WebDeveloper > Toggle Tools ... Tools > WebDeveloper > Browser Toolbox ...

In Firefox 91+, I don't see the WebDeveloper sub-menu, but the equivalent of both seems to be this:

Tools > Browser Tools > Browser Toolbox

dinkydogs commented 3 years ago

@Aris-t2

I tried

PersonalToolbar {

margin-top: -10px !important; padding-bottom: 5px !important; }

but the space between the bookmarks and top of the tabs did not increase.

Screen Shot 2021-08-20 at 1 23 23 AM

If possible I'd like the space between the bookmarks bottom and top of tabs to increase just a little bit to make the bookmarks more centered between the address bar and the tabs. The margin-top is perfect reduction.

Thank you

Aris-t2 commented 3 years ago

@Andy2No

Unfortunately only the main window can be inspected. You can only look into the code used by library by extracting omin.ja file(s) from your Fx setup and look through the extracted files.

@dinkydogs I'm confused right now. Do you want more or less space between bookmarks and the above toolbar?

From your screenshot I get the impression the space value between bookmarks and top toolbar is higher than the one between bookmarks toolbar and your tabs, yet you want to increase the first one while getting it close to the second one.

Change the margin-top: -10px !important; to margin-top: -5px !important; for example.

dinkydogs commented 3 years ago

@Aris-t2

Sorry for the confusion. with margin-top: -10px !important; the space between the the bookmark and top toolbar is perfect. I'm trying to increase the space between the bookmark and tabs to match the space between the bookmark and top toolbar

Aris-t2 commented 3 years ago

OK, then increase the lower rules value padding-bottom: 5px !important; --> padding-bottom: 10px !important; or something between 5 and 10.

dinkydogs commented 3 years ago

I put it to 10 but it doesn't appear to have made a difference.

Screen Shot 5px

this is 5px

Screen Shot 2021-08-20 at 10 52 14 AM

and this is 10px

Andy2No commented 3 years ago

omin.ja

Okay. Thanks.

Aris-t2 commented 3 years ago

@dinkydogs

I found a possible issue. The code for bottom padding was not applied correctly, because other rules could override it.

This should work now:

#main-window box #navigator-toolbox #PersonalToolbar {
  margin-top: -10px !important;
  padding-bottom: 10px !important;
}
Thalon77 commented 3 years ago

@Aris-t2 Thanks for the colorful tabs fix (I will keep it safe in my_userchrome.css), sorry to ask again about it but I had two additional problems (see screenshot): the first is the white area right of the tabs (what code do I need to add to the one you provided?), the second is just a confirmation: I selected "aero" as main color theme, should the hovered buttons be covered by that particular shade of middle dark grey? I think it should be some shade of blue (see second screenshot about the history menu with "./css/generalui/popup_items_hover_appearance_aero.css" selected).

Senza titolo

Senza titolo

Aris-t2 commented 3 years ago

@Thalon77 I must ask, are you using the latest files of this project? The "missing color on tabs toolbar" glitch was present in all 4.0.0 releases (final and pre) and was fixed later.

I think you are right, it is a good idea to offer the same blue colors for toolbar buttons currently offered for menu items when using Aero option.

Aris-t2 commented 3 years ago

image

default / hover / pressed image

EdwardKiefer commented 3 years ago

@Aris-t2

[Buttons]

(new) buttons on navigation toolbar > dark classic appearance (buttons_on_navbar_classic_appearance_dark.css)

Thanks, better job than my hack :).

Thalon77 commented 3 years ago

@Aris-t2 Using V 4.03 of your CSS after a clean restoration of firefox (erasing old profile, recreating it, loading everything backed up in my FF account) after the update to V91.

Aris-t2 commented 3 years ago

@Thalon77

Not sure why it is not working for you.

Try this code:

#main-window box #navigator-toolbox #TabsToolbar:not(:-moz-lwtheme){
  background-image: var(--tabs_toolbar_color_tabs_not_on_top) !important;
}

or 

#main-window box #navigator-toolbox #TabsToolbar:not(:-moz-lwtheme){
  background-image: linear-gradient(#ddebf9,#ddebf9) !important;
}
dinkydogs commented 3 years ago

@Aris-t2

Thank you! that last one did the trick. I appreciate your help and taking the time to do this project!

Thalon77 commented 3 years ago

@Aris-t2 I'm a bit confused because your last message didn't have user tags and I read another user thanking you: was that code for me and my color problem (I suspect it wasn't because nothingh changed using that code, maybe I will ask to the author of the colorful tabs extension considerint that the color mess is that extension's fault because it doesn't even work if I don't allow it to override FF default colors)?

Cobinja commented 3 years ago

Re #392 and this This makes the audio button on tabs appear on the right-hand side of the tab, just like pre-Proton:

.tab-icon-stack {
  position: absolute !important;
  top: 0px !important;
  height: 100% !important;
  width: calc(100% - 2 * (var(--inline-tab-padding))) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.tab-label-container {
  margin-left: calc(2 * var(--inline-tab-padding) + 8px) !important;
}

.tab-icon-stack:is([muted],[soundplaying],[activemedia-blocked]) ~ .tab-label-container {
  margin-right: calc(2 * var(--inline-tab-padding) + 8px) !important;
}

.tab-icon-overlay {
  padding: 0 !important;
}
.tab-icon-overlay:hover {
  background: none !important;
}
.tab-icon-stack:is([soundplaying], [muted], [activemedia-blocked]) > * {
  opacity: 1 !important;
}

Note: this quick'n'dirty hack does not take care of rtl languages and is only tested in Firefox 91 for Linux.

Aris-t2 commented 3 years ago

@Thalon77 No need to contact CT dev.

This code will also override tabs toolbar in your case:

#main-window box #navigator-toolbox #titlebar+#nav-bar,
#main-window box #navigator-toolbox #titlebar+#nav-bar+#PersonalToolbar,
#main-window box #navigator-toolbox #titlebar>#toolbar-menubar+#TabsToolbar {
  appearance: none !important;
  background: var(--general_toolbar_color_toolbars, inherit) !important;
}

@Cobinja Good job.

KamelittaOida commented 3 years ago

hello

I cannot figure out what /* button on navigation toolbar does in userchrome.css line 240, as of 2021/8/22

image

Thalon77 commented 3 years ago

@Aris-t2 Thanks a lot for the custom code, now it works and I can finally enjoy Firefox the way I want it to appear. I will drop the code in the colorful tabs extension's forums just in case others there need it.

Aris-t2 commented 3 years ago

@KamelittaOida If you disable appbutton_in_titlebar.css, the main menu button will reset to its default appearance on navigation toolbar. The marked settings allow to customize the button, when it is on navigation toolbar.

image

@Thalon77 Good idea.

KamelittaOida commented 3 years ago

@KamelittaOida If you disable appbutton_in_titlebar.css, the main menu button will reset to its default appearance on navigation toolbar. The marked settings allow to customize the button, when it is on navigation toolbar.

so 240 /* button in Firefox titlebar and 266 /* button in Firefox titlebar are mutually exclusive. ? may you can write into line 240 and 266 they are exclusive.

despecial commented 3 years ago 
#context-setDesktopBackground {
  display: none !important;
}

not working in 91. Any suggestions except changing FF's policies?

Aris-t2 commented 3 years ago

@KamelittaOida

I will add a note inside userChrome.css on next update.

@despecial 

#context-setDesktopBackground + menuseparator,
#context-setDesktopBackground {
  display: none !important;
}

This still works for me inside userChrome.css / my_userChrome.css even on later builds (Beta, Nightly).

despecial commented 3 years ago

That's weird. On the mac, only the policies solution worked. And searching the internet, other confirm the problem, too.

Aris-t2 commented 3 years ago

Its true about macOS. CSS can not change menus/menuitems on macOS by default. The code I posted was tested on Windows.

In the past, when Classic Theme Restorer was available, it offered JS scripts to modify/add/remove menuitems (on macOS), that could not be handled by CSS.

Achille-Grs commented 3 years ago

Good afternoon @Aris-t2 !!! In the pic below I made all the popups menu in dark color. As you can see, I encountered a difficulty and I don't know how to change this white parts of menu. Any idea how I change it? Thank you!!! Στιγμιότυπο οθόνης (1)

ghost commented 3 years ago

How can i change the border color of the urlbar/searchbar when using the dark theme? With the light theme the border looks great, but when i switch to the dark theme the border is not visible to me.

Light theme:

light_theme

Dark theme:

dark_theme
Aris-t2 commented 3 years ago

@Achille-Grs

Test

.PanelUI-subView {
  background: red !important;
}

@PorigonZ The option uses a default Firefox variable, but you can replace it with your own custom color.

https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/locationbar/urlbar_restore_visible_border.css

Replace var(--chrome-content-separator-color) with a color name, hexcode etc.

Example:

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

#urlbar:not([focused="true"]) #urlbar-background,
#urlbar[open="true"] #urlbar-background,
#urlbar[focused="true"][open="true"] #urlbar-background,
#searchbar:not(:focus-within) {
  border: 1px solid white !important;
}

#urlbar[focused="true"][suppress-focus-border] > #urlbar-input-container {
  border-top: 1px solid white !important;
  border-left: 1px solid white !important;
  border-right: 1px solid white !important;
}

#urlbar[focused="true"][suppress-focus-border][open="true"] > #urlbar-input-container {
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}
ghost commented 3 years ago

@Aris-t2 Thanks.