mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2025-12-06 10:41:18 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix: Option - Make to quoted

Browse source
This commit is contained in:
alstjr7375 2022-03-22 06:33:17 +09:00
parent 710172211c
commit 32823f73a0
6 changed files with 149 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

12
__tests__/each.test.scss
View file

@ -65,31 +65,31 @@
} }
} }
@include test("prefix custom seperator single") { @include test("prefix custom option") {
@include assert { @include assert {
@include output { @include output {
@include each.AtEach("supports", "userChrome.tab.photon", "-moz-bool-pref", " or ") { @include each.AtEach("supports", "userChrome.tab.photon", "-moz-bool-pref", ("seperator": " or ", "quoted": true)) {
@include example; @include example;
} }
} }
@include expect { @include expect {
@supports -moz-bool-pref(userChrome.tab.photon) { @supports -moz-bool-pref("userChrome.tab.photon") {
@include example; @include example;
} }
} }
} }
} }
@include test("prefix custom seperator multiple") { @include test("prefix custom option multiple") {
@include assert { @include assert {
@include output { @include output {
$input: "userChrome.tab.photon" "userChrome.padding.photon"; $input: "userChrome.tab.photon" "userChrome.padding.photon";
@include each.AtEach("supports", $input, "-moz-bool-pref", " or ") { @include each.AtEach("supports", $input, "-moz-bool-pref", ("seperator": " or ", "quoted": true)) {
@include example; @include example;
} }
} }
@include expect { @include expect {
@supports -moz-bool-pref(userChrome.tab.photon) or -moz-bool-pref(userChrome.padding.photon) { @supports -moz-bool-pref("userChrome.tab.photon") or -moz-bool-pref("userChrome.padding.photon") {
@include example; @include example;
} }
} }

8
__tests__/option.test.scss
View file

@ -11,7 +11,7 @@
} }
} }
@include expect { @include expect {
@supports -moz-bool-pref(userChrome.tab.photon) { @supports -moz-bool-pref("userChrome.tab.photon") {
@include example; @include example;
} }
} }
@ -26,7 +26,7 @@
} }
} }
@include expect { @include expect {
@supports -moz-bool-pref(userChrome.tab.photon) or -moz-bool-pref(userChrome.padding.photon) { @supports -moz-bool-pref("userChrome.tab.photon") or -moz-bool-pref("userChrome.padding.photon") {
@include example; @include example;
} }
} }
@ -43,7 +43,7 @@
} }
} }
@include expect { @include expect {
@supports not -moz-bool-pref(userChrome.tab.photon) { @supports not -moz-bool-pref("userChrome.tab.photon") {
@include example; @include example;
} }
} }
@ -58,7 +58,7 @@
} }
} }
@include expect { @include expect {
@supports -moz-bool-pref(userChrome.tab.photon) or -moz-bool-pref(userChrome.padding.photon) { @supports -moz-bool-pref("userChrome.tab.photon") or -moz-bool-pref("userChrome.padding.photon") {
@include example; @include example;
} }
} }

17
src/utils/_each.scss
View file

@ -1,16 +1,27 @@
@use "sass:map";
@use "sass:list"; @use "sass:list";
@use "list" as list-utils; @use "list" as list-utils;
@mixin AtEach($name, $list, $prefix: null, $seperator: ", ") { $_defaultOption: (
"seperator": ", ",
"quoted": false
);
@mixin AtEach($name, $list, $prefix: null, $option: $_defaultOption) {
$option: map.merge($_defaultOption, $option);
$seperator: map.get($option, "seperator");
$quoted: map.get($option, "quoted");
$quoted: if($quoted, "\"", null);
$listL: list.length($list); $listL: list.length($list);
@if $listL >= 1 { @if $listL >= 1 {
$first: list.nth($list, 1); $first: list.nth($list, 1);
@if $first != null and $first != () { @if $first != null and $first != () {
$blocks: "#{$prefix}(#{$first})"; $blocks: "#{$prefix}(#{$quoted}#{$first}#{$quoted})";
@if $listL > 1 { @if $listL > 1 {
@for $i from 2 through ($listL) { @for $i from 2 through ($listL) {
$nextBlock: list.nth($list, $i); $nextBlock: list.nth($list, $i);
$nextBlock: "#{$seperator}#{$prefix}(#{$nextBlock})"; $nextBlock: "#{$seperator}#{$prefix}(#{$quoted}#{$nextBlock}#{$quoted})";
$blocks: "#{$blocks}#{$nextBlock}"; $blocks: "#{$blocks}#{$nextBlock}";
} }
} }

4
src/utils/_option.scss
View file

@ -3,13 +3,13 @@
$tabProton: "userChrome.tab.proton"; $tabProton: "userChrome.tab.proton";
@mixin Option($optionNames...) { @mixin Option($optionNames...) {
@include each.AtEach("supports", $optionNames, "-moz-bool-pref", " or ") { @include each.AtEach("supports", $optionNames, "-moz-bool-pref", ("seperator": " or ", "quoted": true)) {
@content; @content;
} }
} }
@mixin NotOption($optionNames...) { @mixin NotOption($optionNames...) {
@include each.AtEach("supports", $optionNames, "not -moz-bool-pref", " or ") { @include each.AtEach("supports", $optionNames, "not -moz-bool-pref", ("seperator": " or ", "quoted": true)) {
@content; @content;
} }
} }

214
userChrome.css
View file

@ -1,7 +1,7 @@
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
@namespace html "http://www.w3.org/1999/xhtml"; @namespace html "http://www.w3.org/1999/xhtml";
/** Default Thme - Contrast ***************************************************/ /** Default Thme - Contrast ***************************************************/
@supports -moz-bool-pref(userChrome.theme.built_in_contrast) { @supports -moz-bool-pref("userChrome.theme.built_in_contrast") {
/*= Lightmode - Color darker =================================================*/ /*= Lightmode - Color darker =================================================*/
:root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]),
:root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] { :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] {
@ -30,7 +30,7 @@
} }
/** Compatibility Fixes *******************************************************/ /** Compatibility Fixes *******************************************************/
/*= Theme - Compatibility ====================================================*/ /*= Theme - Compatibility ====================================================*/
@supports -moz-bool-pref(userChrome.compatibility.theme) { @supports -moz-bool-pref("userChrome.compatibility.theme") {
/*= Hotfix #98 ===============================================================*/ /*= Hotfix #98 ===============================================================*/
/* Hidden Tab Panel Padding */ /* Hidden Tab Panel Padding */
#allTabsMenu-hiddenTabsView .all-tabs-item { #allTabsMenu-hiddenTabsView .all-tabs-item {
@ -75,7 +75,7 @@
} }
/*= Remove Tab Border ========================================================*/ /*= Remove Tab Border ========================================================*/
@supports -moz-bool-pref(userChrome.tab.connect_to_window) { @supports -moz-bool-pref("userChrome.tab.connect_to_window") {
/* TARGET: original, photon */ /* TARGET: original, photon */
/* Light Theme */ /* Light Theme */
#TabsToolbar:not([brighttext]) #TabsToolbar:not([brighttext])
@ -127,7 +127,7 @@
} }
} }
/*= OS - Compatibility =======================================================*/ /*= OS - Compatibility =======================================================*/
@supports -moz-bool-pref(userChrome.compatibility.os) { @supports -moz-bool-pref("userChrome.compatibility.os") {
/*= Windows 7, 8 - Tab Bar Background *****************************************/ /*= Windows 7, 8 - Tab Bar Background *****************************************/
@media (-moz-os-version: windows-win7), @media (-moz-os-version: windows-win7),
(-moz-platform: windows-win7), (-moz-platform: windows-win7),
@ -296,7 +296,7 @@
} }
} }
/** System Default Theme ******************************************************/ /** System Default Theme ******************************************************/
@supports -moz-bool-pref(userChrome.theme.system_default) { @supports -moz-bool-pref("userChrome.theme.system_default") {
/*= Common - URL Bar focus color =============================================*/ /*= Common - URL Bar focus color =============================================*/
@media (-moz-windows-accent-color-in-titlebar), (-moz-gtk-csd-available) { @media (-moz-windows-accent-color-in-titlebar), (-moz-gtk-csd-available) {
/* URL Bar */ /* URL Bar */
@ -526,7 +526,7 @@
} }
/*- Proton Tab Selected ----------------------------------------------------*/ /*- Proton Tab Selected ----------------------------------------------------*/
@supports -moz-bool-pref(userChrome.tab.proton) { @supports -moz-bool-pref("userChrome.tab.proton") {
:root:not(:-moz-lwtheme), :root:not(:-moz-lwtheme),
:root[lwt-default-theme-in-dark-mode] { :root[lwt-default-theme-in-dark-mode] {
--win-proton-tab-selected-bgcolor: color-mix(in srgb, var(--win-bgcolor) 5%, var(--win-component-bgcolor)); --win-proton-tab-selected-bgcolor: color-mix(in srgb, var(--win-bgcolor) 5%, var(--win-component-bgcolor));
@ -811,7 +811,7 @@
} }
} }
/*- Proton Tab Selected ----------------------------------------------------*/ /*- Proton Tab Selected ----------------------------------------------------*/
@supports -moz-bool-pref(userChrome.tab.proton) { @supports -moz-bool-pref("userChrome.tab.proton") {
:root:not(:-moz-lwtheme), :root:not(:-moz-lwtheme),
:root[lwt-default-theme-in-dark-mode] { :root[lwt-default-theme-in-dark-mode] {
--mac-proton-tab-selected-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 20%, -moz-dialog); --mac-proton-tab-selected-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 20%, -moz-dialog);
@ -885,7 +885,7 @@
} }
} }
/* Hard Coded */ /* Hard Coded */
@supports -moz-bool-pref(userChrome.tab.connect_to_window) { @supports -moz-bool-pref("userChrome.tab.connect_to_window") {
:root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode]
#tabbrowser-tabs:not([movingtab]) #tabbrowser-tabs:not([movingtab])
> #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox
@ -915,7 +915,7 @@
https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/light/manifest.json https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/light/manifest.json
https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/dark/manifest.json https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/dark/manifest.json
*/ */
@supports -moz-bool-pref(userChrome.theme.proton_color) { @supports -moz-bool-pref("userChrome.theme.proton_color") {
/*= Default Colors - Hard Coded ==============================================*/ /*= Default Colors - Hard Coded ==============================================*/
/* Based on chrome://global/skin/in-content/common.css */ /* Based on chrome://global/skin/in-content/common.css */
:host, :host,
@ -1058,7 +1058,7 @@
} }
} }
} }
@supports -moz-bool-pref(userChrome.theme.fully_color) { @supports -moz-bool-pref("userChrome.theme.fully_color") {
/*== Menu Color ==============================================================*/ /*== Menu Color ==============================================================*/
html#main-window menupopup { 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 */ /* is same as toolbar color https://github.com/mozilla/gecko-dev/blob/master/toolkit/themes/windows/global/global.css#L17-L67 */
@ -1245,7 +1245,7 @@
} }
} }
/* Fully Dark Mode ************************************************************/ /* Fully Dark Mode ************************************************************/
@supports -moz-bool-pref(userChrome.theme.fully_dark) { @supports -moz-bool-pref("userChrome.theme.fully_dark") {
/*= Remove White Flash =======================================================*/ /*= Remove White Flash =======================================================*/
#tabbrowser-tabbox, #tabbrowser-tabbox,
#tabbrowser-tabpanels, #tabbrowser-tabpanels,
@ -1326,7 +1326,7 @@
} }
} }
/* Proton Theme Mode **********************************************************/ /* Proton Theme Mode **********************************************************/
@supports -moz-bool-pref(userChrome.theme.proton_chrome) { @supports -moz-bool-pref("userChrome.theme.proton_chrome") {
/*= Proton Commons ===========================================================*/ /*= Proton Commons ===========================================================*/
@-moz-document url("chrome://global/content/commonDialog.xhtml"), @-moz-document url("chrome://global/content/commonDialog.xhtml"),
url("chrome://pippki/content/editcacert.xhtml"), url("chrome://pippki/content/editcacert.xhtml"),
@ -2533,7 +2533,7 @@
} }
/** Decoration ****************************************************************/ /** Decoration ****************************************************************/
/*= Cursor Types =============================================================*/ /*= Cursor Types =============================================================*/
@supports -moz-bool-pref(userChrome.decoration.cursor) { @supports -moz-bool-pref("userChrome.decoration.cursor") {
#appMenu-proton-update-banner, #appMenu-proton-update-banner,
#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2, #appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2,
#appMenu-zoomReduce-button2, #appMenu-zoomReduce-button2,
@ -2570,7 +2570,7 @@
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
/*= Field Border ===========================================================*/ /*= Field Border ===========================================================*/
@supports -moz-bool-pref(userChrome.decoration.field_border) { @supports -moz-bool-pref("userChrome.decoration.field_border") {
/*- URL, Search Bar --------------------------------------------------------*/ /*- URL, Search Bar --------------------------------------------------------*/
#urlbar:hover:not([focused="true"]) > #urlbar-background, #urlbar:hover:not([focused="true"]) > #urlbar-background,
#searchbar:hover:not(:focus-within) { #searchbar:hover:not(:focus-within) {
@ -2597,7 +2597,7 @@
} }
} }
/*= Downloads Panel ========================================================*/ /*= Downloads Panel ========================================================*/
@supports -moz-bool-pref(userChrome.decoration.download_panel) { @supports -moz-bool-pref("userChrome.decoration.download_panel") {
/* Accent Color for downloaded item */ /* Accent Color for downloaded item */
#downloadsListBox .download-state[exists] .downloadDetails { #downloadsListBox .download-state[exists] .downloadDetails {
color: var(--button-primary-bgcolor); color: var(--button-primary-bgcolor);
@ -2618,7 +2618,7 @@
} }
} }
/*= Animate ================================================================*/ /*= Animate ================================================================*/
@supports -moz-bool-pref(userChrome.decoration.animate) { @supports -moz-bool-pref("userChrome.decoration.animate") {
/*- Background Color -------------------------------------------------------*/ /*- Background Color -------------------------------------------------------*/
button, button,
toolbarbutton, toolbarbutton,
@ -2727,7 +2727,7 @@
} }
/*- Sidebar ----------------------------------------------------------------*/ /*- Sidebar ----------------------------------------------------------------*/
@supports not -moz-bool-pref(userChrome.decoration.disable_sidebar_animate) { @supports not -moz-bool-pref("userChrome.decoration.disable_sidebar_animate") {
#sidebar-box { #sidebar-box {
/* like #sidebar-box > #sidebar */ /* like #sidebar-box > #sidebar */
min-width: 14em; min-width: 14em;
@ -2825,7 +2825,7 @@
transform: rotate(180deg); transform: rotate(180deg);
} }
} }
@supports -moz-bool-pref(userChrome.decoration.disable_panel_animate) { @supports -moz-bool-pref("userChrome.decoration.disable_panel_animate") {
:root { :root {
--panelui-subview-transition-duration: 1ms !important; --panelui-subview-transition-duration: 1ms !important;
/* Disable top right corner menu sliding animation (0ms will not work!) */ /* Disable top right corner menu sliding animation (0ms will not work!) */
@ -2834,7 +2834,7 @@
} }
/** Reduce Padding ************************************************************/ /** Reduce Padding ************************************************************/
/*= Tab Bar - Distribution padding, radius ===================================*/ /*= Tab Bar - Distribution padding, radius ===================================*/
@supports -moz-bool-pref(userChrome.tab.lepton_like_padding) or -moz-bool-pref(userChrome.tab.photon_like_padding) { @supports -moz-bool-pref("userChrome.tab.lepton_like_padding") or -moz-bool-pref("userChrome.tab.photon_like_padding") {
:root { :root {
--proton-tab-block-margin: var(--tab-block-margin) !important; --proton-tab-block-margin: var(--tab-block-margin) !important;
/* Original: 4px, Legacy */ /* Original: 4px, Legacy */
@ -2845,18 +2845,18 @@
--tab-block-margin: 4px !important; --tab-block-margin: 4px !important;
} }
} }
@supports -moz-bool-pref(userChrome.tab.lepton_like_padding) { @supports -moz-bool-pref("userChrome.tab.lepton_like_padding") {
:root { :root {
--tab-block-margin: 2px !important; --tab-block-margin: 2px !important;
/* New version of --proton-tab-block-margin */ /* New version of --proton-tab-block-margin */
} }
} }
@supports -moz-bool-pref(userChrome.tab.photon_like_padding) { @supports -moz-bool-pref("userChrome.tab.photon_like_padding") {
:root { :root {
--tab-block-margin: 0px !important; --tab-block-margin: 0px !important;
} }
} }
@supports -moz-bool-pref(userChrome.tab.photon_like_radius) { @supports -moz-bool-pref("userChrome.tab.photon_like_radius") {
:root { :root {
--tab-border-radius: 0px !important; --tab-border-radius: 0px !important;
/* Original: 4px */ /* Original: 4px */
@ -2871,7 +2871,7 @@
} }
} }
/*= Tab Bar - Reduce Width, Show more tabs ===================================*/ /*= Tab Bar - Reduce Width, Show more tabs ===================================*/
@supports -moz-bool-pref(userChrome.padding.first_tab) { @supports -moz-bool-pref("userChrome.padding.first_tab") {
/* for First Tab Space */ /* for First Tab Space */
:root { :root {
--space-left-tabbar: 8px; --space-left-tabbar: 8px;
@ -2883,7 +2883,7 @@
padding-inline-start: var(--space-left-tabbar) !important; padding-inline-start: var(--space-left-tabbar) !important;
} }
} }
@supports -moz-bool-pref(userChrome.padding.tabbar_width) { @supports -moz-bool-pref("userChrome.padding.tabbar_width") {
/* Titlebar Space */ /* Titlebar Space */
.titlebar-spacer[type="pre-tabs"] { .titlebar-spacer[type="pre-tabs"] {
width: 30px !important; width: 30px !important;
@ -2910,14 +2910,14 @@
padding-right: var(--newtab-button-width-padding) !important; padding-right: var(--newtab-button-width-padding) !important;
} }
@supports not -moz-bool-pref(userChrome.tab.photon_like_padding) { @supports not -moz-bool-pref("userChrome.tab.photon_like_padding") {
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
> #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox
> .tabbrowser-tab[first-visible-unpinned-tab] { > .tabbrowser-tab[first-visible-unpinned-tab] {
margin-inline-start: 1px !important; margin-inline-start: 1px !important;
} }
} }
@supports -moz-bool-pref(userChrome.tab.photon_like_padding) { @supports -moz-bool-pref("userChrome.tab.photon_like_padding") {
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
> #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox
> .tabbrowser-tab[first-visible-unpinned-tab] { > .tabbrowser-tab[first-visible-unpinned-tab] {
@ -2948,12 +2948,12 @@
} }
/* Tab - Max Size */ /* Tab - Max Size */
@supports not -moz-bool-pref(userChrome.tab.photon_like_padding) { @supports not -moz-bool-pref("userChrome.tab.photon_like_padding") {
:root { :root {
--tab-max-width: 240px; --tab-max-width: 240px;
} }
} }
@supports -moz-bool-pref(userChrome.tab.photon_like_padding) { @supports -moz-bool-pref("userChrome.tab.photon_like_padding") {
:root { :root {
--tab-max-width: 225px; --tab-max-width: 225px;
} }
@ -2964,7 +2964,7 @@
} }
/* neighbouring tabs should "pinch" together */ /* neighbouring tabs should "pinch" together */
@supports not -moz-bool-pref(userChrome.tab.photon_like_padding) { @supports not -moz-bool-pref("userChrome.tab.photon_like_padding") {
.tabbrowser-tab { .tabbrowser-tab {
padding-inline: 1px !important; padding-inline: 1px !important;
} }
@ -2973,14 +2973,14 @@
margin-inline-end: -0.5px !important; margin-inline-end: -0.5px !important;
} }
} }
@supports -moz-bool-pref(userChrome.tab.photon_like_padding) { @supports -moz-bool-pref("userChrome.tab.photon_like_padding") {
.tabbrowser-tab { .tabbrowser-tab {
padding-inline: 0 !important; padding-inline: 0 !important;
} }
} }
} }
/*= Tab Bar - Reduce Height, Show more contents ==============================*/ /*= Tab Bar - Reduce Height, Show more contents ==============================*/
@supports -moz-bool-pref(userChrome.padding.drag_space) { @supports -moz-bool-pref("userChrome.padding.drag_space") {
/* for Extra Drag Space */ /* for Extra Drag Space */
:root { :root {
--space-above-tabbar: 8px; --space-above-tabbar: 8px;
@ -2996,9 +2996,9 @@
padding-top: var(--space-above-tabbar) !important; padding-top: var(--space-above-tabbar) !important;
} }
} }
@supports -moz-bool-pref(userChrome.padding.tabbar_height) { @supports -moz-bool-pref("userChrome.padding.tabbar_height") {
/* Toolbar Height */ /* Toolbar Height */
@supports -moz-bool-pref(userChrome.tab.lepton_like_padding) { @supports -moz-bool-pref("userChrome.tab.lepton_like_padding") {
:root:not([uidensity]) #TabsToolbar { :root:not([uidensity]) #TabsToolbar {
--tab-min-height: 36px; --tab-min-height: 36px;
} }
@ -3011,7 +3011,7 @@
--tab-min-height: 41px; --tab-min-height: 41px;
} }
} }
@supports -moz-bool-pref(userChrome.tab.photon_like_padding) { @supports -moz-bool-pref("userChrome.tab.photon_like_padding") {
:root:not([uidensity]) #TabsToolbar { :root:not([uidensity]) #TabsToolbar {
--tab-min-height: 32px; --tab-min-height: 32px;
} }
@ -3030,7 +3030,7 @@
margin-top: 0 !important; margin-top: 0 !important;
} }
} }
@supports not -moz-bool-pref(userChrome.tab.photon_like_padding) { @supports not -moz-bool-pref("userChrome.tab.photon_like_padding") {
:root:not([uidensity]) #TabsToolbar { :root:not([uidensity]) #TabsToolbar {
--tab-min-height: 36px !important; --tab-min-height: 36px !important;
/* 38px -> 36px */ /* 38px -> 36px */
@ -3041,7 +3041,7 @@
/* 36px -> 29px */ /* 36px -> 29px */
} }
} }
@supports -moz-bool-pref(userChrome.tab.connect_to_window) { @supports -moz-bool-pref("userChrome.tab.connect_to_window") {
#TabsToolbar { #TabsToolbar {
--toolbarbutton-inner-padding: calc((var(--tab-min-height) - 18px) / 2) !important; --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 18px) / 2) !important;
/* Prevent overflow pinned tab bottom margin */ /* Prevent overflow pinned tab bottom margin */
@ -3110,21 +3110,21 @@
} }
} }
/*= Tool Bar - Button Padding ================================================*/ /*= Tool Bar - Button Padding ================================================*/
@supports -moz-bool-pref(userChrome.padding.toolbar_button) { @supports -moz-bool-pref("userChrome.padding.toolbar_button") {
:root[uidensity="compact"] { :root[uidensity="compact"] {
--toolbarbutton-outer-padding: 2px !important; --toolbarbutton-outer-padding: 2px !important;
/* Original: 3px, General is 2px */ /* Original: 3px, General is 2px */
} }
} }
/*= Nav Bar - Reduce Width ===================================================*/ /*= Nav Bar - Reduce Width ===================================================*/
@supports -moz-bool-pref(userChrome.padding.navbar_width) { @supports -moz-bool-pref("userChrome.padding.navbar_width") {
#nav-bar:not([customizing]) toolbarspring { #nav-bar:not([customizing]) toolbarspring {
min-width: 1px !important; min-width: 1px !important;
max-width: 100px !important; max-width: 100px !important;
} }
} }
/*= URL Bar - Reduce Padding =================================================*/ /*= URL Bar - Reduce Padding =================================================*/
@supports -moz-bool-pref(userChrome.padding.urlbar) { @supports -moz-bool-pref("userChrome.padding.urlbar") {
:root:not([uidensity="touch"]) #urlbar-container, :root:not([uidensity="touch"]) #urlbar-container,
:root:not([uidensity="touch"]) #search-container { :root:not([uidensity="touch"]) #search-container {
padding-block: 3px !important; padding-block: 3px !important;
@ -3157,7 +3157,7 @@
padding-block: 2px !important; padding-block: 2px !important;
} }
} }
@supports -moz-bool-pref(userChrome.padding.urlView_expanding) { @supports -moz-bool-pref("userChrome.padding.urlView_expanding") {
#urlbar[breakout][breakout-extend] { #urlbar[breakout][breakout-extend] {
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
left: 0 !important; left: 0 !important;
@ -3175,7 +3175,7 @@
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
} }
} }
@supports -moz-bool-pref(userChrome.padding.urlView_result) { @supports -moz-bool-pref("userChrome.padding.urlView_result") {
.urlbarView { .urlbarView {
margin-inline: 0 !important; margin-inline: 0 !important;
width: 100% !important; width: 100% !important;
@ -3186,14 +3186,14 @@
} }
} }
/*= BookMark Bar - Reduce Height =============================================*/ /*= BookMark Bar - Reduce Height =============================================*/
@supports -moz-bool-pref(userChrome.padding.bookmarkbar) { @supports -moz-bool-pref("userChrome.padding.bookmarkbar") {
:root[uidensity="compact"] #PersonalToolbar toolbarbutton { :root[uidensity="compact"] #PersonalToolbar toolbarbutton {
margin-top: 0px; margin-top: 0px;
/* Original: 2px */ /* Original: 2px */
} }
} }
/*= Info Bar - Reduce Padding ================================================*/ /*= Info Bar - Reduce Padding ================================================*/
@supports -moz-bool-pref(userChrome.padding.infobar) { @supports -moz-bool-pref("userChrome.padding.infobar") {
:root:not([uidensity]) #tab-notification-deck { :root:not([uidensity]) #tab-notification-deck {
--infobar-message-margin: 0 4px 3px; --infobar-message-margin: 0 4px 3px;
} }
@ -3251,7 +3251,7 @@
} }
} }
/*= Menu - Reduce Padding ====================================================*/ /*= Menu - Reduce Padding ====================================================*/
@supports -moz-bool-pref(userChrome.padding.menu) { @supports -moz-bool-pref("userChrome.padding.menu") {
:root { :root {
--menu-padding: 0.35em; --menu-padding: 0.35em;
/* Win7, 8: 0px */ /* Win7, 8: 0px */
@ -3265,7 +3265,7 @@
--menu-padding: 0.5em; --menu-padding: 0.5em;
} }
@supports -moz-bool-pref(userChrome.padding.menu_compact) { @supports -moz-bool-pref("userChrome.padding.menu_compact") {
:root { :root {
--menu-padding: 2px; --menu-padding: 2px;
} }
@ -3333,7 +3333,7 @@
} }
} }
/*= Bookmark Menu - Reduce Padding ===========================================*/ /*= Bookmark Menu - Reduce Padding ===========================================*/
@supports -moz-bool-pref(userChrome.padding.bookmark_menu) { @supports -moz-bool-pref("userChrome.padding.bookmark_menu") {
:root { :root {
--bookmark-menu-padding: 3px; --bookmark-menu-padding: 3px;
} }
@ -3350,7 +3350,7 @@
} }
} }
/*= Global Menu - Set Padding ================================================*/ /*= Global Menu - Set Padding ================================================*/
@supports -moz-bool-pref(userChrome.padding.global_menu) { @supports -moz-bool-pref("userChrome.padding.global_menu") {
/* Vertical Align - Center & Height: 100% */ /* Vertical Align - Center & Height: 100% */
#main-menubar { #main-menubar {
-moz-box-flex: 1 !important; -moz-box-flex: 1 !important;
@ -3385,7 +3385,7 @@
} }
} }
/*= Panel - Reduce padding ===================================================*/ /*= Panel - Reduce padding ===================================================*/
@supports -moz-bool-pref(userChrome.padding.panel) { @supports -moz-bool-pref("userChrome.padding.panel") {
:root { :root {
--arrowpanel-menuicon-padding: 8px; --arrowpanel-menuicon-padding: 8px;
--arrowpanel-menuitem-margin: 0 var(--arrowpanel-menuicon-padding) !important; --arrowpanel-menuitem-margin: 0 var(--arrowpanel-menuicon-padding) !important;
@ -3407,7 +3407,7 @@
} }
} }
/*= Popup Panel - Reduce padding =============================================*/ /*= Popup Panel - Reduce padding =============================================*/
@supports -moz-bool-pref(userChrome.padding.popup_panel) { @supports -moz-bool-pref("userChrome.padding.popup_panel") {
#protections-popup-main-header-label { #protections-popup-main-header-label {
height: unset !important; height: unset !important;
/* Original: 37.6px */ /* Original: 37.6px */
@ -3472,7 +3472,7 @@
} }
/** Tab Bar UI ****************************************************************/ /** Tab Bar UI ****************************************************************/
/*= Tab Bar - Connect to window ==============================================*/ /*= Tab Bar - Connect to window ==============================================*/
@supports -moz-bool-pref(userChrome.tab.connect_to_window) { @supports -moz-bool-pref("userChrome.tab.connect_to_window") {
.tab-background { .tab-background {
border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important; border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important;
margin-bottom: 0px !important; margin-bottom: 0px !important;
@ -3504,7 +3504,7 @@
} }
/*= Selected Tab =============================================================*/ /*= Selected Tab =============================================================*/
/*= Selected Tab - Color like toolbar ========================================*/ /*= Selected Tab - Color like toolbar ========================================*/
@supports -moz-bool-pref(userChrome.tab.connect_to_window) { @supports -moz-bool-pref("userChrome.tab.connect_to_window") {
:root:not(:-moz-lwtheme) { :root:not(:-moz-lwtheme) {
/* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */ /* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */
--tab-selected-bgcolor: unset !important; --tab-selected-bgcolor: unset !important;
@ -3523,7 +3523,7 @@
} }
} }
/*= Multi Selected Color - More Contrast =====================================*/ /*= Multi Selected Color - More Contrast =====================================*/
@supports -moz-bool-pref(userChrome.tab.multi_selected) { @supports -moz-bool-pref("userChrome.tab.multi_selected") {
#tabbrowser-tabs:not([movingtab]) #tabbrowser-tabs:not([movingtab])
> #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox
> .tabbrowser-tab > .tabbrowser-tab
@ -3545,7 +3545,7 @@
} }
} }
/*= Selected Tab - Box Shadow ================================================*/ /*= Selected Tab - Box Shadow ================================================*/
@supports -moz-bool-pref(userChrome.tab.box_shadow) { @supports -moz-bool-pref("userChrome.tab.box_shadow") {
#TabsToolbar[brighttext] #TabsToolbar[brighttext]
#tabbrowser-tabs:not([noshadowfortests]) #tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab[visuallyselected="true"]:not(:focus) .tabbrowser-tab[visuallyselected="true"]:not(:focus)
@ -3606,7 +3606,7 @@
} }
} }
/*= Selected Tab - Bottom Rounded Corner =====================================*/ /*= Selected Tab - Bottom Rounded Corner =====================================*/
@supports -moz-bool-pref(userChrome.tab.bottom_rounded_corner) { @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") {
#tabbrowser-tabs { #tabbrowser-tabs {
--tab-corner-rounding: 3px; --tab-corner-rounding: 3px;
/* 10px looks about like chromium - 17px looks close to Australis tabs */ /* 10px looks about like chromium - 17px looks close to Australis tabs */
@ -3684,7 +3684,7 @@
} }
} }
/*= Selected Tab - Photon like contextline ===================================*/ /*= Selected Tab - Photon like contextline ===================================*/
@supports -moz-bool-pref(userChrome.tab.photon_like_contextline) { @supports -moz-bool-pref("userChrome.tab.photon_like_contextline") {
:root[lwtheme-mozlightdark] #tabbrowser-tabs, :root[lwtheme-mozlightdark] #tabbrowser-tabs,
:root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"],
:root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] {
@ -3774,8 +3774,8 @@
} }
/*= Unselected Tab - Divide line =============================================*/ /*= Unselected Tab - Divide line =============================================*/
/*= Unselected Tab - Dynamic Separator =======================================*/ /*= Unselected Tab - Dynamic Separator =======================================*/
@supports -moz-bool-pref(userChrome.tab.dynamic_separtor) { @supports -moz-bool-pref("userChrome.tab.dynamic_separtor") {
@supports -moz-bool-pref(userChrome.tab.newtab_button_like_tab) { @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
#tabbrowser-arrowscrollbox { #tabbrowser-arrowscrollbox {
position: absolute; position: absolute;
} }
@ -3798,7 +3798,7 @@
transform: translateX(-2.5px) translateY(calc(-50% + 1px)); transform: translateX(-2.5px) translateY(calc(-50% + 1px));
} }
} }
@supports not -moz-bool-pref(userChrome.tab.newtab_button_like_tab) { @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
.tab-background::before, .tab-background::before,
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab]
@ -3830,12 +3830,12 @@
opacity: var(--tab-separator-opacity); opacity: var(--tab-separator-opacity);
} }
@supports -moz-bool-pref(userChrome.tab.newtab_button_like_tab) { @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
#tabs-newtab-button:not(:hover, [open])::before { #tabs-newtab-button:not(:hover, [open])::before {
opacity: var(--tab-separator-opacity); opacity: var(--tab-separator-opacity);
} }
} }
@supports not -moz-bool-pref(userChrome.tab.newtab_button_like_tab) { @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before, #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before,
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab]
@ -3853,7 +3853,7 @@
opacity: 0 !important; opacity: 0 !important;
} }
@supports -moz-bool-pref(userChrome.tab.newtab_button_like_tab) { @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
#navigator-toolbox:not([movingtab]) #navigator-toolbox:not([movingtab])
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
+ .tabbrowser-tab + .tabbrowser-tab
@ -3868,7 +3868,7 @@
opacity: 0 !important; opacity: 0 !important;
} }
} }
@supports not -moz-bool-pref(userChrome.tab.newtab_button_like_tab) { @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
+ .tabbrowser-tab:not([visuallyselected]) + .tabbrowser-tab:not([visuallyselected])
.tab-background::before { .tab-background::before {
@ -3882,13 +3882,13 @@
/* cubic-bezier(.07, .95, 0, 1) */ /* cubic-bezier(.07, .95, 0, 1) */
} }
@supports -moz-bool-pref(userChrome.tab.newtab_button_like_tab) { @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
#tabs-newtab-button::before { #tabs-newtab-button::before {
transition: opacity 0.2s var(--animation-easing-function); transition: opacity 0.2s var(--animation-easing-function);
/* cubic-bezier(.07, .95, 0, 1) */ /* cubic-bezier(.07, .95, 0, 1) */
} }
} }
@supports not -moz-bool-pref(userChrome.tab.newtab_button_like_tab) { @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab]
.tab-background::after { .tab-background::after {
@ -3903,7 +3903,7 @@
} }
} }
/*= Unselected Tab - Static Separator ========================================*/ /*= Unselected Tab - Static Separator ========================================*/
@supports -moz-bool-pref(userChrome.tab.static_separator) { @supports -moz-bool-pref("userChrome.tab.static_separator") {
.tabbrowser-tab[first-visible-tab="true"] .tab-background::before, .tabbrowser-tab[first-visible-tab="true"] .tab-background::before,
.tab-background::after { .tab-background::after {
content: ""; content: "";
@ -3946,7 +3946,7 @@
} }
/*= New tab button ============================================================*/ /*= New tab button ============================================================*/
/*= New tab button - Looks like tab ==========================================*/ /*= New tab button - Looks like tab ==========================================*/
@supports -moz-bool-pref(userChrome.tab.newtab_button_like_tab) { @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
#tabs-newtab-button { #tabs-newtab-button {
/* Original: /* Original:
margin: 0 0 var(--tabs-navbar-shadow-size) !important margin: 0 0 var(--tabs-navbar-shadow-size) !important
@ -4006,7 +4006,7 @@
} }
} }
/*= New tab button - Smaller button ==========================================*/ /*= New tab button - Smaller button ==========================================*/
@supports -moz-bool-pref(userChrome.tab.newtab_button_smaller) { @supports -moz-bool-pref("userChrome.tab.newtab_button_smaller") {
#tabs-newtab-button > .toolbarbutton-icon { #tabs-newtab-button > .toolbarbutton-icon {
margin-left: 1px; margin-left: 1px;
/* Origianl: calc((var(--tab-min-height) - 16px) / 2) = 10px */ /* Origianl: calc((var(--tab-min-height) - 16px) / 2) = 10px */
@ -4024,7 +4024,7 @@
} }
} }
/*= New tab button - Proton like button ======================================*/ /*= New tab button - Proton like button ======================================*/
@supports -moz-bool-pref(userChrome.tab.newtab_button_proton) { @supports -moz-bool-pref("userChrome.tab.newtab_button_proton") {
:root:not([uidensity="touch"]) #tabs-newtab-button > .toolbarbutton-icon { :root:not([uidensity="touch"]) #tabs-newtab-button > .toolbarbutton-icon {
--toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 1px); --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 1px);
} }
@ -4038,14 +4038,14 @@
} }
} }
/*= Unloaded Tab - Contents Opacity ===========================================*/ /*= Unloaded Tab - Contents Opacity ===========================================*/
@supports -moz-bool-pref(userChrome.tab.unloaded) { @supports -moz-bool-pref("userChrome.tab.unloaded") {
#tabbrowser-tabs .tabbrowser-tab[pending] .tab-content { #tabbrowser-tabs .tabbrowser-tab[pending] .tab-content {
opacity: 0.7; opacity: 0.7;
} }
} }
/*= Clipped tabs =============================================================*/ /*= Clipped tabs =============================================================*/
/** Clipped tabs - Letters cleary *********************************************/ /** Clipped tabs - Letters cleary *********************************************/
@supports -moz-bool-pref(userChrome.tab.letters_cleary) { @supports -moz-bool-pref("userChrome.tab.letters_cleary") {
:root { :root {
--inline-tab-padding: 6px !important; --inline-tab-padding: 6px !important;
/* Original: 8px */ /* Original: 8px */
@ -4079,7 +4079,7 @@
} }
} }
/** Clipped tabs - Show close button at hover *********************************/ /** Clipped tabs - Show close button at hover *********************************/
@supports -moz-bool-pref(userChrome.tab.close_button_at_hover) { @supports -moz-bool-pref("userChrome.tab.close_button_at_hover") {
#tabbrowser-tabs[closebuttons="activetab"] #tabbrowser-tabs[closebuttons="activetab"]
> #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox
> .tabbrowser-tab:not([pinned]) > .tabbrowser-tab:not([pinned])
@ -4099,7 +4099,7 @@
opacity: 1; opacity: 1;
} }
@supports -moz-bool-pref(userChrome.tab.close_button_at_hover.always) { @supports -moz-bool-pref("userChrome.tab.close_button_at_hover.always") {
.tabbrowser-tab:not([visuallyselected]) .tab-close-button { .tabbrowser-tab:not([visuallyselected]) .tab-close-button {
visibility: collapse !important; visibility: collapse !important;
opacity: 0; opacity: 0;
@ -4122,7 +4122,7 @@
transition: opacity 0.25s var(--animation-easing-function) !important; transition: opacity 0.25s var(--animation-easing-function) !important;
} }
@supports -moz-bool-pref(userChrome.tab.close_button_at_hover.always) { @supports -moz-bool-pref("userChrome.tab.close_button_at_hover.always") {
/* Fade out */ /* Fade out */
.tabbrowser-tab:not([visuallyselected]) .tab-close-button { .tabbrowser-tab:not([visuallyselected]) .tab-close-button {
transition: opacity 0.1s var(--animation-easing-function) !important; transition: opacity 0.1s var(--animation-easing-function) !important;
@ -4176,26 +4176,26 @@
} }
} }
/** Clipped tabs - Always show tab icon ***************************************/ /** Clipped tabs - Always show tab icon ***************************************/
@supports -moz-bool-pref(userChrome.tab.always_show_tab_icon) { @supports -moz-bool-pref("userChrome.tab.always_show_tab_icon") {
.tab-icon-image:not([src], [pinned], [crashed], [busy]) { .tab-icon-image:not([src], [pinned], [crashed], [busy]) {
display: -moz-inline-box !important; display: -moz-inline-box !important;
} }
} }
/*= Sound Tab ================================================================*/ /*= Sound Tab ================================================================*/
/*= Sound Tab - Hide Label ===================================================*/ /*= Sound Tab - Hide Label ===================================================*/
@supports -moz-bool-pref(userChrome.tab.sound_hide_label) { @supports -moz-bool-pref("userChrome.tab.sound_hide_label") {
.tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) { .tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) {
display: none !important; display: none !important;
} }
} }
/*= Sound Tab - Show Label ===================================================*/ /*= Sound Tab - Show Label ===================================================*/
@supports -moz-bool-pref(userChrome.tab.sound_show_label) { @supports -moz-bool-pref("userChrome.tab.sound_show_label") {
.tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) { .tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) {
display: -moz-box !important; display: -moz-box !important;
} }
} }
/*= Sound Tab - Show with Favicons ===========================================*/ /*= Sound Tab - Show with Favicons ===========================================*/
@supports -moz-bool-pref(userChrome.tab.sound_with_favicons) { @supports -moz-bool-pref("userChrome.tab.sound_with_favicons") {
/* Makes the favicons always visible (also on hover) */ /* Makes the favicons always visible (also on hover) */
.tab-icon-image:not([pinned]) { .tab-icon-image:not([pinned]) {
opacity: 1 !important; opacity: 1 !important;
@ -4297,7 +4297,7 @@
} }
} }
/*= PictureInPicture Tab - Show PIP Icon =====================================*/ /*= PictureInPicture Tab - Show PIP Icon =====================================*/
@supports -moz-bool-pref(userChrome.tab.pip) { @supports -moz-bool-pref("userChrome.tab.pip") {
#tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-content::after, #tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-content::after,
#tabbrowser-tabs[closebuttons="activetab"] #tabbrowser-tabs[closebuttons="activetab"]
.tabbrowser-tab[pictureinpicture]:not([pinned], :hover) .tabbrowser-tab[pictureinpicture]:not([pinned], :hover)
@ -4340,8 +4340,8 @@
} }
} }
/*= Container Tab - Color line at icon's bottom ==============================*/ /*= Container Tab - Color line at icon's bottom ==============================*/
@supports -moz-bool-pref(userChrome.tab.container) { @supports -moz-bool-pref("userChrome.tab.container") {
@supports not -moz-bool-pref(userChrome.tab.photon_like_contextline) { @supports not -moz-bool-pref("userChrome.tab.photon_like_contextline") {
.tab-context-line { .tab-context-line {
display: none; display: none;
} }
@ -4428,13 +4428,13 @@
} }
} }
/*= Crashed Tab - Don't show Favicons ========================================*/ /*= Crashed Tab - Don't show Favicons ========================================*/
@supports -moz-bool-pref(userChrome.tab.crashed) { @supports -moz-bool-pref("userChrome.tab.crashed") {
.tab-icon-image[crashed] { .tab-icon-image[crashed] {
display: none !important; display: none !important;
} }
} }
/*= Tab Label - Make to Center ===============================================*/ /*= Tab Label - Make to Center ===============================================*/
@supports -moz-bool-pref(userChrome.tab.centered_label) { @supports -moz-bool-pref("userChrome.tab.centered_label") {
/* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_label.css */ /* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_label.css */
.tab-label-container { .tab-label-container {
display: grid; display: grid;
@ -4452,7 +4452,7 @@
margin-inline-end: 5px; margin-inline-end: 5px;
} }
@supports -moz-bool-pref(userChrome.tab.close_button_at_hover) { @supports -moz-bool-pref("userChrome.tab.close_button_at_hover") {
#tabbrowser-tabs[closebuttons="activetab"] #tabbrowser-tabs[closebuttons="activetab"]
.tabbrowser-tab:not(:hover, [pinned]) .tabbrowser-tab:not(:hover, [pinned])
.tab-label-container:not([textoverflow]) { .tab-label-container:not([textoverflow]) {
@ -4468,7 +4468,7 @@
} }
/** Url View UI ***************************************************************/ /** Url View UI ***************************************************************/
/*= Url View - Move icon to left =============================================*/ /*= Url View - Move icon to left =============================================*/
@supports -moz-bool-pref(userChrome.urlView.move_icon_to_left) { @supports -moz-bool-pref("userChrome.urlView.move_icon_to_left") {
.urlbarView-type-icon { .urlbarView-type-icon {
min-width: 16px !important; min-width: 16px !important;
height: 16px !important; height: 16px !important;
@ -4481,19 +4481,19 @@
} }
} }
/*= Url View - Go button when typing =========================================*/ /*= Url View - Go button when typing =========================================*/
@supports -moz-bool-pref(userChrome.urlView.go_button_when_typing) { @supports -moz-bool-pref("userChrome.urlView.go_button_when_typing") {
#urlbar-input-container[pageproxystate="invalid"] #urlbar-go-button { #urlbar-input-container[pageproxystate="invalid"] #urlbar-go-button {
display: block !important; display: block !important;
} }
} }
/*= Url View - Always show page actions ======================================*/ /*= Url View - Always show page actions ======================================*/
@supports -moz-bool-pref(userChrome.urlView.always_show_page_actions) { @supports -moz-bool-pref("userChrome.urlView.always_show_page_actions") {
#pageActionButton { #pageActionButton {
display: block !important; display: block !important;
} }
} }
/** Fullscreen - Overlap toolbar **********************************************/ /** Fullscreen - Overlap toolbar **********************************************/
@supports -moz-bool-pref(userChrome.fullscreen.overlap) { @supports -moz-bool-pref("userChrome.fullscreen.overlap") {
@supports not -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { @supports not -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
:root[sizemode="fullscreen"] #navigator-toolbox { :root[sizemode="fullscreen"] #navigator-toolbox {
position: fixed !important; position: fixed !important;
@ -4517,7 +4517,7 @@
} }
} }
/** Library - Icons Replace ***************************************************/ /** Library - Icons Replace ***************************************************/
@supports -moz-bool-pref(userChrome.icon.library) { @supports -moz-bool-pref("userChrome.icon.library") {
/*= Standard Folder - More Visible ===========================================*/ /*= Standard Folder - More Visible ===========================================*/
/* on Toolbar and Menus */ /* on Toolbar and Menus */
:-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) :-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu)
@ -4707,12 +4707,12 @@
} }
} }
/** Panel - Icons *************************************************************/ /** Panel - Icons *************************************************************/
@supports -moz-bool-pref(userChrome.panel.remove_strip) { @supports -moz-bool-pref("userChrome.panel.remove_strip") {
#appMenu-fxa-separator { #appMenu-fxa-separator {
display: none; display: none;
} }
} }
@supports -moz-bool-pref(userChrome.icon.panel) { @supports -moz-bool-pref("userChrome.icon.panel") {
/*= Padding ==================================================================*/ /*= Padding ==================================================================*/
:root { :root {
--arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-padding) * 2 + 8px) !important; --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-padding) * 2 + 8px) !important;
@ -4723,7 +4723,7 @@
width: 16px; width: 16px;
} }
@supports -moz-bool-pref(userChrome.icon.panel_sparse) { @supports -moz-bool-pref("userChrome.icon.panel_sparse") {
:root { :root {
/* Blank Menu Left Padding */ /* Blank Menu Left Padding */
--arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 3px); --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 3px);
@ -4855,12 +4855,12 @@
background-image: var(--avatar-image-url) !important; background-image: var(--avatar-image-url) !important;
} }
@supports -moz-bool-pref(userChrome.icon.panel_full) { @supports -moz-bool-pref("userChrome.icon.panel_full") {
#appMenu-new-tab-button2 { #appMenu-new-tab-button2 {
list-style-image: url("chrome://browser/skin/new-tab.svg"); list-style-image: url("chrome://browser/skin/new-tab.svg");
} }
} }
@supports -moz-bool-pref(userChrome.icon.panel_sparse) { @supports -moz-bool-pref("userChrome.icon.panel_sparse") {
#appMenu-new-tab-button2, #appMenu-new-tab-button2,
#appMenu-passwords-button, #appMenu-passwords-button,
#appMenu-extensions-themes-button, #appMenu-extensions-themes-button,
@ -4897,7 +4897,7 @@
list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
} }
@supports -moz-bool-pref(userChrome.icon.panel_full) { @supports -moz-bool-pref("userChrome.icon.panel_full") {
#appMenu-passwords-button { #appMenu-passwords-button {
list-style-image: url("chrome://browser/skin/login.svg"); list-style-image: url("chrome://browser/skin/login.svg");
} }
@ -4910,7 +4910,7 @@
list-style-image: url("chrome://global/skin/icons/print.svg"); list-style-image: url("chrome://global/skin/icons/print.svg");
} }
@supports -moz-bool-pref(userChrome.icon.panel_full) { @supports -moz-bool-pref("userChrome.icon.panel_full") {
#appMenu-save-file-button2 { #appMenu-save-file-button2 {
list-style-image: url("chrome://browser/skin/save.svg"); list-style-image: url("chrome://browser/skin/save.svg");
} }
@ -4927,7 +4927,7 @@
list-style-image: url("chrome://global/skin/icons/settings.svg"); list-style-image: url("chrome://global/skin/icons/settings.svg");
} }
@supports -moz-bool-pref(userChrome.icon.panel_full) { @supports -moz-bool-pref("userChrome.icon.panel_full") {
#appMenu-more-button2 { #appMenu-more-button2 {
list-style-image: url("chrome://browser/skin/ion.svg"); list-style-image: url("chrome://browser/skin/ion.svg");
} }
@ -5312,7 +5312,7 @@
} }
} }
/** Menu - Icons Layout *******************************************************/ /** Menu - Icons Layout *******************************************************/
@supports -moz-bool-pref(userChrome.icon.menu) { @supports -moz-bool-pref("userChrome.icon.menu") {
menupopup menuitem:not([type="checkbox"], [type="radio"]), menupopup menuitem:not([type="checkbox"], [type="radio"]),
menupopup menu:not([type="checkbox"], [type="radio"]), menupopup menu:not([type="checkbox"], [type="radio"]),
#main-menubar > menu { #main-menubar > menu {
@ -5377,7 +5377,7 @@
} }
/* Menubar */ /* Menubar */
@supports -moz-bool-pref(userChrome.icon.global_menu) { @supports -moz-bool-pref("userChrome.icon.global_menu") {
#main-menubar > menu { #main-menubar > menu {
background-position: left var(--context-menu-background-padding-default) center !important; background-position: left var(--context-menu-background-padding-default) center !important;
padding-inline-start: calc(16px + var(--context-menu-background-padding-default)) !important; padding-inline-start: calc(16px + var(--context-menu-background-padding-default)) !important;
@ -5611,7 +5611,7 @@
padding-inline-start: calc(var(--arrowpanel-menuitem-padding) + 3px) !important; padding-inline-start: calc(var(--arrowpanel-menuitem-padding) + 3px) !important;
} }
} }
@supports -moz-bool-pref(userChrome.icon.context_menu) { @supports -moz-bool-pref("userChrome.icon.context_menu") {
/** Context Menu - Icons ******************************************************/ /** Context Menu - Icons ******************************************************/
/*= tabContextMenu ===========================================================*/ /*= tabContextMenu ===========================================================*/
#context_openANewTab { #context_openANewTab {
@ -6421,7 +6421,7 @@
--menuitem-image: url("chrome://global/skin/icons/settings.svg"); --menuitem-image: url("chrome://global/skin/icons/settings.svg");
} }
} }
@supports -moz-bool-pref(userChrome.icon.global_menu) { @supports -moz-bool-pref("userChrome.icon.global_menu") {
/** Global Menu ***************************************************************/ /** Global Menu ***************************************************************/
/*= main-menubar =============================================================*/ /*= main-menubar =============================================================*/
#file-menu { #file-menu {
@ -6708,8 +6708,8 @@
} }
} }
/** Libray Menu ***************************************************************/ /** Libray Menu ***************************************************************/
@supports -moz-bool-pref(userChrome.icon.library) { @supports -moz-bool-pref("userChrome.icon.library") {
@supports -moz-bool-pref(userChrome.icon.menu) { @supports -moz-bool-pref("userChrome.icon.menu") {
/*= organizeButtonPopup ======================================================*/ /*= organizeButtonPopup ======================================================*/
#newbookmark { #newbookmark {
--menuitem-image: url("chrome://browser/skin/bookmark.svg"); --menuitem-image: url("chrome://browser/skin/bookmark.svg");
@ -6779,12 +6779,12 @@
} }
} }
/*= Waterfox =================================================================*/ /*= Waterfox =================================================================*/
@supports -moz-bool-pref(userChrome.icon.panel) { @supports -moz-bool-pref("userChrome.icon.panel") {
#appMenu-restart-button { #appMenu-restart-button {
list-style-image: url("./icons/refresh-cw.svg") !important; list-style-image: url("./icons/refresh-cw.svg") !important;
} }
} }
@supports -moz-bool-pref(userChrome.icon.menu) { @supports -moz-bool-pref("userChrome.icon.menu") {
#menu_FileRestartItem { #menu_FileRestartItem {
--menuitem-image: url("./icons/refresh-cw.svg"); --menuitem-image: url("./icons/refresh-cw.svg");
} }
@ -6795,7 +6795,7 @@
-moz-context-properties: fill; -moz-context-properties: fill;
} }
} }
@supports -moz-bool-pref(userChrome.theme.fully_color) { @supports -moz-bool-pref("userChrome.theme.fully_color") {
/* New Folder Button */ /* New Folder Button */
#editBMPanel_newFolderButton { #editBMPanel_newFolderButton {
appearance: none; appearance: none;
@ -6822,7 +6822,7 @@
} }
} }
/*= Tor Browser ==============================================================*/ /*= Tor Browser ==============================================================*/
@supports -moz-bool-pref(userChrome.icon.panel) { @supports -moz-bool-pref("userChrome.icon.panel") {
#appMenuNewIdentity { #appMenuNewIdentity {
list-style-image: url("chrome://browser/skin/new_identity.svg"); list-style-image: url("chrome://browser/skin/new_identity.svg");
} }
@ -6835,7 +6835,7 @@
list-style-image: url("chrome://browser/skin/onion.svg"); list-style-image: url("chrome://browser/skin/onion.svg");
} }
} }
@supports -moz-bool-pref(userChrome.icon.menu) { @supports -moz-bool-pref("userChrome.icon.menu") {
#menu_newIdentity { #menu_newIdentity {
--menuitem-image: url("chrome://browser/skin/new_identity.svg"); --menuitem-image: url("chrome://browser/skin/new_identity.svg");
} }

32
userContent.css
View file

@ -2,7 +2,7 @@
@namespace html url("http://www.w3.org/1999/xhtml"); @namespace html url("http://www.w3.org/1999/xhtml");
/** Video player **************************************************************/ /** Video player **************************************************************/
/* Control Bar UI */ /* Control Bar UI */
@supports -moz-bool-pref(userContent.player.ui) { @supports -moz-bool-pref("userContent.player.ui") {
audio { audio {
--duration-color: #929292; --duration-color: #929292;
/* Like Original */ /* Like Original */
@ -45,7 +45,7 @@
/* Original: #929292 */ /* Original: #929292 */
} }
} }
@supports -moz-bool-pref(userContent.player.icon) { @supports -moz-bool-pref("userContent.player.icon") {
#controlsContainer .fullscreenButton { #controlsContainer .fullscreenButton {
background-image: url("./icons/enter-fullscreen.svg") !important; background-image: url("./icons/enter-fullscreen.svg") !important;
} }
@ -54,14 +54,14 @@
background-image: url("./icons/exit-fullscreen.svg") !important; background-image: url("./icons/exit-fullscreen.svg") !important;
} }
} }
@supports -moz-bool-pref(userContent.player.noaudio) { @supports -moz-bool-pref("userContent.player.noaudio") {
#controlsContainer .muteButton[noAudio] { #controlsContainer .muteButton[noAudio] {
/* Remove volume button at noAudio */ /* Remove volume button at noAudio */
display: none !important; display: none !important;
} }
} }
/* Control Bar Size */ /* Control Bar Size */
@supports -moz-bool-pref(userContent.player.size) { @supports -moz-bool-pref("userContent.player.size") {
#controlsContainer { #controlsContainer {
--button-size: 32px !important; --button-size: 32px !important;
/* Original: 30px */ /* Original: 30px */
@ -104,7 +104,7 @@
} }
} }
/* Click to play UI */ /* Click to play UI */
@supports -moz-bool-pref(userContent.player.click_to_play) { @supports -moz-bool-pref("userContent.player.click_to_play") {
#controlsContainer .clickToPlay { #controlsContainer .clickToPlay {
cursor: pointer; cursor: pointer;
opacity: 0.65 !important; opacity: 0.65 !important;
@ -121,7 +121,7 @@
} }
} }
/* Animation */ /* Animation */
@supports -moz-bool-pref(userContent.player.animate) { @supports -moz-bool-pref("userContent.player.animate") {
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
/* Control Bar */ /* Control Bar */
#controlsContainer .controlBar { #controlsContainer .controlBar {
@ -149,7 +149,7 @@
/** Activity Stream ***********************************************************/ /** Activity Stream ***********************************************************/
@-moz-document url("about:home"), url("about:newtab") { @-moz-document url("about:home"), url("about:newtab") {
/** Activity Stream - Search Focus Border: like URL *************************/ /** Activity Stream - Search Focus Border: like URL *************************/
@supports -moz-bool-pref(userContent.newTab.field_border) { @supports -moz-bool-pref("userContent.newTab.field_border") {
/* At DarkMode, Color */ /* At DarkMode, Color */
body[style*="--newtab-background-color:rgba(28, 27, 34, 1);"], body[style*="--newtab-background-color:rgba(28, 27, 34, 1);"],
body[style*="--newtab-background-color:rgba(42, 42, 46, 1);"], body[style*="--newtab-background-color:rgba(42, 42, 46, 1);"],
@ -165,7 +165,7 @@
} }
} }
/** Activity Stream - Web Site Icon: full size ******************************/ /** Activity Stream - Web Site Icon: full size ******************************/
@supports -moz-bool-pref(userContent.newTab.full_icon) { @supports -moz-bool-pref("userContent.newTab.full_icon") {
.top-site-outer .tile { .top-site-outer .tile {
overflow: hidden; overflow: hidden;
} }
@ -178,7 +178,7 @@
} }
} }
/** Activity Stream - Animate ***********************************************/ /** Activity Stream - Animate ***********************************************/
@supports -moz-bool-pref(userContent.newTab.animate) { @supports -moz-bool-pref("userContent.newTab.animate") {
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
:root { :root {
--animation-easing-function: cubic-bezier(0.07, 0.95, 0, 1); --animation-easing-function: cubic-bezier(0.07, 0.95, 0, 1);
@ -217,7 +217,7 @@
} }
} }
/** Activity Stream - Home Search Bar looks like proton *********************/ /** Activity Stream - Home Search Bar looks like proton *********************/
@supports -moz-bool-pref(userContent.newTab.animate) { @supports -moz-bool-pref("userContent.newTab.animate") {
/* Dropdown Colors */ /* Dropdown Colors */
#root { #root {
--newtab-search-background-color: rgba(255, 255, 255, 1); --newtab-search-background-color: rgba(255, 255, 255, 1);
@ -309,7 +309,7 @@
} }
} }
/** Error Page - Restore illustrations ****************************************/ /** Error Page - Restore illustrations ****************************************/
@supports -moz-bool-pref(userContent.page.illustration) { @supports -moz-bool-pref("userContent.page.illustration") {
@-moz-document url-prefix("about:neterror"), @-moz-document url-prefix("about:neterror"),
url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"), url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"),
url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml") url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml")
@ -416,7 +416,7 @@
} }
/** Fully Dark Mode ***********************************************************/ /** Fully Dark Mode ***********************************************************/
/*= Fully Dark Mode - Dark Mode Colors =======================================*/ /*= Fully Dark Mode - Dark Mode Colors =======================================*/
@supports -moz-bool-pref(userContent.page.proton_color) { @supports -moz-bool-pref("userContent.page.proton_color") {
/*= Default Colors - Hard Coded ==============================================*/ /*= Default Colors - Hard Coded ==============================================*/
/* Based on chrome://global/skin/in-content/common.css */ /* Based on chrome://global/skin/in-content/common.css */
:host, :host,
@ -559,7 +559,7 @@
} }
} }
} }
@supports -moz-bool-pref(userContent.page.dark_mode) { @supports -moz-bool-pref("userContent.page.dark_mode") {
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
/*= Addons.org =============================================================*/ /*= Addons.org =============================================================*/
@-moz-document url-prefix("https://addons.mozilla.org") @-moz-document url-prefix("https://addons.mozilla.org")
@ -1172,7 +1172,7 @@
} }
} }
/** Fully Proton Mode *********************************************************/ /** Fully Proton Mode *********************************************************/
@supports -moz-bool-pref(userContent.page.proton) { @supports -moz-bool-pref("userContent.page.proton") {
/*= Common contents ==========================================================*/ /*= Common contents ==========================================================*/
/*= abouts' common ===========================================================*/ /*= abouts' common ===========================================================*/
@-moz-document url-prefix("about:plugins"), @-moz-document url-prefix("about:plugins"),
@ -1581,7 +1581,7 @@
@-moz-document url("chrome://browser/content/places/places.xhtml") @-moz-document url("chrome://browser/content/places/places.xhtml")
{ {
/** Library - Icons Replace *************************************************/ /** Library - Icons Replace *************************************************/
@supports -moz-bool-pref(userChrome.icon.library) { @supports -moz-bool-pref("userChrome.icon.library") {
/*= Standard Folder - More Visible ===========================================*/ /*= Standard Folder - More Visible ===========================================*/
/* on Toolbar and Menus */ /* on Toolbar and Menus */
:-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) :-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu)
@ -1767,7 +1767,7 @@
} }
} }
/*= Context Menu ===========================================================*/ /*= Context Menu ===========================================================*/
@supports -moz-bool-pref(userChrome.icon.context_menu) { @supports -moz-bool-pref("userChrome.icon.context_menu") {
menupopup menuitem:not([type="checkbox"], [type="radio"]), menupopup menuitem:not([type="checkbox"], [type="radio"]),
menupopup menu:not([type="checkbox"], [type="radio"]), menupopup menu:not([type="checkbox"], [type="radio"]),
#main-menubar > menu { #main-menubar > menu {