mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2026-01-30 12:20:36 -08:00
Merge branch 'proton-style-dev' into photon-style-dev
This commit is contained in:
alstjr7375
commit
9b78afff7e
2 changed files with 551 additions and 55 deletions
14
user.js
14
user.js
|
|
@ -1,4 +1,4 @@
|
|||
// ** Theme Related Options ****************************************************
|
||||
// ** Theme GDefault Options ****************************************************
|
||||
// userchrome.css usercontent.css activate
|
||||
user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);
|
||||
|
||||
|
|
@ -26,6 +26,18 @@ user_pref("browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar"
|
|||
// Browser Theme Based Scheme - Will be activate 95 Above
|
||||
// user_pref("layout.css.prefers-color-scheme.content-override", 3);
|
||||
|
||||
// ** Theme Related Options ****************************************************
|
||||
user_pref("userChrome.tab.sharePhoton", true); // Original, Photon
|
||||
user_pref("userChrome.tab.shareProton", true); // Original, Proton
|
||||
|
||||
// user_pref("userChrome.tab.original", true); // Original
|
||||
user_pref("userChrome.tab.photon", true); // Photon
|
||||
// user_pref("userChrome.tab.proton", true); // Proton
|
||||
user_pref("userChrome.tab.connect_to_window", true); // Original, Photon
|
||||
|
||||
user_pref("userChrome.panel.proton", true); // Original, Proton
|
||||
user_pref("userChrome.panel.photon", true); // Photon
|
||||
|
||||
// ** Useful Options ***********************************************************
|
||||
// Integrated calculator at urlbar
|
||||
user_pref("browser.urlbar.suggest.calculator", true);
|
||||
|
|
|
|||
592
userChrome.css
592
userChrome.css
|
|
@ -55,22 +55,25 @@
|
|||
}
|
||||
|
||||
/*= Remove Tab Border ========================================================*/
|
||||
/* Light Theme */
|
||||
#TabsToolbar:not([brighttext])
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background {
|
||||
border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.connect_to_window") {
|
||||
/* TARGET: original, photon */
|
||||
/* Light Theme */
|
||||
#TabsToolbar:not([brighttext])
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background {
|
||||
border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */
|
||||
}
|
||||
|
||||
/* Dark Theme */
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)) */
|
||||
/* Dark Theme */
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)) */
|
||||
}
|
||||
}
|
||||
|
||||
/*= Light Weight Theme =======================================================*/
|
||||
|
|
@ -483,6 +486,20 @@
|
|||
--panel-separator-color: var(--win-border-color) !important;
|
||||
}
|
||||
|
||||
/*- Proton Tab Selected ----------------------------------------------------*/
|
||||
@supports -moz-bool-pref("userChrome.tab.proton") {
|
||||
:root:not(:-moz-lwtheme),
|
||||
:root[lwt-default-theme-in-dark-mode] {
|
||||
--win-proton-tab-selected-bgcolor: color-mix(in srgb, var(--win-bgcolor) 5%, var(--win-component-bgcolor));
|
||||
}
|
||||
:root:not(:-moz-lwtheme) {
|
||||
--tab-selected-color: var(--win-proton-tab-selected-bgcolor) !important;
|
||||
}
|
||||
:root[lwt-default-theme-in-dark-mode] {
|
||||
--lwt-selected-tab-background-color: var(--win-proton-tab-selected-bgcolor) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*- Menu -------------------------------------------------------------------*/
|
||||
html#main-window menupopup:not(:-moz-lwtheme) {
|
||||
--menu-color: var(--win-text-color) !important;
|
||||
|
|
@ -762,6 +779,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
/*- Proton Tab Selected ----------------------------------------------------*/
|
||||
@supports -moz-bool-pref("userChrome.tab.proton") {
|
||||
:root:not(:-moz-lwtheme),
|
||||
:root[lwt-default-theme-in-dark-mode] {
|
||||
--mac-proton-tab-selected-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 20%, -moz-dialog);
|
||||
}
|
||||
:root:not(:-moz-lwtheme) {
|
||||
--tab-selected-color: var(--mac-proton-tab-selected-bgcolor) !important;
|
||||
}
|
||||
:root[lwt-default-theme-in-dark-mode] {
|
||||
--lwt-selected-tab-background-color: var(--mac-proton-tab-selected-bgcolor) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*- Toolbar ----------------------------------------------------------------*/
|
||||
:root:not(:-moz-lwtheme) #navigator-toolbox,
|
||||
:root[lwt-default-theme-in-dark-mode] #navigator-toolbox {
|
||||
|
|
@ -819,7 +850,8 @@
|
|||
}
|
||||
|
||||
/* Hard Coded */
|
||||
:root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */
|
||||
@supports -moz-bool-pref("userChrome.tab.connect_to_window") {
|
||||
:root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */
|
||||
#tabbrowser-tabs:not([movingtab])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
|
|
@ -831,9 +863,9 @@
|
|||
> .tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-background[selected="true"] {
|
||||
background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
|
||||
background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
|
||||
}
|
||||
}
|
||||
|
||||
:root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::before,
|
||||
:root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::after,
|
||||
:root:not([customizing="true"])[lwt-default-theme-in-dark-mode] tab[visuallyselected] > stack::before,
|
||||
|
|
@ -1005,7 +1037,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
/*== Menu color =============================================================*/
|
||||
/*== Menu Color =============================================================*/
|
||||
html#main-window menupopup {
|
||||
/* is same as toolbar color https://github.com/mozilla/gecko-dev/blob/master/toolkit/themes/windows/global/global.css#L17-L67 */
|
||||
--menu-color: var(--arrowpanel-color, var(--in-content-page-color)) !important;
|
||||
|
|
@ -2702,11 +2734,21 @@ menuitem.openintabs-menuitem,
|
|||
|
||||
/** Reduce Padding ************************************************************/
|
||||
/*= Root - Reduce Padding ====================================================*/
|
||||
@supports -moz-bool-pref("userChrome.tab.original") {
|
||||
:root {
|
||||
/* Tab Bar */
|
||||
--proton-tab-block-margin: 2px !important; /* Original: 4px, Legacy */
|
||||
--tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */
|
||||
}
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.photon") {
|
||||
:root {
|
||||
--proton-tab-block-margin: 0px !important; /* Original: 4px, Legacy */
|
||||
--tab-block-margin: 0px !important; /* New version of --proton-tab-block-margin */
|
||||
--tab-border-radius: 0px !important; /* Original: 4px */
|
||||
}
|
||||
}
|
||||
:root {
|
||||
/* Tab Bar */
|
||||
--proton-tab-block-margin: 0px !important; /* Original: 4px, Legacy */
|
||||
--tab-block-margin: 0px !important; /* New version of --proton-tab-block-margin */
|
||||
--tab-border-radius: 0px !important; /* Original: 4px */
|
||||
--inline-tab-padding: 6px !important; /* Original: 8px */
|
||||
|
||||
/* Panel */
|
||||
|
|
@ -2735,12 +2777,14 @@ menuitem.openintabs-menuitem,
|
|||
}
|
||||
|
||||
/* Fix Tab bar button radious */
|
||||
@supports -moz-bool-pref("userChrome.tab.photon") {
|
||||
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
|
||||
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-text,
|
||||
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack,
|
||||
.tab-close-button {
|
||||
--tab-border-radius: 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*= Tab Bar - Reduce Width, Show more tabs ===================================*/
|
||||
/* for First Tab Space */
|
||||
|
|
@ -2775,11 +2819,20 @@ menuitem.openintabs-menuitem,
|
|||
padding-right: var(--newtab-button-width-padding) !important;
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("userChrome.tab.shareProton") {
|
||||
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab[first-visible-unpinned-tab] {
|
||||
margin-inline-start: 1px !important;
|
||||
}
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.photon") {
|
||||
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab[first-visible-unpinned-tab] {
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
:root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox {
|
||||
--scrollbtn-inner-padding: 1px;
|
||||
|
|
@ -2800,17 +2853,34 @@ menuitem.openintabs-menuitem,
|
|||
}
|
||||
|
||||
/* Tab - Max Size */
|
||||
@supports -moz-bool-pref("userChrome.tab.shareProton") {
|
||||
:root {
|
||||
--tab-max-width: 240px;
|
||||
}
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.photon") {
|
||||
:root {
|
||||
--tab-max-width: 225px;
|
||||
}
|
||||
}
|
||||
.tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
|
||||
max-width: var(--tab-max-width) !important; /* Original: 225px */
|
||||
}
|
||||
|
||||
/* neighbouring tabs should "pinch" together */
|
||||
@supports -moz-bool-pref("userChrome.tab.shareProton") {
|
||||
.tabbrowser-tab {
|
||||
padding-inline: 1px !important;
|
||||
}
|
||||
.tabbrowser-tab:not([last-visible-tab]) {
|
||||
margin-inline-end: -0.5px !important;
|
||||
}
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.photon") {
|
||||
.tabbrowser-tab {
|
||||
padding-inline: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*= Tab Bar - Reduce Height, Show more contents ==============================*/
|
||||
/* for Extra Drag Space */
|
||||
|
|
@ -2826,6 +2896,20 @@ menuitem.openintabs-menuitem,
|
|||
}
|
||||
|
||||
/* Toolbar Height */
|
||||
@supports -moz-bool-pref("userChrome.tab.shareProton") {
|
||||
:root:not([uidensity="touch"]) #TabsToolbar {
|
||||
--toolbarbutton-inner-padding: 9px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */
|
||||
}
|
||||
|
||||
:root:not([uidensity]) #TabsToolbar {
|
||||
--tab-min-height: 36px !important; /* 38px -> 36px */
|
||||
}
|
||||
:root[uidensity="compact"] #TabsToolbar {
|
||||
--tab-min-height: 29px !important; /* 36px -> 29px */
|
||||
}
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("userChrome.tab.photon") {
|
||||
#TabsToolbar {
|
||||
--tab-min-height: 33px !important;
|
||||
--toolbarbutton-inner-padding: unset !important;
|
||||
|
|
@ -2847,6 +2931,31 @@ menuitem.openintabs-menuitem,
|
|||
.tab-content {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("userChrome.tab.original") {
|
||||
.toolbar-items,
|
||||
.tabbrowser-tab {
|
||||
--tabbar-max-height: 38px;
|
||||
max-height: calc(var(--tabbar-max-height) + var(--space-above-tabbar));
|
||||
}
|
||||
:root[uidensity="compact"] .toolbar-items,
|
||||
:root[uidensity="compact"] .tabbrowser-tab {
|
||||
--tabbar-max-height: 36px;
|
||||
}
|
||||
:root[uidensity="touch"] .toolbar-items,
|
||||
:root[uidensity="touch"] .tabbrowser-tab {
|
||||
--tabbar-max-height: 45px;
|
||||
}
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.proton") {
|
||||
:root:not([uidensity]) #TabsToolbar {
|
||||
--tab-min-height: 36px !important; /* 38px -> 36px */
|
||||
}
|
||||
:root[uidensity="compact"] #TabsToolbar {
|
||||
--tab-min-height: 29px !important; /* 36px -> 29px */
|
||||
}
|
||||
}
|
||||
|
||||
/* Scroll Button - Size Fix */
|
||||
:root #tabbrowser-arrowscrollbox {
|
||||
|
|
@ -3136,45 +3245,49 @@ menupopup > menu {
|
|||
}
|
||||
|
||||
/** Tab Bar - Connect to window ***********************************************/
|
||||
.tab-background {
|
||||
border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.connect_to_window") {
|
||||
.tab-background {
|
||||
border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
margin-top: var(--tab-block-margin);
|
||||
}
|
||||
.tab-content {
|
||||
margin-top: var(--tab-block-margin);
|
||||
}
|
||||
|
||||
.tab-stack {
|
||||
margin-top: 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
.tab-stack {
|
||||
margin-top: 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
/* Remove line at Toolbar's top */
|
||||
#tabbrowser-tabs {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
#tabbrowser-arrowscrollbox[overflowing] .tabbrowser-tab[pinned]:is([visuallyselected], [multiselected]) {
|
||||
overflow: hidden;
|
||||
/* Remove line at Toolbar's top */
|
||||
#tabbrowser-tabs {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
#tabbrowser-arrowscrollbox[overflowing] .tabbrowser-tab[pinned]:is([visuallyselected], [multiselected]) {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/** Selected Tab - Color like toolbar *****************************************/
|
||||
:root:not(:-moz-lwtheme) {
|
||||
/* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */
|
||||
--tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */
|
||||
}
|
||||
#tabbrowser-tabs:not([movingtab])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-background[selected="true"]:-moz-lwtheme {
|
||||
/* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none)
|
||||
@supports -moz-bool-pref("userChrome.tab.connect_to_window") {
|
||||
:root:not(:-moz-lwtheme) {
|
||||
/* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */
|
||||
--tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */
|
||||
}
|
||||
#tabbrowser-tabs:not([movingtab])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-background[selected="true"]:-moz-lwtheme {
|
||||
/* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none)
|
||||
*/
|
||||
background-image: linear-gradient(transparent, transparent),
|
||||
linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
|
||||
background-image: linear-gradient(transparent, transparent),
|
||||
linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Multi Selected Color */
|
||||
/** Multi Selected Color - More Contrast **************************************/
|
||||
#tabbrowser-tabs:not([movingtab])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
|
|
@ -3194,7 +3307,104 @@ menupopup > menu {
|
|||
opacity: 0.15;
|
||||
}
|
||||
|
||||
/** Selected Tab - Box Shadow *************************************************/
|
||||
@supports -moz-bool-pref("userChrome.tab.original") {
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab[visuallyselected="true"]:not(:focus)
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
/* Origina: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9))
|
||||
Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
|
||||
box-shadow: 0 0 1px var(--toolbar-color) !important;
|
||||
}
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab[multiselected]:not([visuallyselected])
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
box-shadow: 0 0 1px color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important;
|
||||
}
|
||||
|
||||
/* Pinned Tab - tabbrowser-arrowscrollbox overflowing */
|
||||
#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
|
||||
z-index: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/** Selected Tab - Bottom Rounded Corner **************************************/
|
||||
@supports -moz-bool-pref("userChrome.tab.original") {
|
||||
#tabbrowser-tabs {
|
||||
--tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
|
||||
--tab-corner-padding: 0px;
|
||||
--tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding));
|
||||
}
|
||||
|
||||
:root:not([customizing="true"]) tab[visuallyselected] > stack::before,
|
||||
:root:not([customizing="true"]) tab[visuallyselected] > stack::after {
|
||||
content: "" !important;
|
||||
|
||||
/* Box */
|
||||
display: block !important;
|
||||
position: absolute !important;
|
||||
z-index: 1 !important;
|
||||
|
||||
/* Shape */
|
||||
width: var(--tab-corner-rounding) !important;
|
||||
height: 100% !important;
|
||||
|
||||
/* Color */
|
||||
fill: var(--toolbar-bgcolor) !important;
|
||||
stroke: var(--tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))) !important;
|
||||
-moz-context-properties: fill, stroke !important;
|
||||
|
||||
/* Image */
|
||||
background-size: var(--tab-corner-rounding);
|
||||
background-repeat: no-repeat;
|
||||
background-position-y: bottom;
|
||||
}
|
||||
:root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before,
|
||||
:root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after {
|
||||
/* As Selected Tab - Box Shadow */
|
||||
stroke: var(--toolbar-color) !important;
|
||||
}
|
||||
|
||||
tab[visuallyselected] > stack::before {
|
||||
left: var(--tab-corner-position) !important;
|
||||
background-image: url("./icons/tab-bottom-corner-left.svg");
|
||||
}
|
||||
tab[visuallyselected] > stack::after {
|
||||
left: auto;
|
||||
right: var(--tab-corner-position);
|
||||
background-image: url("./icons/tab-bottom-corner-right.svg");
|
||||
}
|
||||
|
||||
@media (-moz-gtk-csd-available) {
|
||||
/* Fill color for GTK */
|
||||
:root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::before,
|
||||
:root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::after {
|
||||
/* As GTK Toolbar's background-color + backround-image
|
||||
* --toolbar-non-lwt-bgcolor: -moz-dialog;
|
||||
* --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
|
||||
*/
|
||||
fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
|
||||
stroke: transparent !important;
|
||||
}
|
||||
:root:not([customizing="true"]):not([lwtheme="true"])
|
||||
#TabsToolbar[brighttext]
|
||||
tab[visuallyselected]
|
||||
> stack::before,
|
||||
:root:not([customizing="true"]):not([lwtheme="true"])
|
||||
#TabsToolbar[brighttext]
|
||||
tab[visuallyselected]
|
||||
> stack::after {
|
||||
stroke: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Selected Tab - Photon like contextline ************************************/
|
||||
@supports -moz-bool-pref("userChrome.tab.photon") {
|
||||
:root[lwtheme-mozlightdark] #tabbrowser-tabs {
|
||||
--tab-line-color: rgb(10, 132, 255) !important;
|
||||
}
|
||||
|
|
@ -3272,8 +3482,151 @@ menupopup > menu {
|
|||
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
|
||||
margin: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
/** Unselected Tab - Divide line **********************************************/
|
||||
/** Unselected Tab - Dynamic Separator ****************************************/
|
||||
@supports -moz-bool-pref("userChrome.tab.original") {
|
||||
#tabbrowser-arrowscrollbox {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("userChrome.tab.original") {
|
||||
.tab-background::before,
|
||||
#tabs-newtab-button::before {
|
||||
/* Box Model */
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
||||
/* Position */
|
||||
top: 50%;
|
||||
transform: translateX(-2.5px) translateY(calc(-50% + 1px));
|
||||
|
||||
/* Bar shape */
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
|
||||
/* Bar Color */
|
||||
opacity: 0;
|
||||
background-color: var(--toolbarseparator-color);
|
||||
}
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("userChrome.tab.proton") {
|
||||
.tab-background::before,
|
||||
#tabbrowser-arrowscrollbox:not([overflowing])
|
||||
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab]
|
||||
.tab-background::after {
|
||||
/* Box Model */
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
/* Bar shape */
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
|
||||
/* Bar Color */
|
||||
opacity: 0;
|
||||
background-color: var(--toolbarseparator-color);
|
||||
}
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("userChrome.tab.proton") {
|
||||
.tab-background::before {
|
||||
transform: translateX(-2.5px) translateY(calc(-50% + 1px)) !important;
|
||||
}
|
||||
.tabbrowser-tab[last-visible-tab] .tab-background::after {
|
||||
right: 0;
|
||||
transform: translateX(1.5px) translateY(calc(-50% + 1px)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("userChrome.tab.shareProton") {
|
||||
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before {
|
||||
opacity: var(--tab-separator-opacity);
|
||||
}
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.original") {
|
||||
#tabs-newtab-button:not(:hover, [open])::before {
|
||||
opacity: var(--tab-separator-opacity);
|
||||
}
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.proton") {
|
||||
#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before,
|
||||
#tabbrowser-arrowscrollbox:not([overflowing])
|
||||
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab]
|
||||
.tab-background::after {
|
||||
opacity: var(--tab-separator-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("userChrome.tab.shareProton") {
|
||||
#navigator-toolbox:not([movingtab])
|
||||
.tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover)
|
||||
.tab-background::before,
|
||||
#navigator-toolbox:not([movingtab])
|
||||
#tabbrowser-arrowscrollbox[overflowing]
|
||||
tab.tabbrowser-tab[first-visible-unpinned-tab]
|
||||
.tab-background::before {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.original") {
|
||||
#navigator-toolbox:not([movingtab])
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
|
||||
+ .tabbrowser-tab
|
||||
.tab-background::before,
|
||||
#navigator-toolbox:not([movingtab])
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
|
||||
~ .tabbrowser-tab[afterhovered]
|
||||
.tab-background::before,
|
||||
#navigator-toolbox:not([movingtab])
|
||||
.tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover)
|
||||
~ #tabs-newtab-button::before {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.proton") {
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
|
||||
+ .tabbrowser-tab:not([visuallyselected])
|
||||
.tab-background::before {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animate */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
@supports -moz-bool-pref("userChrome.tab.shareProton") {
|
||||
.tab-background::before {
|
||||
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
|
||||
}
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.original") {
|
||||
#tabs-newtab-button::before {
|
||||
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
|
||||
}
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.proton") {
|
||||
#tabbrowser-arrowscrollbox:not([overflowing])
|
||||
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab]
|
||||
.tab-background::after {
|
||||
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Latest Tab & New tab margin */
|
||||
@supports -moz-bool-pref("userChrome.tab.shareProton") {
|
||||
#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[last-visible-tab] {
|
||||
margin-inline-end: 1px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/** Unselected Tab - Static Separator *****************************************/
|
||||
@supports -moz-bool-pref("userChrome.tab.photon") {
|
||||
.tabbrowser-tab[first-visible-tab]::before,
|
||||
.tabbrowser-tab::after,
|
||||
#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before {
|
||||
|
|
@ -3311,8 +3664,76 @@ menupopup > menu {
|
|||
margin-bottom: 0 !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* New tab button - Looks like tab ********************************************/
|
||||
@supports -moz-bool-pref("userChrome.tab.original") {
|
||||
#tabs-newtab-button {
|
||||
/* Original:
|
||||
margin: 0 0 var(--tabs-navbar-shadow-size) !important
|
||||
=> Can't ovrride style. Therefore, we should approach it by bypass.
|
||||
*/
|
||||
--tabs-navbar-shadow-size: -1px; /* Original: 1px */
|
||||
--tabs-navbar-original-shadow-size: 1px;
|
||||
--tab-corner-rounding: 4px; /* Hardcorded */
|
||||
|
||||
/* Size */
|
||||
-moz-box-align: stretch !important;
|
||||
padding-top: var(--tab-block-margin) !important;
|
||||
|
||||
/* Corner Rounding Image */
|
||||
--newtab-position: calc((var(--tab-corner-rounding) / 2) * -1);
|
||||
background-image: url("./icons/tab-bottom-corner-left.svg"), url("./icons/tab-bottom-corner-right.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size),
|
||||
right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size);
|
||||
background-size: var(--tab-corner-rounding);
|
||||
|
||||
/* Corner Rounding Color */
|
||||
fill: transparent !important;
|
||||
-moz-context-properties: fill !important;
|
||||
}
|
||||
|
||||
/* Corner Rounding Color */
|
||||
#tabs-newtab-button:hover {
|
||||
fill: var(--toolbarbutton-hover-background) !important;
|
||||
}
|
||||
#tabs-newtab-button:hover:active {
|
||||
fill: var(--toolbarbutton-active-background) !important;
|
||||
}
|
||||
@media (-moz-windows-accent-color-in-titlebar) {
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover {
|
||||
fill: color-mix(
|
||||
in srgb,
|
||||
-moz-accent-color-foreground 10%,
|
||||
transparent
|
||||
) !important; /* Hardcorded for compatibility */
|
||||
}
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active {
|
||||
fill: color-mix(
|
||||
in srgb,
|
||||
-moz-accent-color-foreground 15%,
|
||||
transparent
|
||||
) !important; /* Hardcorded for compatibility */
|
||||
}
|
||||
}
|
||||
|
||||
/* '+'Icon */
|
||||
#tabs-newtab-button .toolbarbutton-icon {
|
||||
border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */
|
||||
|
||||
padding: calc(var(--toolbarbutton-inner-padding) - (var(--tab-block-margin) / 4)) var(--toolbarbutton-inner-padding)
|
||||
calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4) + var(--tabs-navbar-original-shadow-size)) !important;
|
||||
-moz-context-properties: fill, fill-opacity;
|
||||
fill: var(--toolbarbutton-icon-fill);
|
||||
fill-opacity: var(--toolbarbutton-icon-fill-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
/** New tab button - Smaller button *******************************************/
|
||||
@supports -moz-bool-pref("userChrome.tab.photon") {
|
||||
#tabs-newtab-button > .toolbarbutton-icon {
|
||||
margin-left: 1px;
|
||||
|
||||
|
|
@ -3325,6 +3746,21 @@ menupopup > menu {
|
|||
:root[uidensity="touch"] #tabs-newtab-button > .toolbarbutton-icon {
|
||||
--toolbarbutton-inner-padding: 9px; /* Photon: 9px */
|
||||
}
|
||||
}
|
||||
|
||||
/* New tab button - Smaller button ********************************************/
|
||||
@supports -moz-bool-pref("userChrome.tab.proton") {
|
||||
:root:not([uidensity="touch"]) #tabs-newtab-button > .toolbarbutton-icon {
|
||||
--toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 1px);
|
||||
}
|
||||
|
||||
:root:not([uidensity="compact"]) #tabs-newtab-button > .toolbarbutton-icon {
|
||||
margin-left: 2px;
|
||||
}
|
||||
:root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon {
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Unloaded Tab - Contents Opacity ********************************************/
|
||||
#tabbrowser-tabs .tabbrowser-tab[pending] .tab-content {
|
||||
|
|
@ -3548,6 +3984,12 @@ menupopup > menu {
|
|||
}
|
||||
|
||||
/** Container Tab - Color line at icon's bottom *******************************/
|
||||
@supports -moz-bool-pref("userChrome.tab.shareProton") {
|
||||
.tab-context-line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content:not([titlechanged])::before {
|
||||
/* Box Model */
|
||||
content: "";
|
||||
|
|
@ -3821,7 +4263,10 @@ menupopup > menu {
|
|||
:root {
|
||||
--arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-padding) * 2 + 8px) !important;
|
||||
--arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important;
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("userChrome.panel.photon") {
|
||||
:root {
|
||||
/* Blank Menu Left Padding */
|
||||
--arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 3px);
|
||||
--arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px);
|
||||
|
|
@ -3846,6 +4291,7 @@ menupopup > menu {
|
|||
);
|
||||
--arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px);
|
||||
}
|
||||
}
|
||||
|
||||
#downloadsHistory .button-text,
|
||||
.subviewbutton > .toolbarbutton-text {
|
||||
|
|
@ -3939,6 +4385,12 @@ menupopup > menu {
|
|||
background-image: var(--avatar-image-url) !important;
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("userChrome.panel.proton") {
|
||||
#appMenu-new-tab-button2 {
|
||||
list-style-image: url("chrome://browser/skin/new-tab.svg");
|
||||
}
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.panel.photon") {
|
||||
#appMenu-new-tab-button2, /* Seperate */
|
||||
#appMenu-passwords-button, /* Seperate */
|
||||
#appMenu-extensions-themes-button,
|
||||
|
|
@ -3954,6 +4406,7 @@ menupopup > menu {
|
|||
#appMenu-zoom-controls2 {
|
||||
padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#appMenu-new-window-button2 {
|
||||
list-style-image: url("chrome://browser/skin/window.svg");
|
||||
|
|
@ -3971,14 +4424,45 @@ menupopup > menu {
|
|||
#appMenu-downloads-button {
|
||||
list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.panel.proton") {
|
||||
#appMenu-passwords-button {
|
||||
list-style-image: url("chrome://browser/skin/login.svg");
|
||||
}
|
||||
#appMenu-extensions-themes-button {
|
||||
list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
|
||||
}
|
||||
}
|
||||
|
||||
#appMenu-print-button2 {
|
||||
list-style-image: url("chrome://global/skin/icons/print.svg");
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.panel.proton") {
|
||||
#appMenu-save-file-button2 {
|
||||
list-style-image: url("chrome://browser/skin/save.svg");
|
||||
}
|
||||
#appMenu-find-button2 {
|
||||
list-style-image: url("chrome://global/skin/icons/search-glass.svg");
|
||||
}
|
||||
#appMenu-zoom-controls2::before {
|
||||
content: url("./icons/screenshot.svg");
|
||||
}
|
||||
}
|
||||
|
||||
#appMenu-settings-button {
|
||||
list-style-image: url("chrome://global/skin/icons/settings.svg");
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.panel.proton") {
|
||||
#appMenu-more-button2 {
|
||||
list-style-image: url("chrome://browser/skin/ion.svg");
|
||||
}
|
||||
#appMenu-help-button2 {
|
||||
list-style-image: url("chrome://global/skin/icons/help.svg");
|
||||
}
|
||||
|
||||
#appMenu-quit-button2 {
|
||||
list-style-image: url("./icons/quit.svg");
|
||||
}
|
||||
}
|
||||
|
||||
/*= Panel - Account ==========================================================*/
|
||||
#PanelUI-fxa-menu-connect-device-button .toolbarbutton-icon,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue