diff --git a/chrome/userChrome.css b/chrome/userChrome.css index 0fe78d6..ff01e2f 100644 --- a/chrome/userChrome.css +++ b/chrome/userChrome.css @@ -3,10 +3,11 @@ :root { --6: 6px; --8: 8px; - --tab-min-height: 24px !important; - --tab-min-width: 24px !important; - --toolbarbutton-border-radius: var(--6) !important; - --tab-border-radius: var(--6) !important; + --tab-min-height: 28px !important; + --tab-min-width: 28px !important; + --toolbarbutton-border-radius: var(--8) !important; + --tab-border-radius: var(--8) !important;#TabsToolbar { + } --main: #77777770; --item: #77777730; --grey: #b8b8b8; @@ -342,7 +343,7 @@ tab:not([pinned]):hover .tab-close-button { -/* 🔗 URLBAR Inbut https: */ +/* 🔗 URLBAR Input https: */ #urlbar-input { transition: transform 0.1s linear; transform: none !important; @@ -351,114 +352,208 @@ tab:not([pinned]):hover .tab-close-button { padding-inline: 0px !important; } + + /* 📐 URLBAR in Tab */ -/* Source: https://github.com/MrOtherGuy/firefox-csshacks/.../selected_tab_as_urlbar.css */ -#main-window > body > box { - position: relative; - z-index: 1; -} -.urlbar-input-box { - z-index: -1 !important; -} +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/selected_tab_as_urlbar.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +/* This is a horrible hack and absolutely requires click_selected_tab_to_focus_urlbar.css to work. In general it's pertty bad, but meh */ + +/* Also hides the nav-bar and shows main menu button next to window controls. And makes the selected tab expand a whole bunch */ + +/* Whole bunch of z-indexing */ +#main-window > body > box{ position: relative; z-index: 1 } +.urlbar-input-box{ z-index: -1 !important; } +#urlbar{ z-index: auto !important; } #alltabs-button, #unified-extensions-button, #PanelUI-button, -#nav-bar-overflow-button { - z-index: 2; - position: relative; +#nav-bar-overflow-button{ z-index: 2; position: relative } + +#urlbar-input-container{ + width: calc(100vw - var(--uc-window-control-width) - var(--uc-buttons-width) - 2 * var(--uc-window-drag-space-width) - 76px) !important; + left: calc(76px + var(--uc-window-drag-space-width)) !important; + pointer-events: none; + overflow: visible !important; } -#urlbar-input-container > :not(.urlbar-input-box) { - opacity: 0; +:root:not([customizing]) #urlbar-input-container::before{ + position: absolute; + left: 0; + top: 0 !important; + height: var(--urlbar-container-height); } -#urlbar-background { - background: none !important; +#urlbar-input-container > :not(.urlbar-input-box){ opacity: 0 } + +#urlbar-background{ + background: transparent !important; + border: none !important; + box-shadow: none !important; + outline: none !important; } -#urlbar-container { +#urlbar{pointer-events: none !important;} +#urlbar-container{ position: static !important; + margin-left: var(--uc-window-control-width) !important; } -.urlbarView { - background: var(--item); +#remote-control-box, +#urlbar-search-button{ + display: none; +} +#tracking-protection-icon-container, +#identity-box{ + max-width: 0.1px; + padding-inline: 0 !important; +} +.urlbarView{ + background: var(--toolbar-field-focus-background-color); + border: 1px solid var(--toolbar-field-focus-border-color) !important; z-index: 1; - padding: var(--6); - border-radius: var(--6); - left: 50vw; - width: max(50vw, 320px) !important; + padding: 6px; + border-radius: 6px; + box-shadow: 0 0 26px #444; + left:50vw; + width: max(70vw,600px) !important; transform: translateX(-50%) !important; } -#nav-bar { - height: var(--tab-min-height) !important; - background-color: transparent !important; + +.tabbrowser-tab[selected][fadein]{ + max-width: 100vw !important; + min-width: 200px !important; + flex-grow: 300 !important; } -/* 📐 Click Tab to Focus Urlbar */ -/* Source: https://github.com/MrOtherGuy/firefox-csshacks/.../click_selected_tab_to_focus_urlbar.css*/ +#navigator-toolbox:focus-within .tabbrowser-tab[selected] .tab-content{ + opacity: 0; +} +#navigator-toolbox:focus-within .tab-background[selected]{ + background-image: -moz-element(#urlbar-input) !important; + background-position: calc(var(--tab-inline-padding,4px) + 6px) 3px !important; + background-color: var(--toolbar-field-focus-background-color) !important; + background-size: auto !important; +} -/* Make selected tab unclickable => click > capture box */ -.tabbrowser-tab:not([pinned])[selected] { - pointer-events: none; +:root:not([customizing]) #titlebar{ margin-bottom: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin)); } + +/* Oh and! also hide other buttons from the nav-bar because why not */ +:root:not([customizing]) #nav-bar-customization-target > :not(#urlbar-container){ visibility: collapse } +#TabsToolbar > .toolbar-items{ + margin-right: 112px !important; /* This is space on right side for 3 buttons, menu, overflow and addons */ + margin-left: 80px !important; +} + +#downloads-button { + visibility: visible !important; } -/* Retore pointer-events for usability */ +#urlbar-input { + text-align: center; +} + +#unified-extensions-button{ + visibility: visible !important; +} +#back-button, #forward-button{ + order: -1; + z-index: 2; + visibility: visible !important; +} + +/* By default this style moves your back and forward buttons to the left edge of the navbar and adds a placeholder space for them. + Set the following pref to false to disable that behavior */ +@media (-moz-bool-pref: "userchrome.selected-tab-as-urlbar.nav-buttons-space.disabled"){ + #TabsToolbar > .toolbar-items{ margin-left: 0px !important; } + #nav-bar-customization-target{ margin-left: 0px !important; } + #back-button, #forward-button{ + order: auto; + z-index: auto; + } +} + +#nav-bar{ + height: calc(var(--tab-min-height) + 2*var(--tab-block-margin)); + box-shadow: none !important; + background-color: transparent !important; +} +#titlebar:has(> [autohide="true"]) + #nav-bar{ + padding-right: calc(138px + 40px); +} + +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/click_selected_tab_to_focus_urlbar.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +/* Clicking selected tab selects focuses urlbar */ +/* Selected tab cannot be normally clicked (right-,middle- or left-clicked) EXCEPT from the tab icon */ + +/* Clicking selected pinned tab doesn't focus urlbar by default since I expect you might not want to change pinned tab address - see below */ + + +/* Make selected tab unclickable so click goes to the capture box, obviously it can't be clicked at all anymore */ +/* remove the :not([pinned]) bit to make clicking pinned tab AROUND the tab-icon focus urlbar*/ + +.tabbrowser-tab:not([pinned])[selected]{ pointer-events: none } + +:root{ + --uc-window-control-width: 138px; + --uc-buttons-width: 116px; + --uc-window-drag-space-width: 40px; + --uc-menubar-height: 0px; +} +@media (-moz-platform: windows), + (-moz-platform: linux){ + :root:is([sizemode="maximized"],[sizemode="fullscreen"]){ + --uc-window-drag-space-width: 0px; + } + #titlebar:has(> [autohide="false"]) + #nav-bar{ + --uc-window-drag-space-width: 0px; + --uc-menubar-height: 28px; + } +} +/* Add back pointer-events to several elements so UI remains usable */ +/* The selected tab can be clicked normally from the icon */ #TabsToolbar toolbarbutton, #TabsToolbar toolbaritem, .tabbrowser-tab, .tab-close-button, -.tab-icon-stack { - pointer-events: auto; +.tab-icon-stack{ + pointer-events: auto } - -/* Capture box: click to focus urlbar */ -:root:not([customizing]) #urlbar-input-container::before { +/* Invisible capture box behind tabs*/ +:root:not([customizing]) #urlbar-input-container::before{ position: fixed; - display: flex; - flex: 1; - height: var(--tab-min-height); - width: 100%; - top: var(--8); - bottom: var(--8); + display: block; + left: 0; + top: var(--uc-menubar-height); + width: var(--uc-buttons-width); + height: calc(var(--tab-min-height) + 2*var(--tab-block-margin)); content: ""; + pointer-events: auto; } -#urlbar-input-container:focus-within::before { - display: none !important; +:root[tabsintitlebar]:not([customizing]) #urlbar-input-container::before{ + left: var(--uc-window-drag-space-width); + width: calc(100vw - var(--uc-window-control-width) - var(--uc-buttons-width) - 2 * var(--uc-window-drag-space-width)); } +#urlbar-input-container:focus-within::before{ display: none !important; } -/* Tabs over the capture box */ -:root:not([customizing]) #TabsToolbar-customization-target { +/* Make tabs appear over the invisible box */ +:root:not([customizing]) #TabsToolbar-customization-target{ position: relative; z-index: 1; - pointer-events: none; + pointer-events: none } - -/* Tab Focus => Url Select */ -#navigator-toolbox:focus-within - .tabbrowser-tab:not([pinned])[selected] - .tab-content { - opacity: 0; -} - -/* Tab URL */ -#navigator-toolbox:focus-within .tab-background:not([pinned])[selected] { - background-position: var(--6) !important; - background-color: var(--main) !important; - background-size: auto !important; - background-image: -moz-element(#urlbar-input) !important; +#titlebar{ + opacity: 1 !important; + will-change: unset !important; + transition: none !important; } -/* 🪟 Drag Window from urlbar */ -.urlbar-input-box, -#urlbar-input, -#urlbar-scheme, -#urlbar-container { - -moz-window-dragging: drag; - cursor: default; -} /* ⬇️ Downloads Indicator */ #downloads-button { - position: fixed !important; - top: 0 !important; - right: 0 !important; + position: fixed ; + top: 0; + right: 0; width: var(--tab-min-height); z-index: 1; } @@ -492,6 +587,7 @@ tab:not([pinned]):hover .tab-close-button { #downloadsPanel { position: fixed !important; margin: 4px var(--6) !important; + border-radius: var(--6) !important; } #downloadsPanel-mainView { background-color: var(--grey) !important; @@ -515,3 +611,11 @@ tab:not([pinned]):hover .tab-close-button { margin-inline-end: var(--8) !important; } +/* Search Suggestions Fix*/ +#urlbar-container #urlbar-input-container { + opacity: 0; +} +.urlbarView { + background-color: var(--lwt-accent-color); /* Pop-up background color (adaptive) */ + color: grey; + } /* Pop-up text color */