search

MrOtherGuy / firefox-csshacks

Collection of userstyles affecting the browser
Mozilla Public License 2.0
3.19k stars 312 forks source link

multi-row_tabs_below_content.css broken #401

Open simsai opened 2 weeks ago

simsai commented 2 weeks ago

image

menu? (idk name mb) bar is completely transparent for some reason

when firefox is full screened "below" tabs stop responding.

just incase tried using the css in combination with tabs on bottom menubar on top patch.css but that doesnt help either.

pasting in my userchrome.css as well, incase something may be conflicting, i doubt it but might as well(code is commented so instead of going thru all of it u can just search ' /* ' to get the gist(its urs with some slight modications :) ) ).

`#main-window #titlebar { overflow: hidden; transition: height 0.3s 0.3s !important; }

/ Hidden state: Hide native tabs strip /

main-window[titlepreface*=" "] #titlebar { height: 0 !important; }

/ Hidden state: Fix z-index of active pinned tabs /

main-window[titlepreface*=" "] #tabbrowser-tabs { z-index: 0 !important; }

:root { --autohide-sidebar-extended: 300px; / width of panel extended / --autohide-sidebar-collapsed: 40px; / width of panel collapsed / --sidebar-height: 100vh; }

/ --------Sidebery Auto-hiding Sidebar ----------- / / width of panel (grey box) (different from width of each tab) /

main-window:not([extradragspace="true"])

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden]) {
width: var(--autohide-sidebar-collapsed) !important;
min-width: unset !important;
z-index: 1;
transition: all 0.2s ease-in-out; /* doesn't do anything unless you uncomment lower bit of code */

}

/ width of panel (grey box) on hover / / uncomment this section if you want the webpage to move when your tabs are extended- otherwise covers /

main-window:not([extradragspace="true"])

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden]):hover {
width: var(--autohide-sidebar-extended) !important;
min-width: unset !important;
z-index: 1;

}

/ width of tabs /

main-window:not([extradragspace="true"])

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar {

width: var(--autohide-sidebar-collapsed) !important; transition: all 0.2s ease-in-out; } / width of tabs on hover /

main-window:not([extradragspace="true"])

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover #sidebar {

width: var(--autohide-sidebar-extended) !important; }

/ adjust if your sidebery is not tall enough /

main-window:not([extradragspace="true"])[inFullscreen]

sidebar-box[sidebarcommand="3c078156-979c-498b-8990-85f7987dd929-sidebar-action"],

main-window:not([extradragspace="true"])

sidebar-box[sidebarcommand="3c078156-979c-498b-8990-85f7987dd929-sidebar-action"] {

height: var(--sidebar-height);

}

:root{ --uc-icon-glow-primary: cyan; --uc-icon-glow-secondary: cadetblue; --uc-icon-glow-hover-primary: green; / Changed hover color to green / --uc-icon-glow-hover-secondary: green; / Changed hover color to green / }

/ Make backgrounds transparent / .close-icon, .urlbar-icon, .urlbar-icon-wrapper, toolbar .toolbarbutton-1,

tabbrowser-tabs toolbarbutton,

toolbar toolbarbutton > .toolbarbutton-icon, toolbar toolbarbutton > .toolbarbutton-badge-stack, .titlebar-button,

identity-box,

.identity-box-button,

tracking-protection-icon-container,

.findbar-textbox~toolbarbutton, toolbarbutton.scrollbutton-up, toolbarbutton.scrollbutton-down, toolbarbutton#scrollbutton-up, toolbarbutton#scrollbutton-down{ background-color: transparent !important; border-color: transparent !important;

/* Apply the glow effect by default */
filter: drop-shadow(0 0 1px var(--uc-icon-glow-secondary)) drop-shadow(0 0 4px var(--uc-icon-glow-primary)) !important;

}

/ Apply hover effect / .close-icon:hover, .urlbar-icon:hover, .urlbar-icon-wrapper:hover, toolbar .toolbarbutton-1:hover,

tabbrowser-tabs toolbarbutton:hover,

toolbar toolbarbutton > .toolbarbutton-icon:hover, toolbar toolbarbutton > .toolbarbutton-badge-stack:hover, .titlebar-button:hover,

identity-box:hover,

.identity-box-button:hover,

tracking-protection-icon-container:hover,

.findbar-textbox~toolbarbutton:hover, toolbarbutton.scrollbutton-up:hover, toolbarbutton.scrollbutton-down:hover, toolbarbutton#scrollbutton-up:hover, toolbarbutton#scrollbutton-down:hover { filter: drop-shadow(0 0 1px var(--uc-icon-glow-hover-secondary)) drop-shadow(0 0 4px var(--uc-icon-glow-hover-primary)) !important; }

/ No need for separate hover and active states since the glow is always on / / You can remove or comment out the following blocks of code / /* .close-icon:hover, .urlbar-history-dropmarker:hover,

page-action-buttons > .urlbar-icon:hover,

.urlbar-icon-wrapper:hover > .urlbar-icon, toolbar .toolbarbutton-1:not([disabled]):hover .toolbarbutton-icon,

TabsToolbar toolbarbutton:not([disabled]):hover .toolbarbutton-icon,

toolbar #downloads-button:hover #downloads-indicator-anchor, .identity-box-button:hover,

tracking-protection-icon:hover,

.findbar-textbox~toolbarbutton:not([disabled]):hover, toolbarbutton.scrollbutton-up:not([disabled]):hover, toolbarbutton.scrollbutton-down:not([disabled]):hover, toolbarbutton#scrollbutton-up:not([disabled]):hover, toolbarbutton#scrollbutton-down:not([disabled]):hover{ filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary)) }

titlebar .titlebar-buttonbox > .titlebar-close:hover > .toolbarbutton-icon,

.close-icon:active, .urlbar-history-dropmarker:active,

page-action-buttons > .urlbar-icon:active,

page-action-buttons > .urlbar-icon[open],

.urlbar-icon-wrapper:active > .urlbar-icon, .urlbar-icon-wrapper[open] > .urlbar-icon, toolbar toolbarbutton:not([disabled]):active .toolbarbutton-icon, toolbar toolbarbutton:not([disabled])[open] .toolbarbutton-icon,

TabsToolbar toolbarbutton:not([disabled]):active .toolbarbutton-icon,

toolbar #downloads-button:active #downloads-indicator-anchor, toolbar #downloads-button[open] #downloads-indicator-anchor, .identity-box-button:active,

tracking-protection-icon-container[open] #tracking-protection-icon,

.findbar-textbox~toolbarbutton:not([disabled]):active, toolbarbutton.scrollbutton-up:active, toolbarbutton.scrollbutton-down:active, toolbarbutton#scrollbutton-up:active, toolbarbutton#scrollbutton-down:active{ filter: drop-shadow(0 0 2px var(--uc-icon-glow-hover-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-hover-primary)) } */

/ Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/button_effect_scale_onhover.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. / / Global Transition for all targeted elements / .close-icon, .urlbar-icon, .urlbar-icon-wrapper, toolbar .toolbarbutton-1,

tabbrowser-tabs toolbarbutton,

toolbar toolbarbutton > .toolbarbutton-icon, toolbar toolbarbutton > .toolbarbutton-badge-stack, .titlebar-button,

identity-box,

.identity-box-button,

tracking-protection-icon-container,

.findbar-textbox~toolbarbutton, toolbarbutton.scrollbutton-up, toolbarbutton.scrollbutton-down, toolbarbutton#scrollbutton-up, toolbarbutton#scrollbutton-down, / Previous targets / .urlbar-input-container [role="button"] image, .tab-close-button, .downloadIconShow > .button-box > .button-icon, .menuitem-iconic .menu-iconic-icon,

downloads-indicator-icon {

transition: transform 83ms linear !important; / Smooth transition for scaling / }

/ Initial State: No scaling (normal size) / .close-icon, .urlbar-icon, .urlbar-icon-wrapper, toolbar .toolbarbutton-1,

tabbrowser-tabs toolbarbutton,

toolbar toolbarbutton > .toolbarbutton-icon, toolbar toolbarbutton > .toolbarbutton-badge-stack, .titlebar-button,

identity-box,

.identity-box-button,

tracking-protection-icon-container,

.findbar-textbox~toolbarbutton, toolbarbutton.scrollbutton-up, toolbarbutton.scrollbutton-down, toolbarbutton#scrollbutton-up, toolbarbutton#scrollbutton-down, / Previous targets / .urlbar-input-container [role="button"] image, .tab-close-button, .downloadIconShow > .button-box > .button-icon, .unified-extensions-item-menu-button > .toolbarbutton-icon,

downloads-button #downloads-indicator-icon,

.menuitem-iconic .menu-iconic-icon { transform: scale(0.95); / Default scale: 1 (100%) / }

/ Hover Effect: Scale up to 1.5 times the original size / .close-icon:hover, .urlbar-icon-wrapper:hover, / Assuming you want the whole wrapper to scale / toolbar .toolbarbutton-1:not([disabled]):hover,

tabbrowser-tabs toolbarbutton:not([disabled]):hover,

toolbar toolbarbutton:not([disabled]):hover > .toolbarbutton-icon, toolbar toolbarbutton:not([disabled]):hover > .toolbarbutton-badge-stack, .titlebar-button:not([disabled]):hover,

identity-box:hover, / Assuming you want the whole box to scale /

.identity-box-button:not([disabled]):hover,

tracking-protection-icon-container:hover, / Assuming you want the whole container to scale /

.findbar-textbox~toolbarbutton:not([disabled]):hover, toolbarbutton.scrollbutton-up:not([disabled]):hover, toolbarbutton.scrollbutton-down:not([disabled]):hover, toolbarbutton#scrollbutton-up:not([disabled]):hover, toolbarbutton#scrollbutton-down:not([disabled]):hover, / Previous targets / .urlbar-input-container [role="button"]:not([disabled]):hover image, .tab-close-button:hover, .downloadIconShow:hover > .button-box > .button-icon,

downloads-button:not([disabled]):hover #downloads-indicator-icon,

.menuitem-iconic:not([disabled]):hover .menu-iconic-icon, .urlbar-page-action:hover > .urlbar-icon { transform: scale(1.2) !important; / Scale up to 150% on hover / }

/ Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/show_urlbar_button.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. /

/ This style hides urlbar, but instead shows a button that shows the urlbar when clicked, technically the button is the urlbar - just styled to look like a button. Urlbar also gets shown when it is focused by e.g. Ctrl+L /

wrapper-urlbar-container,

urlbar-container{

flex-grow: 0 !important; width: 34px !important; position: static !important; } :root[customizing] #urlbar-container{ min-width: 60px; }

urlbar{

contain: inline-size; width: 34px !important; }

urlbar:focus-within{

width: 27vw !important; z-index: 1; /inset-inline: 15vw !important;/ } :root:not([customizing]) #urlbar:not(:focus-within) > #urlbar-background{ background: transparent !important; border-color: transparent !important; } :root:not([customizing]) #urlbar:not(:focus-within):hover > #urlbar-background{ background: var(--toolbarbutton-hover-background) !important; }

urlbar:not(:focus-within) #page-action-buttons,

urlbar:not(:focus-within) #identity-box,

.urlbar-input-container:not(:focus-within){ display: grid; } :where(#urlbar):not(:focus-within) #page-action-buttons > , :where(#urlbar):not(:focus-within) #identity-box > , .urlbar-input-container:not(:focus-within) > *{ grid-area: 1/1; opacity: 0; pointer-events: none; } .urlbar-input-container:not(:focus-within){ background-image: url("chrome://devtools/skin/images/tool-webconsole.svg"); background-repeat: no-repeat; background-position: center; color: var(--toolbar-color); fill: light-dark(rgb(91, 91, 102), rgb(251, 251, 254)); -moz-context-properties: fill; } :root[lwtheme] .urlbar-input-container:not(:focus-within){ fill: var(--toolbarbutton-icon-fill); } .urlbar-input-box.urlbar-input-box{ opacity: 1; width: 100%; pointer-events: auto; }

urlbar:not(:focus-within) #identity-icon-label{

display: none; }

page-action-buttons > [open],

identity-box > [open],

.urlbar-input-container:not(:focus-within) > :has([open]){ opacity: 1; background-color: var(--toolbar-bgcolor); }

urlbar-input:not(:focus-within){

opacity: 0; cursor: default; } / Make flexible spaces have unlimited width so that they can claim empty space that urlbar would normally claim /

nav-bar-customization-target > toolbarspring{

max-width: none !important; }

/ Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs_below_content.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. /

/* Makes tabs to appear on multiple lines below the web content

/* SETTINGS (you need to create and set these prefs to true in about:config)

`

simsai commented 2 weeks ago

update-tabs_below_content.css seems to be working perfectly,its just multi row thats broken

ps - ignore the horrible themeing in the pic i was messing around when i got distraced

MrOtherGuy commented 2 weeks ago

You're right, this issue (window becoming transparent) can happen if your theme sets --toolbar-bgcolor to transparent. That style had bunch of other issues as well - mostly caused by old leftover code. In 5b944c9 I've updated the style and fixed what I could - hopefully not implementing new and exiting bugs in the process.

simsai commented 2 weeks ago

" this issue (window becoming transparent) " - thats honestly workable with and not really a problem but the main issue is that the tabs are unresponsive while the window is maximised

MrOtherGuy commented 2 weeks ago

I cannot reproduce tabs becoming unresponsive - they appear to work fine in normal, maximized and fullscreen windows, even if I apply all the other rules you posted.

simsai commented 2 weeks ago

i tried using ur updated file and that has fixed the tabs unresponsiveness, thank you. however the top bar is now not picking the browser theme and theres padding on the right side but no icons

image

simsai commented 2 weeks ago

so what ive done instead is commented this part 

  /*#TabsToolbar > .titlebar-buttonbox-container{
    display: none !important;
  }  */

and

set these to 0 to get rid of the padding 

   --uc-window-drag-space-width: 0px;
    --uc-window-control-width: 0px;
  }
  :root[inFullscreen]{
    --uc-window-drag-space-width: 0px;
  }
  @media (-moz-gtk-csd-available){
    :root{
      --uc-window-control-width:  0px;
    }

dont really know why theres "drag space" when u can just drag from the center

but bar isnt picking up my theme

MrOtherGuy commented 2 weeks ago

I deliberately didn't make the main toolbar use images from theme, because I thought it would look weird if image is shown both above and below web content. Moreover, there some complications with that depending on how the theme is using the images. Having images show up is not wrong IMO, just that not using them was the safe option for now.

The empty space should show you window controls though, the style instructs you to enable menubar to which is needed to make them show up. Then the menubar itself behaves rather differently from normal.

simsai commented 2 weeks ago

i enabled menubar in config, controls still didnt show up and there was just some extra space at the top . as for the toolbar, i understand ur point but if i wanted to make it use the theme, as that is what it was doing before, how would i do that? (also i did open a pull req for one of your other files, if u can just give it a look)

MrOtherGuy commented 2 weeks ago

Having theme images show there correctly is pretty complicated, especially considering that they should show and be correctly aligned for case where you have static menubar up there as well. But I've added that feature now.

However, I don't really understand why window controls don't show up for you, some platform specific rules is likely the cause though.

simsai commented 1 week ago

nope toolbar still doesnt show theme

MrOtherGuy commented 1 week ago

Can you share a link to a theme where it doesn't work - I've tried a bunch and background-images work on all of them - although I just noticed that the toolbar background-color is not drawn on top of the image anymore...