search

Aris-t2 / CustomCSSforFx

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

General discussions, feedback, questions belong here (v1, v2 -outdated- use v3) #3

Closed Aris-t2 closed 6 years ago

Aris-t2 commented 6 years ago

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.

Trying to makes CSS code Firefox 57+ ready? 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

reuk334 commented 6 years ago

Can I possible modify about:(...) pages with userContent.css file?

Acid-Crash commented 6 years ago

Yes, guess this is doable. It would be great if Aris has plans to add such functionality in future. To be precise I'm interested in about:addons tweaks:

Aris-t2 commented 6 years ago

I was under the impression about:... pages were not changeable in Firefox 57+, but it seems I was wrong. Thanks for the info.

Acid-Crash commented 6 years ago

Happy to Help, Aris I had some issues with them too. Guess it was because i used @namespace url(http://www.w3.org/1999/xhtml); instead of @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

Anyways currently this one works fine for me.

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons) {

#category-recentUpdates[disabled] {
    opacity: 1 !important;
    min-height: 48px !important;
}
#category-discover {visibility: collapse !important;}
.addon {counter-increment: addoncount !important; content: counter(addoncount) !important;}
.addon:first-child {counter-reset: addoncount !important;}
.addon[active="false"] {counter-increment: disabled !important;}
#addon-list:after {
    display: block !important;
    width: 120px !important;
    content: "[ "counter(addoncount)" Включено | "counter(disabled)" Отключено ]" !important;
    color: #444444 !important;
    text-align: center !important;
    white-space: nowrap !important;
    position: fixed !important;
    top: 11px !important;
    left: calc(50% - 112px) !important;
    cursor: default;}
}
Aris-t2 commented 6 years ago

I'm currently looking into CTRs alternative appearances for about:addons and about:preferences. Not only most of the code is portable, some other nice stuff is possible too.

v

reuk334 commented 6 years ago

Maybe change search positon in settings (about:preferences), I propose tests:

/* search in right top corner */
    .search-container {
      background: transparent !important;
      position: fixed !important;
      width: auto !important;
      top: 60px !important;
      z-index: 1 !important;
      right: 60px !important;
    }

/* repair margin after change position search box */    
    .pane-container {
      margin: 30px 0 0 0 !important;
    }
big window smaller window
big window smaller window
Aris-t2 commented 6 years ago

To be honest, the search box overlay bugs me. Its kind of annoying, that is actually can overlap with pages content. I think a better approach is keeping it as contents first "item" and make it disappear while scrolling, so it becomes a default page item like everything else.

.search-container {
  background: transparent !important;
  position: absolute !important;
  top: 20px !important;
}

prefs

Further more I will tweak the small window case so content and search box are still visible even on smaller windows. Currently small width corrupts/moves some areas the way they should not.

Acid-Crash commented 6 years ago

Hi Aris, Do you have any plans on adding Australias style (default-one from FF56) module for tabs? Also could you give some details whether number of included @import url(.*.css) inside userCrome.css affects browser speed in any way?

Aris-t2 commented 6 years ago

I have no plans to work on curved tabs, I'm glad they are gone. ;-) They were the main reason I started to work on CTR back then.

No idea about how or if many imports have an affect on browsers speed/performance issue. Testing in Portable Firefox on a very old slow usb 1.1 stick might give some insight, if anyone wants to test.

happysurf commented 6 years ago

Aris, great work as always. How hide the separator near to hamburger icon in 57+?

Aris-t2 commented 6 years ago

I will add the code to next update.

#PanelUI-button {
  margin-inline-start: 0px !important;
  border-inline-start: 0px solid !important;
  border-image: unset !important;
  border-image-slice: 0 !important;
}
Acid-Crash commented 6 years ago

Hi Aris, I have I minor suggestion regarding classic_button_appearance_on_navbar. Current module adds squared style buttons to navbar. CTB offered an option to make those buttons rectangular. navbarbuttons

Maybe you consider adding some more customization for those buttons (aka additional module to make them rectangular instead of squared) P.S. Button height is totally fine here perfectly matched with addressbar

happysurf commented 6 years ago

Other interesting codes to add that I use:

/ Find Bar on top / .browserContainer findbar, #viewSource #FindToolbar { -moz-box-ordinal-group: 0; width: 100% !important; }

/ Global text size UI / * { font-size: 10pt !important; }

/ Active tab text in bold / .tabbrowser-tab[selected="true"] { font-weight: bold !important; }

happysurf commented 6 years ago

Aris, is possible make in bold or change the color of the host in Location Bar?

host

Aris-t2 commented 6 years ago

@Acid-Crash I will look into it. EDIT The main problem with modifying button appearance is still even in Firefox57+ the non-standardized button appearance for all toolbar buttons. We have buttons with and without badges, we have buttons with special indicator cases like downloads button, action buttons, WebExtension buttons, which Firefox is handling differently compared to default buttons... Creating such a toolbar buttons CSS modification would mean to take care of many buttons individually. I will add experimental code, but can't promise it will work for all buttons.

@happysurf

happysurf commented 6 years ago

here is the code to set a custom location bar background color (will be added to this collection):

Thank you for reply but I don't want change the background but only the host text, in my screenshot is github.com.

Aris-t2 commented 6 years ago

Noticed that, edited message afterwards. ;-)

Acid-Crash commented 6 years ago

@Aris-t2. Thx for the update regarding those buttons. Experimental code will do. On the other hand I totally agree that if 2-4 pixels increase requires major changes and constant oversight for other buttons, it doesn't worth it so I will not be so sad about it.

@happysurf If you need to get rig of that light gray color for the domain part, you could flip browser.urlbar.formatting.enabled in about:config

happysurf commented 6 years ago

An other useless separator that take too much space in Location Bar when the Reader View is available. Will be great hide the separator and move the Reader icon more close to the dots.

Inactive: separator2

On mouse over: separator

Aris-t2 commented 6 years ago 
#urlbar-container #pageActionSeparator{
  visibility: collapse !important;
}
stampis commented 6 years ago

Is there or will there be anyway to create new toolbars for the locationbar? like such: demo

(excuse my poor paint skills, removed some text etc..)

Aris-t2 commented 6 years ago

You can not create new toolbars at the moment. Nobody knows, if something changes once Mozilla releases a new toolbar API. They were supposed to come with something up for Firefox 57, but they didn't.

Acid-Crash commented 6 years ago

Hi Ares, Don't know whether this is a bug or a Design choice. In modules

border-radius is set to 12px. I've noticed that when using a compact density mode affected elements have min-height/height set to 26px. Hence for maybe that roundness should be 13px instead of 12px?

Aris-t2 commented 6 years ago

12px was the max value in Classic Toolbar Button, so I just adopted it.

daveranan commented 6 years ago

Is there a way to copy default theme styles and modify those? All I really want is to use default Dark theme but with the background and tabs styles from the Default theme. Dark theme is nice and easy on the eye but that complete dark background on tabs is retarded, no contrast what so ever.

Aris-t2 commented 6 years ago

You can look into default compact theme file and use any code you like: chrome://browser/skin/compacttheme.css

Achille-Grs commented 6 years ago

Hi Aris and thank you for this beautiful settings in Firefox 57 (text from translator)

I have an issue with the download button. In file "buttons_on_navbar_classic_appearance.css" I added "width 90px - height 25px" and all buttons works perfect, except the dowload button when I press it, fails. (see pic). Ιs there a way to fix it? ff

Thanks! P.S: I made a css file with Bookmarks multiple lines if you want it.

Aris-t2 commented 6 years ago

You have found Mozillas most complex button. It has multiple internal layers, which have to be adjusted once button size changes in some cases.

#downloads-button
#downloads-button .toolbarbutton-badge-stack
#downloads-button .toolbarbutton-text
#downloads-button .toolbarbutton-badge-stack .toolbarbutton-icon
#downloads-button .toolbarbutton-badge-stack .toolbarbutton-badge
#downloads-button .toolbarbutton-badge-stack #downloads-indicator-anchor
#downloads-button .toolbarbutton-badge-stack #downloads-indicator-anchor #downloads-indicator-icon
#downloads-button .toolbarbutton-badge-stack #downloads-indicator-anchor #downloads-indicator-progress-outer
#downloads-button .toolbarbutton-badge-stack #downloads-indicator-anchor #downloads-indicator-progress-outer #downloads-indicator-progress-inner

Here is the code you need for your button width:

#nav-bar toolbarbutton .toolbarbutton-icon,
#nav-bar toolbarbutton .toolbarbutton-badge-stack {
  width: 90px !important;
  height: 25px !important;
}
#nav-bar .webextension-browser-action .toolbarbutton-icon,
#nav-bar #downloads-button #downloads-indicator-anchor {
  margin-left: 32px !important;
  margin-right: 32px !important;
}

(The .webextension-browser-action part is for buttons like uBlock Origins).

Share your bookmarks multiple lines code. I could add it to this collection too.

Achille-Grs commented 6 years ago

Thank you sooo much! Now work Perfecty! :-)

Here is the the code.

/ bookmarks multiple lines /

personal-bookmarks {

display:block; }

personal-bookmarks #PlacesToolbar {

display:block; min-height: 0px; overflow-x:hidden; overflow-y:auto; max-height: 999px; }

personal-bookmarks #PlacesToolbar > hbox {

display: -moz-stack !important; left:0px; right:0px; width: 100%; }

personal-bookmarks #PlacesToolbar #PlacesToolbarItems {

/display:block;/ overflow-x:visible; overflow-y:visible; }

personal-bookmarks #PlacesToolbar #PlacesToolbarItems > box {

display:block; }

personal-bookmarks #PlacesToolbar > .bookmark-item{

visibility: visible !important; }

personal-bookmarks #PlacesToolbar .chevron{

display:none; }

personal-bookmarks #PlacesToolbar > hbox > hbox{

overflow-x:hidden; overflow-y:hidden; }

personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator[collapsed="true"]{

display:none; }

personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator{

display:none; }

personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item{

padding-top: 2px; padding-bottom: 2px; margin-left: -4px !important; padding-right: 10px !important; }

personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item:hover:active:not([disabled="true"]),

personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item[open="true"] {

padding-top: 2px !important; padding-bottom: 2px !important; -moz-padding-start: 4px; -moz-padding-end: 2px; }

personal-bookmarks #PlacesToolbar toolbarseparator{

-moz-appearance: none !important; visibility: visible !important; display:inline; text-shadow: none !important; border-left: 3px solid ThreeDShadow !important; border-right: 3px solid ThreeDHighlight !important; vertical-align: left; }

personal-bookmarks toolbarbutton.bookmark-item[dragover][open]{

-moz-appearance: toolbarbutton; }

Aris-t2 commented 6 years ago

@Achille-Grs Does the code work for you with more than two rows?

Achille-Grs commented 6 years ago

oops! Finaly only two lines works. Hmm... in Firefox 56 works fine. but in 57.......? something is wrong and I don't know what to fix. Maybe you can find the solution.

Achille-Grs commented 6 years ago

Multirow.zip

MrGlasspoole commented 6 years ago

Some questions:

  1. Will it ever be possible to update your code through Firefox? Or maybe at least a Add-on that notifies about a new version?

  2. Is it possible to move reload/stop into the location bar?

Aris-t2 commented 6 years ago

@Achille-Grs I kinow that add-on. Didn't it stop working properly a long time ago?

@MrGlasspoole

  1. The code here is unrelated to Firefox/Mozilla servers. There won't be any "add-on/WE" notifier for this from me. There are however multiple Github notifier WEs on AMO, so they might help you with that, but the easiest way is in my opinion is to create a dynamic bookmark. No add-ons/WEs are required for that.

Visit https://github.com/Aris-t2/CustomCSSforFx/releases and click on your RSS/feed button. Add a dynamic folder to your bookmarks toolbar.

1

  1. There are multiple WebExtensions, that already can do that. For example (there are also others): https://addons.mozilla.org/addon/reload-in-address-bar/ https://addons.mozilla.org/addon/australis-refresh-in-url-bar/
Achille-Grs commented 6 years ago

@Aris-t2 The last update of this addon was 6/22/2016 https://addons.mozilla.org/el/firefox/addon/multirow-bookmarks-toolbarplus/?src=ss In firefox 55 I decided to use Stylish addon. I make copy-paste the code of Multirow Bookmarks and then delete it to make the firefox as lighter as possible from unused addons. Until that day the addon was working flawlessly.

Achille-Grs commented 6 years ago

@Aris-t2 As you can see in the picture, it is firefox 56 with stylish addon with css code for multiple lines and works fine. I realy hope you make it and fix this! :-) Also on the tab new:tab I made the background transparency. It also does not work on firefox 57. ff 56

motfis commented 6 years ago

Can we make the icon in the library menu colored?

capture
Aris-t2 commented 6 years ago

@Achille-Grs Mozilla did some changes to bookmarks toolbar, maybe that is why the Fx56 code for multirow bookmarks does not work. I haven't looked into it.

You achieved transparency with Stylish before not through userChrome/usedrContent, right?

@motfis Sure, except "Screenshots", can't find its id in popup.

Achille-Grs commented 6 years ago

@Aris-t2 Yes! The transparency I haved it 2 years ago. Here it is the old code:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @media all and (-moz-windows-compositor) {

main-window[stylish-url="about:newtab"]:not([onclose="PrintUtils.exitPrintPreview(); return false;"]) #content browser,

main-window[stylish-url=" "]:not([onclose="PrintUtils.exitPrintPreview(); return false;"]) #content browser {

opacity: 0 !important; background-color:transparent !important; }

main-window[stylish-url="about:newtab"]:not([onclose="PrintUtils.exitPrintPreview(); return false;"]) #content,

main-window[stylish-url=" "]:not([onclose="PrintUtils.exitPrintPreview(); return false;"]) #content{

background-color: rgba(255,255,127,.0) !important; }

appcontent, #content > tabbox > tabpanels {

background-color: transparent !important; } }

I made copy-paste the code witthout the firsts two lines, but nothing happened.

dimqua commented 6 years ago

Is it possible at all to restore the old search-bar? I can't find any WE addon for this purpose.

Aris-t2 commented 6 years ago

I know this code from GlassMyFox. It relies on Stylish DOM access. No Stylish, not transparent tab.

This code makes all content transparent, but there is no way to use it for a specific page as it has to be applied on a level above the page, so @-moz-document won't help here either.

    #main-window #content browser { 
        opacity: 0 !important;
        background-color: transparent !important;
    }
    #main-window #content{
        background-color: rgba(255,255,127,.0) !important;
    }
    #appcontent, #content > tabbox > tabpanels {
        background-color: transparent !important;
    }

It is possible to rebind the old search bar code, but it does not work properly. Because of that it is not part of this collection.

Achille-Grs commented 6 years ago

@Aris-t2 Ok... no problem. I can live without the transparent in my new:tab. LoL :-) Now the firfox is exactly as I wanted it to be. The only thing left to do is to get smaller urlbar height. I tryed everywhere in the code to give height 25px as I did in the buttons but.... without result.

dimqua commented 6 years ago

I can't move the Pocket button, for example:

#pocket-button {
  -moz-box-ordinal-group: 100 !important;
}

This does not work. Why?

Aris-t2 commented 6 years ago

Pocket button is inside its own box. You have to move the whole box.

#pocket-button-box

Further more you have to disable "starbutton_is_last_pageaction_button" and "dropmarker_at_the_end". Both are enabled by default in this collection.

dimqua commented 6 years ago

I want to do the same trick with buttons of the Reload in address bar addon.

But how can I get an ID of this addon's buttons?

BTW, why is Reload in address bar (or an alternative) not supported by this project?

Aris-t2 commented 6 years ago

Tools > WebDeveloper > Toggle Tools > Toolbox Options > Enable browser chrome and add-on debugging toolboxes / Enable remote debugging Tools > WebDeveloper > Browser Toolbox

Now you can look for specific item ids, classes etc. like in Dom Inspector on older Firefox, but with less comfort.

"This project" does not create any new buttons. Its not a WebExtension, only a collection of user styles (CSS). Or did you mean why reload button of that extension is not colorized in this project? The id of Reload in address bar add-ons button is 

#_e1ed7a80-7c11-4f7e-968b-79b551a0067f_-page-action

Regarding "the same trick": the code for awesome rss was experimental and did not work. I forgot to remove it. That add-on offers different icons on its options page.

Aris-t2 commented 6 years ago

@Achille-Grs

Change urlbar height with this:

#urlbar,
.searchbar-textbox {
  margin: 1px 2px !important;
  min-height: 0px !important;
  height: 24px !important;
}
SXZ1 commented 6 years ago

Hello, Aris! I am currently trying to do the following: drag History icon to the navigation toolbar, click on it, there is "Recently closed tabs" folder. Is it possible to move the contents of this folder to the root of History icon menu (where "Recent history" is located)? Thank you!

Aris-t2 commented 6 years ago

No, you can't move menus/menuitems/folders to a different level/node using CSS. Changes are only possible on the same level.

NXij commented 6 years ago

Is it theoretically possible to unlock the placement of the urlbar (make them draggable again) via -moz-binding and XML override?

Nevermind, the XML files in the repo shouldn't work anyways anymore.