Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated the theme to be compatible with Firefox v126 #27

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Updated the theme to be compatible with Firefox v126 #27

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2398173
Update userChrome.css
suchacat May 25, 2024
12daa88
Update userChrome.css
suchacat May 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
258 changes: 181 additions & 77 deletions chrome/userChrome.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
Expand Down Expand Up @@ -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;
Expand All @@ -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 */