Update to lepton 6.0.0

This commit is contained in:
RealStickman 2022-08-29 19:20:12 +02:00
parent 9ad7265158
commit 98621a80e5
100 changed files with 6469 additions and 642 deletions

View File

@ -74,6 +74,9 @@ W: https://www.mamen.at
N: MarNicGit N: MarNicGit
W: https://github.com/MarNicGit W: https://github.com/MarNicGit
N: Oondanomala
W: https://github.com/Oondanomala
N: ph3b3 N: ph3b3
E: phoebeleong8@gmail.com E: phoebeleong8@gmail.com
W: https://phoebe-leong.github.io/ W: https://phoebe-leong.github.io/
@ -102,6 +105,9 @@ N: Tatsuyuki Ishi
E: ishitatsuyuki@gmail.com E: ishitatsuyuki@gmail.com
W: https://github.com/ishitatsuyuki W: https://github.com/ishitatsuyuki
N: thunderstone135
W: https://github.com/thunderstone135
---------- ----------
Reference Projects & Resources Reference Projects & Resources
@ -170,6 +176,11 @@ W: https://github.com/coekuss/quietfox
C: Copyright (c) 2019 coekuss C: Copyright (c) 2019 coekuss
L: MIT L: MIT
N: RainFox
W: https://github.com/1280px/rainfox
C: Copyright (c) 2020 1280px
L: MIT
N: ShadowFox N: ShadowFox
W: https://github.com/overdodactyl/ShadowFox W: https://github.com/overdodactyl/ShadowFox
C: Copyright (c) 2017 overdodactyl C: Copyright (c) 2017 overdodactyl

View File

@ -1,3 +1,3 @@
[Info] [Info]
Ver=v5.3.0 Ver=v6.0.0
Branch=photon-style Branch=photon-style

View File

@ -68,6 +68,10 @@ Some settings [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options#using-u
- Menu - Menu
- Density - Density
- Others... - Others...
- *Tabbar Layouts*
- Tabs on Bottom
- One Liner
- Vertical Tab Support
- *Tab Design* - *Tab Design*
- General: - General:
- Connect with toolbar(Buttons like tabs): like Photon - Connect with toolbar(Buttons like tabs): like Photon
@ -106,6 +110,7 @@ Some settings [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options#using-u
- Overlap mode - Overlap mode
- *Others* - *Others*
- Animations - Animations
- Hidden & Auto Hide
- Activate calculator at address bar - Activate calculator at address bar
- Mouse pointer for each context - Mouse pointer for each context

View File

@ -0,0 +1,118 @@
@use 'true' as *;
@use "example" as *;
@use "../src/utils/one_liner";
@include test-module("One Liner [mix]") {
@include test("content") {
@include assert {
@include output {
@include one_liner.OneLinerContent {
@include example;
}
}
@include expect {
@supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
@include example;
}
@supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
@media screen and (min-width: 1100px) {
@include example;
}
}
}
}
}
@include test("explicitly") {
@include assert {
@include output {
@include one_liner.OneLiner {
@include example;
}
}
@include expect {
@supports -moz-bool-pref("userChrome.tabbar.one_liner") {
@supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
@include example;
}
@supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
@media screen and (min-width: 1100px) {
@include example;
}
}
}
}
}
}
}
@include test-module("One Liner for Responsive [mix]") {
@include test("Tabs on bottom") {
@include assert {
@include output {
@include one_liner.OneLinerOnBottom {
@include example;
}
}
@include expect {
@supports not -moz-bool-pref("userChrome.tabbar.one_liner") {
@include example;
}
@supports -moz-bool-pref("userChrome.tabbar.one_liner") {
@supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
@media screen and (max-width: 1100px) {
@include example;
}
}
}
}
}
}
@include test("Tab bar") {
@include assert {
@include output {
@include one_liner.OneLinerTabbar {
@include example;
}
}
@include expect {
@supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
@include example;
}
@supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
@media screen and (min-width: 1100px) {
@include example;
}
@supports -moz-bool-pref("userChrome.autohide.tabbar") {
@include example;
}
}
}
}
}
@include test("Nav Bar") {
@include assert {
@include output {
@include one_liner.OneLinerNavbar {
@include example;
}
}
@include expect {
@supports -moz-bool-pref("userChrome.autohide.navbar") {
@supports not -moz-bool-pref("userChrome.tabbar.one_liner") {
@include example;
}
@supports -moz-bool-pref("userChrome.tabbar.one_liner") {
@supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
@media screen and (max-width: 1100px) {
@include example;
}
}
}
}
}
}
}
}

View File

@ -2988,6 +2988,17 @@
} }
} }
} }
/** Monospace *****************************************************************/
@supports -moz-bool-pref("userContent.page.monospace") {
@-moz-document url-prefix("about:"),
url-prefix("chrome://browser/content/places/places.xhtml"),
regexp("^(((jar:)?file:///)|(chrome://)).*/$")
{
* {
font-family: -moz-fixed;
}
}
}
/** Menu - Icons Layout *******************************************************/ /** Menu - Icons Layout *******************************************************/
@supports -moz-bool-pref("userChrome.icon.menu") { @supports -moz-bool-pref("userChrome.icon.menu") {
@-moz-document url("chrome://browser/content/places/places.xhtml"), @-moz-document url("chrome://browser/content/places/places.xhtml"),
@ -3396,6 +3407,9 @@
text-decoration: line-through; text-decoration: line-through;
text-decoration-color: color-mix(in srgb, currentColor 65%, transparent); text-decoration-color: color-mix(in srgb, currentColor 65%, transparent);
} }
#downloadsListBox .download-state:not([exists], [state="0"]) .downloadTarget:hover {
text-decoration: none;
}
#downloadsListBox .download-state:not([exists], [state="0"]) .downloadTypeIcon { #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTypeIcon {
filter: grayscale(100%) !important; filter: grayscale(100%) !important;
} }

View File

@ -390,6 +390,7 @@ $firefoxProfileDirPaths = @(
"${HOME}\AppData\Roaming\Mozilla\Firefox", "${HOME}\AppData\Roaming\Mozilla\Firefox",
"${HOME}\AppData\Roaming\Waterfox", "${HOME}\AppData\Roaming\Waterfox",
"${HOME}\AppData\Roaming\librewolf", "${HOME}\AppData\Roaming\librewolf",
"${HOME}\AppData\Roaming\Ghostery Browser",
"${HOME}\Desktop\Tor Browser\Browser\TorBrowser\Data\Browser" "${HOME}\Desktop\Tor Browser\Browser\TorBrowser\Data\Browser"
) )

View File

@ -0,0 +1,16 @@
#back-button[disabled="true"] {
margin-left: -36px !important;
opacity: 0 !important;
pointer-events: none;
}
@include Animate {
#back-button {
transition-property: background-color, opacity, margin-left !important;
}
#back-button[disabled="true"] {
transition: background-color 1s var(--animation-easing-function),
opacity 1s var(--animation-easing-function),
margin-left 0.5s ease !important;
}
}

View File

@ -0,0 +1,30 @@
// Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/autohide_bookmarks_toolbar.css
#PersonalToolbar:not([customizing]) {
margin-bottom: var(--uc-bm-hide-height);
opacity: 0;
will-change: margin-bottom, opacity;
@include Option("userChrome.autohide.toolbar_overlap") {
&[collapsed="true"] {
visibility: visible !important;
max-height: unset !important;
}
}
}
#navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) {
margin-bottom: 0;
opacity: 1;
}
@include Animate {
#PersonalToolbar:not([customizing]) {
// --ext-theme-background-transition: background-color 0.1s cubic-bezier(.17,.67,.83,.67);
transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition) !important;
}
#navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) {
transition-delay: 0s !important;
}
}

View File

@ -0,0 +1,50 @@
@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.tabbar.one_liner") {
:root {
--uc-tabbar-height: var(--tab-min-height); // calc((var(--tab-block-margin) * 2) + var(--tab-min-height));
--uc-tabbar-hide-height: calc(-1 * var(--uc-tabbar-height));
--uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)));
--uc-navbar-hide-height: calc(-1 * var(--uc-navbar-height));
--uc-bm-height: calc(20px + (2 * var(--bookmark-block-padding, 4px))); /* 20px = 16px + (2px * 2) [margin block] */
--uc-bm-hide-height: calc(-1 * var(--uc-bm-height));
@include Option("userChrome.hidden.tabbar") {
@include OneLinerNavbarContent() {
--uc-tabbar-height: 0px;
}
}
@include Option("userChrome.hidden.navbar") {
--uc-navbar-height: 0px;
}
}
}
@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.autohide.infobar") {
:root {
--uc-autohide-toolbar-delay: 600ms;
}
#navigator-toolbox {
position: relative;
z-index: 2;
}
#navigator-toolbox:not(:hover) {
animation: 1s keepfront;
}
@keyframes keepfront {
from {
z-index: 3;
}
to {
z-index: 3;
}
}
#sidebar-box:is(:hover, :focus-within) {
position: relative;
z-index: 2 !important;
}
@include Option("userChrome.autohide.toolbar_overlap") {
@import "toolbar_overlap";
}
}

View File

@ -0,0 +1,31 @@
#nav-bar:not(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container {
-moz-box-ordinal-group: 0;
min-width: calc(var(--uc-navbar-width, 100vw) - ((2 * var(--urlbar-margin-inline)) + var(--uc-window-drag-space-pre, 0px) + var(--uc-navbar-gap, 0px))) !important;
}
@include Option("userChrome.tabbar.one_liner") {
#nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) {
--uc-tabbar-width: calc(100vw - var(--uc-navbar-width-origin));
}
}
@include Animate {
@include OneLiner {
#nav-bar {
transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
var(--ext-theme-background-transition) !important;
}
#nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) {
transition-delay: 0s !important;
}
}
@include OneLinerNavbarContent {
#urlbar-container {
transition: min-width 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
}
#nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container {
transition-delay: 0s !important;
}
}
}

View File

@ -0,0 +1,16 @@
#forward-button[disabled="true"] {
margin-left: -36px !important;
opacity: 0 !important;
pointer-events: none;
}
@include Animate {
#forward-button {
transition-property: background-color, opacity, margin-left !important;
}
#forward-button[disabled="true"] {
transition: background-color 1s var(--animation-easing-function),
opacity 1s var(--animation-easing-function),
margin-left 0.5s ease !important;
}
}

View File

@ -0,0 +1,35 @@
@include Option("userChrome.autohide.back_button") {
@import "back_button";
}
@include Option("userChrome.autohide.forward_button") {
@import "forward_button";
}
@include Option("userChrome.autohide.page_action") {
@import "page_action";
}
@include Option("userChrome.autohide.tab") {
@import "tab";
}
@import "common";
@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar") {
@include Option("userChrome.autohide.tabbar", "userChrome.tabbar.one_liner") {
@import "tabbar";
}
@include Option("userChrome.autohide.navbar", "userChrome.tabbar.one_liner") {
@import "navbar";
}
}
@include Option("userChrome.autohide.bookmarkbar") {
@import "bookmarkbar";
}
@include Option("userChrome.autohide.infobar") {
@import "infobar";
}
@import "sidebar";
@include Option("userChrome.autohide.fill_urlbar") {
@import "fill_urlbar";
}

View File

@ -0,0 +1,32 @@
#tab-notification-deck:not([customizing]) > .notificationbox-stack {
$infobarFixedHeight: 13px + ((1px + 5px) * 2); // button height + (button border + [button.small-button padding]) * 2
// fiexedHeight + (button margin * 2) + messagebar margin
--infobar-height: calc(#{ $infobarFixedHeight } + (var(--infobar-button-vertical-margin, 4px) * 2) + var(--infobar-message-vertical-margin, 8px));
}
#tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message {
--infobar-message-margin: 0 4px calc(-1 * var(--infobar-height));
opacity: 0;
will-change: margin-bottom, opacity;
}
#navigator-toolbox:is(:hover, :focus-within) #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message {
--infobar-message-margin: 0 4px var(--infobar-message-vertical-margin, 8px);
opacity: 1;
}
@include Option("userChrome.autohide.toolbar_overlap") {
#tab-notification-deck:not([customizing]) {
height: 0;
}
}
@include Animate {
#tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message {
transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
var(--ext-theme-background-transition) !important;
}
#navigator-toolbox:is(:hover, :focus-within) #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message {
transition-delay: 0s !important;
}
}

View File

@ -0,0 +1,29 @@
@include OneLinerNavbar {
#nav-bar:not([customizing]) {
margin-bottom: var(--uc-navbar-hide-height);
opacity: 0;
will-change: margin-bottom, opacity;
}
#navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) {
margin-bottom: 0;
opacity: 1;
}
}
@include Animate {
#nav-bar:not([customizing]) {
transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
var(--ext-theme-background-transition) !important;
@include Option("userChrome.autohide.fill_urlbar") {
transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
var(--ext-theme-background-transition) !important;
}
}
#navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) {
transition-delay: 0s !important;
}
}

View File

@ -0,0 +1,29 @@
#page-action-buttons > .urlbar-page-action {
margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding) );
opacity: 0;
}
#urlbar-container:is(:hover, :focus-within) #page-action-buttons > .urlbar-page-action,
.urlbar-page-action[open],
.urlbar-page-action[open] ~ .urlbar-page-action {
margin-inline-end: 0px !important;
opacity: 1;
}
@include Animate {
#page-action-buttons > .urlbar-page-action {
transition: margin-inline-end 50ms var(--animation-easing-function) 900ms,
opacity 1.5s var(--animation-easing-function) 600ms !important;
@include Option("userChrome.decoration.animate") {
transition: margin-inline-end 50ms var(--animation-easing-function) 900ms,
opacity 1.5s var(--animation-easing-function) 600ms,
background-color 2.5s var(--animation-easing-function) !important;
}
}
#urlbar-container:is(:hover, :focus-within) #page-action-buttons > .urlbar-page-action,
.urlbar-page-action[open],
.urlbar-page-action[open] ~ .urlbar-page-action{
transition-delay: 0s !important;
}
}

View File

@ -0,0 +1,20 @@
// Refer variable `src/sidebar/overlap`
@include Option("userChrome.autohide.sidebar") {
#sidebar-box {
min-width: var(--uc-sidebar-width) !important;
max-width: var(--uc-sidebar-width) !important;
}
:root[inFullscreen="true"] #sidebar-box {
min-width: var(--uc-sidebar-activate-width) !important;
max-width: var(--uc-sidebar-activate-width) !important;
}
@include Option("userChrome.sidebar.overlap") {
@import "sidebar/overlap";
}
@include NotOption("userChrome.sidebar.overlap") {
@import "sidebar/static";
}
}

View File

@ -0,0 +1,34 @@
.tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) {
@include NotOption("userChrome.autohide.tab.opacity") {
@include NotOption("userChrome.autohide.tab.blur") {
margin-bottom: -64px;
}
}
@include Option("userChrome.autohide.tab.opacity") {
opacity: 0%;
}
@include Option("userChrome.autohide.tab.blur") {
filter: blur(8px);
}
@include Animate {
transition-timing-function: var(--animation-easing-function);
transition-duration: 0.2s;
transition-delay: 600ms;
&:is(:hover, :focus-within) {
transition-delay: 0s;
}
@include NotOption("userChrome.autohide.tab.opacity") {
@include NotOption("userChrome.autohide.tab.blur") {
transition-property: margin-bottom;
}
}
@include Option("userChrome.autohide.tab.opacity") {
transition-property: opacity;
}
@include Option("userChrome.autohide.tab.blur") {
transition-property: filter;
}
}
}

View File

@ -0,0 +1,64 @@
//-- Mixin ---------------------------------------------------------------------
@mixin _autohide_tabbar() {
@include NotOption("userChrome.tabbar.on_bottom") {
@content;
}
@include Option("userChrome.tabbar.on_bottom") {
> *:not(.titlebar-buttonbox-container) {
@content;
}
}
}
//------------------------------------------------------------------------------
@include OneLinerTabbar {
:root:not([customizing]) #titlebar {
margin-bottom: var(--uc-tabbar-hide-height);
will-change: margin-bottom;
}
#TabsToolbar:not([customizing]) {
@include _autohide_tabbar {
opacity: 0;
will-change: opacity;
}
}
#navigator-toolbox:is(:hover, :focus-within) {
> #titlebar {
margin-bottom: 0px;
}
#TabsToolbar {
@include _autohide_tabbar {
opacity: 1;
}
}
}
}
@include Animate {
#titlebar:not([customizing]) {
transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
background-color 1s var(--animation-easing-function) !important;
}
#TabsToolbar:not([customizing]) {
@include _autohide_tabbar {
transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important;
}
}
#navigator-toolbox:is(:hover, :focus-within) {
transition-delay: 0s !important;
> #titlebar:not([customizing]) {
transition-delay: 0s !important;
}
#TabsToolbar:not([customizing]) {
@include _autohide_tabbar {
transition-delay: 0s !important;
}
}
}
}

View File

@ -0,0 +1,68 @@
#navigator-toolbox {
--uc-toolbar-hide-height: calc(-1 * var(--uc-toolbar-height, 0));
margin-bottom: var(--uc-toolbar-hide-height) !important;
@include Animate {
@include Option("userChrome.decoration.animate") {
transition: margin-top 1s ease,
margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
&:is(:hover, :focus-within) {
transition-delay: 0s !important;
}
&[inFullscreen="true"] {
transition: margin-top 1.3s var(--animation-easing-function) 50ms,
margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
}
}
@include NotOption("userChrome.decoration.animate") {
transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
&:is(:hover, :focus-within) {
transition-delay: 0s !important;
}
}
}
&:is(:hover, :focus-within) {
@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar") {
@include Option("userChrome.autohide.tabbar", "userChrome.tabbar.one_liner") {
--uc-toolbar-height: var(--uc-tabbar-height);
@include NotOption("userChrome.autohide.navbar") {
@include Option("userChrome.autohide.bookmarkbar") {
--uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-bm-height));
}
}
@include OneLinerNavbar {
@include NotOption("userChrome.autohide.bookmarkbar") {
--uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height));
}
@include Option("userChrome.autohide.bookmarkbar") {
--uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height) + var(--uc-bm-height));
}
}
}
}
@include NotOption("userChrome.autohide.tabbar") {
@include NotOption("userChrome.autohide.navbar") {
@include Option("userChrome.autohide.bookmarkbar") {
--uc-toolbar-height: var(--uc-bm-height);
}
}
@include Option("userChrome.autohide.navbar", "userChrome.tabbar.one_liner") {
@include OneLinerNavbar {
@include NotOption("userChrome.autohide.bookmarkbar") {
--uc-toolbar-height: var(--uc-navbar-height);
}
@include Option("userChrome.autohide.bookmarkbar") {
--uc-toolbar-height: calc(var(--uc-navbar-height) + var(--uc-bm-height));
}
}
}
}
}
}

View File

@ -0,0 +1,47 @@
#sidebar {
min-width: var(--uc-sidebar-width) !important;
max-width: var(--uc-sidebar-width) !important;
will-change: min-width, max-width;
}
#sidebar-box:is(:hover, :focus-within) > #sidebar {
min-width: var(--uc-sidebar-activate-width) !important;
max-width: var(--uc-sidebar-activate-width) !important;
}
:root[inFullscreen="true"] #sidebar-box {
margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important;
padding-inline-start: var(--uc-sidebar-fullscreen-width);
will-change: padding-inline-start;
&:is(:hover, :focus-within) {
padding-inline-start: var(--uc-sidebar-activate-width);
}
#sidebar-header,
#sidebar {
min-width: calc(var(--uc-sidebar-activate-width)) !important;
max-width: calc(var(--uc-sidebar-activate-width)) !important;
will-change: unset;
}
}
@include Animate {
#sidebar {
transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
}
#sidebar-box:is(:hover, :focus-within) > #sidebar {
transition-delay: 0ms !important;
}
:root[inFullscreen="true"] #sidebar-box {
transition: padding-inline-start 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
&:is(:hover, :focus-within) {
transition-delay: 0ms !important;
}
}
}

View File

@ -0,0 +1,52 @@
#sidebar-box {
--uc-sidebar-fullscreen-margin: calc(var(--uc-sidebar-fullscreen-width) + var(--uc-sidebar-activate-width-reverse));
overflow: hidden;
will-change: min-width, max-width;
&:is(:hover, :focus-within) {
min-width: var(--uc-sidebar-activate-width) !important;
max-width: var(--uc-sidebar-activate-width) !important;
}
}
:root[inFullscreen="true"] #sidebar-box {
&:not([positionend="true"]) {
margin-inline-start: var(--uc-sidebar-fullscreen-margin) !important;
will-change: margin-inline-start;
&:is(:hover, :focus-within) {
margin-inline-start: 0 !important;
}
}
&[positionend="true"] {
margin-inline-end: var(--uc-sidebar-fullscreen-margin) !important;
will-change: margin-inline-end;
&:is(:hover, :focus-within) {
margin-inline-end: 0 !important;
}
}
}
@include Animate {
#sidebar-box {
transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
&:is(:hover, :focus-within) {
transition-delay: 0ms !important;
}
}
:root[inFullscreen="true"] #sidebar-box {
transition: margin-inline-start 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
&[positionend="true"] {
transition-property: margin-inline-end !important;
}
&:is(:hover, :focus-within) {
transition-delay: 0ms !important;
}
}
}

View File

@ -0,0 +1,4 @@
#PlacesToolbarItems {
display: flex !important;
justify-content: safe center !important;
}

View File

@ -0,0 +1,12 @@
/*= Centered - Tab ===========================================================*/
@import "tab";
/*= Centered - URL Bar =======================================================*/
@include Option("userChrome.centered.urlbar") {
@import "urlbar";
}
/*= Centered - Bookmark Bar ==================================================*/
@include Option("userChrome.centered.bookmarkbar") {
@import "bookmarkbar";
}

View File

@ -0,0 +1,10 @@
@include Option("userChrome.centered.tab") {
@import "tab/layout";
@include NotOption("userChrome.centered.tab.label") {
@import "tab/content";
}
@include Option("userChrome.centered.tab.label") {
@import "tab/label";
}
}

View File

@ -0,0 +1,9 @@
// Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/urlbar_centered_text.css made available under Mozilla Public License v. 2.0
// See the above repository for updates as well as full license text.
#urlbar:not([focused]) {
#urlbar-input,
.urlbar-input {
text-align: center !important;
}
}

View File

@ -0,0 +1,4 @@
.tab-icon-stack {
-moz-box-flex: 1;
justify-content: end;
}

View File

@ -0,0 +1,15 @@
/* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_label.css */
.tab-label-container {
display: grid;
justify-content: safe center;
align-items: safe center;
}
.tab-label,
.tab-secondary-label {
overflow: hidden;
}
.tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]),
.tabbrowser-tab:not(:hover,[pinned]) .tab-label-container:not([textoverflow]) {
margin-inline-end: 5px;
}

View File

@ -0,0 +1,13 @@
.tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]),
.tabbrowser-tab:not(:hover,[pinned]) .tab-label-container:not([textoverflow]) {
margin-inline-end: 5px;
}
@include Option("userChrome.tab.close_button_at_hover") {
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not(:hover,[pinned]) .tab-label-container:not([textoverflow]) {
margin-inline-end: 1px;
}
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected]):not(:hover, [pinned]) .tab-label-container label {
padding-inline-end: 18px;
}
}

View File

@ -112,3 +112,8 @@ menu {
--tabs-border-color: rgba(0, 0, 0, 0.3); /* Legacy: v96 */ --tabs-border-color: rgba(0, 0, 0, 0.3); /* Legacy: v96 */
--lwt-tabs-border-color: rgba(0, 0, 0, 0.3); --lwt-tabs-border-color: rgba(0, 0, 0, 0.3);
} }
/*= Findbar Border Color =====================================================*/
html|input.findbar-textbox {
border: 1px solid var(--input-border-color, var(--toolbar-field-border-color, ThreeDShadow)) !important; /* Original: 1px solid var(--input-border-color, var(--toolbar-field-border-color)) */
}

View File

@ -29,7 +29,7 @@
/** Activity Stream - Menu Icons ********************************************/ /** Activity Stream - Menu Icons ********************************************/
@include Option("userChrome.icon.context_menu") { @include Option("userChrome.icon.context_menu") {
@import "../icons/layout_activity_stream"; @import "../icons/layout/activity_stream";
@import "../icons/activity_stream"; @import "../icons/activity_stream";
} }

View File

@ -1,6 +1,6 @@
@-moz-document url("chrome://browser/content/places/places.xhtml"), @-moz-document url("chrome://browser/content/places/places.xhtml"),
url("about:downloads") { url("about:downloads") {
@import "../icons/layout_menu_contents"; @import "../icons/layout/menu_contents";
/*= Context Menu ===========================================================*/ /*= Context Menu ===========================================================*/
@include Option("userChrome.icon.context_menu") { @include Option("userChrome.icon.context_menu") {

View File

@ -0,0 +1,5 @@
@-moz-document url-prefix("about:"),
url-prefix("chrome://browser/content/places/places.xhtml"),
regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
@import "../theme/monospace";
}

View File

@ -104,6 +104,7 @@ xul|search-textbox.tabsFilter,
/* Animation */ /* Animation */
transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out,
visibility 0s linear !important; visibility 0s linear !important;
will-change: margin-inline-start, opacity, visibility;
&[hidden="true"] { &[hidden="true"] {
display: -moz-box !important; display: -moz-box !important;

View File

@ -11,6 +11,9 @@
.downloadTarget { .downloadTarget {
text-decoration: line-through; text-decoration: line-through;
text-decoration-color: color-mix(in srgb, currentColor 65%, transparent); text-decoration-color: color-mix(in srgb, currentColor 65%, transparent);
&:hover {
text-decoration: none;
}
} }
.downloadTypeIcon { .downloadTypeIcon {
filter: grayscale(100%) !important; filter: grayscale(100%) !important;

View File

@ -0,0 +1,91 @@
@include OneLinerNavbarContent() {
@include Option("userChrome.hidden.tabbar") {
#TabsToolbar {
display: none !important;
}
}
@include Option("userChrome.hidden.navbar") {
#nav-bar {
visibility: collapse; /* display: none is not work */
}
}
}
@include Option("userChrome.hidden.tab_icon") {
.tabbrowser-tab:not([pinned="true"]) {
@include NotOption("userChrome.hidden.tab_icon.always") {
.tab-icon-image {
display: none;
}
}
@include Option("userChrome.hidden.tab_icon.always") {
.tab-icon-stack {
display: none;
}
}
}
}
@include Option("userChrome.hidden.sidebar_header") {
@include NotOption("userChrome.hidden.sidebar_header.vertical_tab_only") {
#sidebar-header {
display: none !important;
}
}
@include Option("userChrome.hidden.sidebar_header.vertical_tab_only") {
#sidebar-box:is(
[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"],
[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"],
[sidebarcommand="sidebartabs_asamuzak_jp-sidebar-action"]
) #sidebar-header {
display: none !important;
}
}
}
@include Option("userChrome.hidden.urlbar_iconbox") {
#identity-box[pageproxystate="valid"] {
&.notSecureText #identity-icon-label,
&.chromeUI #identity-icon-box,
&.extensionPage #identity-icon-box {
display: none;
}
&.notSecureText #identity-icon-box {
padding-inline-end: 5px; /* Original: 8px */
}
}
}
#PlacesToolbarItems .bookmark-item {
@include Option("userChrome.hidden.bookmarkbar_icon") {
> .toolbarbutton-icon {
display: none;
}
}
@include Option("userChrome.hidden.bookmarkbar_label") {
> .toolbarbutton-text {
visibility: collapse; /* display: none is not work */
}
}
}
@include Option("userChrome.hidden.disabled_menu") {
menu,
menuitem:not(#context-back, #context-forward) {
&[disabled="true"] {
display: none !important;
}
}
@include NativeMenu {
#context-back,
#context-forward {
&[disabled="true"] {
display: none !important;
}
}
}
}

View File

@ -0,0 +1,33 @@
/** Library - Icons Replace ***************************************************/
@include Option("userChrome.icon.library") {
@import "../library/chrome";
}
/** Panel - Icons *************************************************************/
@include Option("userChrome.icon.panel") {
@import "layout/panel";
@import "panel";
}
/** Menu - Icons Layout *******************************************************/
@include Option("userChrome.icon.menu") {
@import "layout/menu";
@import "layout/bookmark_menu";
@include Option("userChrome.icon.context_menu") {
@import "context_menu";
}
@include Option("userChrome.icon.global_menubar") {
@import "global_menubar";
}
@include Option("userChrome.icon.global_menu") {
@import "global_menu";
}
}
/** Libray Menu ***************************************************************/
@include Option("userChrome.icon.library") {
@include Option("userChrome.icon.menu") {
@import "library";
}
}

View File

@ -238,7 +238,8 @@ panelMenuBookmarkThisPage[starred] {
#appMenuRecentlyClosedWindows { #appMenuRecentlyClosedWindows {
list-style-image: url("chrome://browser/skin/window.svg"); list-style-image: url("chrome://browser/skin/window.svg");
} }
#appMenuRestoreSession { #appMenuRestoreSession, /* Legacy - v103 */
#appMenu-restoreSession {
list-style-image: url("../icons/restore-session.svg"); list-style-image: url("../icons/restore-session.svg");
} }
#appMenuClearRecentHistory { #appMenuClearRecentHistory {

View File

@ -204,3 +204,6 @@ menuitem.searchbar-clear-history {
--menuitem-image: url("chrome://global/skin/icons/settings.svg"); --menuitem-image: url("chrome://global/skin/icons/settings.svg");
} }
} }
#treestyletab_piro_sakura_ne_jp-menuitem-_context_sendTabsToDevice\:manage {
--menuitem-image: url("chrome://global/skin/icons/settings.svg");
}

View File

@ -1,43 +1,86 @@
/*= tabContextMenu ===========================================================*/ /*= tabContextMenu ===========================================================*/
#context_openANewTab { #context_openANewTab,
#treestyletab_piro_sakura_ne_jp-menuitem-_context_newTab,
#tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenAlternatePosition,
#sidebartabs_asamuzak_jp-menuitem-_newTab {
--menuitem-image: url("chrome://browser/skin/new-tab.svg"); --menuitem-image: url("chrome://browser/skin/new-tab.svg");
} }
#tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenInWindow {
--menuitem-image: url("chrome://browser/skin/window.svg");
}
#tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenInPrivateWindow {
--menuitem-image: url("chrome://browser/skin/privateBrowsing.svg");
}
#context_reloadTab, #context_reloadTab,
#context_reloadSelectedTabs { #context_reloadSelectedTabs,
#treestyletab_piro_sakura_ne_jp-menuitem-_context_reloadTab,
#treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_reloadTab,
#treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:reloadTree,
#tabcenter-reborn_ariasuni-menuitem-_contextMenuReloadTab,
#sidebartabs_asamuzak_jp-menuitem-_reloadTab,
#sidebartabs_asamuzak_jp-menuitem-_reloadAllTabs {
--menuitem-image: url("../icons/reload.svg"); --menuitem-image: url("../icons/reload.svg");
} }
#context_toggleMuteTab, #context_toggleMuteTab,
#context_toggleMuteSelectedTabs { #context_toggleMuteSelectedTabs,
#treestyletab_piro_sakura_ne_jp-menuitem-_context_toggleMuteTab-mute,
#tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab,
#sidebartabs_asamuzak_jp-menuitem-_muteTab {
--menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
} }
#context_toggleMuteTab[muted], #context_toggleMuteTab[muted],
#context_toggleMuteSelectedTabs[muted] { #context_toggleMuteSelectedTabs[muted],
#treestyletab_piro_sakura_ne_jp-menuitem-_context_toggleMuteTab-unmute,
#tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab[label="Unmute Tab"],
#sidebartabs_asamuzak_jp-menuitem-_muteTab[label="Unmute Tab"] {
--menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
} }
#context_pinTab, #context_pinTab,
#context_pinSelectedTabs { #context_pinSelectedTabs,
#treestyletab_piro_sakura_ne_jp-menuitem-_context_pinTab,
#tabcenter-reborn_ariasuni-menuitem-_contextMenuPinTab,
#sidebartabs_asamuzak_jp-menuitem-_pinTab {
--menuitem-image: url("../icons/pin-tab.svg"); --menuitem-image: url("../icons/pin-tab.svg");
} }
#context_unpinTab, #context_unpinTab,
#context_unpinSelectedTabs { #context_unpinSelectedTabs,
#treestyletab_piro_sakura_ne_jp-menuitem-_context_unpinTab,
#tabcenter-reborn_ariasuni-menuitem-_contextMenuPinTab[label="Unpin Tab"],
#sidebartabs_asamuzak_jp-menuitem-_pinTab[label="Unpin Tab"] {
--menuitem-image: url("../icons/unpin-tab.svg"); --menuitem-image: url("../icons/unpin-tab.svg");
} }
#context_duplicateTab, #context_duplicateTab,
#context_duplicateTabs { #context_duplicateTabs,
#treestyletab_piro_sakura_ne_jp-menuitem-_context_duplicateTab,
#tabcenter-reborn_ariasuni-menuitem-_contextMenuDuplicateTab,
#sidebartabs_asamuzak_jp-menuitem-_dupeTab {
--menuitem-image: url("../icons/notebook-subsection.svg"); --menuitem-image: url("../icons/notebook-subsection.svg");
} }
#tabcenter-reborn_ariasuni-menuitem-_contextMenuUnloadTab {
}
#context_bookmarkTab, #context_bookmarkTab,
#context_bookmarkSelectedTabs { #context_bookmarkSelectedTabs,
#treestyletab_piro_sakura_ne_jp-menuitem-_context_bookmarkTab,
#treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_bookmarkSelected,
#treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:bookmarkTree,
#sidebartabs_asamuzak_jp-menuitem-_bookmarkTab,
#sidebartabs_asamuzak_jp-menuitem-_bookmarkAllTabs {
--menuitem-image: url("chrome://browser/skin/bookmark.svg"); --menuitem-image: url("chrome://browser/skin/bookmark.svg");
} }
#context_moveTabOptions { #context_moveTabOptions,
#treestyletab_piro_sakura_ne_jp-menuitem-_context_moveTab,
#tabcenter-reborn_ariasuni-menuitem-_contextMenuMoveTab,
#sidebartabs_asamuzak_jp-menuitem-_moveTab {
--menuitem-image: url("../icons/arrow-swap.svg"); --menuitem-image: url("../icons/arrow-swap.svg");
} }
#context_sendTabToDevice { #context_sendTabToDevice,
#treestyletab_piro_sakura_ne_jp-menuitem-_context_sendTabsToDevice {
--menuitem-image: url("../icons/send-to-device.svg"); --menuitem-image: url("../icons/send-to-device.svg");
} }
#treestyletab_piro_sakura_ne_jp-menuitem-_context_topLevel_sendTreeToDevice {
}
#context_sendTabToDevice:is([disabled="true"]) + #context_shareTabURL, /* Legacy */ #context_sendTabToDevice:is([disabled="true"]) + #context_shareTabURL, /* Legacy */
#context_sendTabToDevice:is([disabled="true"]) + menuitem.share-tab-url-item { #context_sendTabToDevice:is([disabled="true"]) + menuitem.share-tab-url-item {
@ -50,22 +93,52 @@
--menuitem-image: url("../icons/share.svg"); --menuitem-image: url("../icons/share.svg");
} }
} }
#context_reopenInContainer { #context_reopenInContainer,
#treestyletab_piro_sakura_ne_jp-menuitem-_context_reopenInContainer,
#tabcenter-reborn_ariasuni-menuitem-_contextMenuOpenInContextualTab,
#sidebartabs_asamuzak_jp-menuitem-_openNewTabInContainer,
#sidebartabs_asamuzak_jp-menuitem-_reopenTabInContainer {
--menuitem-image: url("../icons/container-openin-16.svg"); --menuitem-image: url("../icons/container-openin-16.svg");
} }
#context_selectAllTabs { #sidebartabs_asamuzak_jp-menuitem-_reloadAllTabs {
}
#context_selectAllTabs,
#treestyletab_piro_sakura_ne_jp-menuitem-_context_selectAllTabs,
#treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_selectAllTabs,
#sidebartabs_asamuzak_jp-menuitem-_selectAllTabs {
--menuitem-image: url("../icons/tab-multiple.svg"); --menuitem-image: url("../icons/tab-multiple.svg");
} }
#context_closeTab { #sidebartabs_asamuzak_jp-menuitem-_tabGroup {
}
#context_closeTab,
#treestyletab_piro_sakura_ne_jp-menuitem-_context_closeTab,
#treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:closeTree,
#tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTab,
#sidebartabs_asamuzak_jp-menuitem-_closeTab {
--menuitem-image: url("chrome://global/skin/icons/close.svg"); --menuitem-image: url("chrome://global/skin/icons/close.svg");
} }
#tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTabs,
#sidebartabs_asamuzak_jp-menuitem-_closeMultipleTabs {
}
#context_closeTabOptions { #context_closeTabOptions {
} }
#context_undoCloseTab { #context_undoCloseTab,
#treestyletab_piro_sakura_ne_jp-menuitem-_context_undoCloseTab,
#treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_undoCloseTab,
#tabcenter-reborn_ariasuni-menuitem-_contextMenuUndoCloseTab,
#sidebartabs_asamuzak_jp-menuitem-_undoCloseTab {
--menuitem-image: url("../icons/undo.svg"); --menuitem-image: url("../icons/undo.svg");
} }
#treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:collapseTreeRecursively,
#treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:collapseAll,
#treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:expandTreeRecursively {
}
#treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:expandAll {
}
/*= new-tab-button-popup =====================================================*/ /*= new-tab-button-popup =====================================================*/
#new-tab-button-popup > menuitem[command="Browser:NewUserContextTab"], #new-tab-button-popup > menuitem[command="Browser:NewUserContextTab"],
.new-tab-popup > menuitem[command="Browser:NewUserContextTab"] { .new-tab-popup > menuitem[command="Browser:NewUserContextTab"] {

View File

@ -0,0 +1,16 @@
.context-menu-list .context-menu-item button {
padding-inline-start: 0 !important;
}
.context-menu-list .context-menu-item button span {
padding-inline-start: 24px; /* 16p + (4px * 2) */
-moz-context-properties: fill, fill-opacity !important;
fill: currentColor !important;
/* Layout */
background-size: 16px;
background-repeat: no-repeat;
background-image: var(--menuitem-image);
background-position: left 4px center;
}

View File

@ -0,0 +1,118 @@
/*= Bookmark Menu - Layout ===================================================*/
/* #goPopup(Legacy of historyMenuPoup), #historyMenuPopup, #bookmarksMenuPopup: looks like global menu
* #BMB_bookmarksPopup: looks like arrow panel
*/
/* Empty Menu */
menupopup menupopup[emptyplacesresult] .menu-text,
#PersonalToolbar menupopup[emptyplacesresult] .menu-text {
margin-inline-start: 0 !important;
}
/* Bookmark Popup - As Arrow Panel */
#BMB_bookmarksPopup,
#PersonalToolbar {
--context-menu-background-padding: var(--arrowpanel-menuitem-padding-inline);
}
//-- Mixin ---------------------------------------------------------------------
// Items
$_bookmarkMenuitem: "menuitem:not(.menuitem-iconic, [disabled=\"true\"])";
$_bookmarkMenu: "menu:not(.menu-iconic)";
// Components
$_bookmarkPopup: "menupopup:is(#BMB_bookmarksPopup)";
$_bookmarkToolbar: "#PersonalToolbar menupopup[placespopup=\"true\"]";
$_bookmarkPopupMenus: selector.nest(
$_bookmarkPopup,
"#{$_bookmarkMenuitem}, #{$_bookmarkMenu}"
);
$_bookmarkToolbarMenus: selector.nest(
$_bookmarkToolbar,
"#{$_bookmarkMenuitem}, #{$_bookmarkMenu}"
);
@mixin _layoutBookmarkMenu() {
#{$_bookmarkPopupMenus},
#{$_bookmarkToolbarMenus} {
@content;
}
}
@mixin _layoutBookmarkPopup() {
#{$_bookmarkPopupMenus} {
@content;
}
}
@mixin _layoutBookmarkToolbar() {
#{$_bookmarkToolbarMenus} {
@content;
}
}
//------------------------------------------------------------------------------
/* Windows 7, 8 */
@include OS($win7, $win8) {
/* Global Menu */
menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item {
padding-inline-start: 0 !important;
}
/* Bookmark Popup - None icon menu */
#BMB_bookmarksPopup,
#PersonalToolbar {
--arrowpanel-menuicon-padding: 9px;
}
@include _layoutBookmarkMenu() {
margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
}
@include _layoutBookmarkPopup() {
padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding) + 2px) !important;
}
@include _layoutBookmarkToolbar() {
padding-inline-start: var(--arrowpanel-menuicon-padding) !important;
}
}
/* Windows */
@include OS($win10) {
/* Bookmark Popup - None icon menu */
@include _layoutBookmarkMenu() {
margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding)) !important;
background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
}
}
/* Linux */
@include OS($linux) {
/* Global Menu */
menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item {
padding-inline-start: var(--context-menu-background-padding) !important;
}
/* Bookmark Popup - Iconic menu */
#BMB_bookmarksPopup .menu-iconic-text,
#PersonalToolbar menupopup[placespopup="true"] .bookmark-item .menu-iconic-text {
padding-inline-start: 1px !important;
}
/* Bookmark Popup - None icon menu */
@include _layoutBookmarkMenu() {
padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 1px) !important;
}
}
@include OS($mac) {
/* Bookmark Popup - As Arrow Panel */
#PersonalToolbar menupopup menuitem,
#PersonalToolbar menupopup menu {
padding-inline: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding-inline)) !important;
}
/* Bookmark Popup - None icon menu */
@include _layoutBookmarkPopup() {
padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 3px) !important;
}
}

View File

@ -0,0 +1,126 @@
@import "./menu_common";
//-- Mixin ---------------------------------------------------------------------
// Components
$_layoutCommonMenus: (
$_iconMenuPopupMenus,
$_libraryMenuitem,
$_libraryMenu,
$_sendTabMenuitem,
$_otherIconMenu
);
@mixin _layoutInitIconMenus() {
#{$_globalMenus},
#{$_nestedPopupIconMenus},
#{$_layoutCommonMenus} {
@content;
}
}
@mixin _layoutInitPaddingMenus() {
#{selector.nest($_nestedPopupPadding, "menuitem:not(.menuitem-iconic), menu:not(.menu-iconic)")},
#{$_nestedPopupPaddingMenus},
#{$_layoutCommonMenus} {
@content;
}
}
@mixin _layoutIconMenus() {
#{$_nestedPopupPaddingMenus},
#{$_layoutCommonMenus} {
@content;
}
}
//------------------------------------------------------------------------------
#{$_initialMenus},
#{$_globalMenus} {
@include _initial_menus;
}
/* Icon */
@include _layoutInitIconMenus {
@include _layout_icon_menus;
}
/* For native context menus */
#{$_nestedPopupIconMenus} {
@include _layout_icon_native_menus;
}
/* Padding */
@include _layout_root_padding;
@include _layoutInitPaddingMenus {
@include _layout_init_padding;
}
/* Menubar */
@include Option("userChrome.icon.global_menubar") {
#{$_globalMenus} {
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-end: 3px;
&:first-child {
background-position: left calc(3px + var(--context-menu-background-padding-default)) center !important;
padding-inline-start: calc(19px + var(--context-menu-background-padding-default)) !important;
}
> menupopup {
--menuitem-image: none; /* Prevent Image Inheritance */
}
@include NotOption("userChrome.padding.global_menubar") {
padding-block: 2px !important;
}
}
}
/* Padding - Windows */
@include _layout_root_win7_8;
@include OS($win7, $win8) {
@include _layoutIconMenus {
@include _layout_init_win7_8();
}
}
@include OS($win10) {
@include _layout_root_win10;
@include _layoutIconMenus {
@include _layout_init_win10;
}
}
/* Padding - Linux */
@include OS($linux) {
@include _layout_root_linux;
#{$_globalMenus} > .menubar-text {
@include _layout_init_linux;
}
}
/* Padding - Mac */
@include OS($mac) {
@include _layout_root_mac;
/* context menu width */
#{$_nestedPopupPaddingMenus},
#blockedPopupDontShowMessage {
@include _layout_init_mac_width;
}
/* text position */
#{selector.nest($_nestedPopupPadding, "menuitem > .menu-text, menu > .menu-text")} {
@include _layout_init_mac_text;
}
/* Checkbox menuitem, None iconic menu */
#{selector.nest($_nestedPopupPadding, "menuitem[checked=\"true\"], menu:not(.menu-iconic)")} {
@include _layout_init_mac_others;
}
/* Global Menu */
@include Option("userChrome.icon.global_menu.mac") {
#{selector.nest($_iconMenuPopup, "menuitem:not(.menuitem-iconic, .bookmark-item), menu:not(.menu-iconic)")} {
list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important;
}
}
}

View File

@ -0,0 +1,140 @@
//-- Variables -----------------------------------------------------------------
// Items
// .menu-iconic, .menuitem-iconic: Alreay exist, not target.
// .in-menulist: Not a range because it is a select menu of web content.
// [checked="true"]: There should be a check mark instead of an icon.
$_iconNoneCommon: ".in-menulist, [checked=\"true\"]";
$_iconMenuitem: "menuitem:not(.menuitem-iconic, .bookmark-item, #{$_iconNoneCommon})";
$_iconMenu: "menu:not(.menu-iconic, #{$_iconNoneCommon})";
// Components
$_nestedPopupIcon: ":not(menu, #ContentSelectDropdown) > menupopup >";
$_nestedPopupPadding: ":not(menu, #ContentSelectDropdown, #context-navigation) > menupopup >";
$_iconMenuPopup: "menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup)";
$_nestedPopupIconMenus: selector.nest(
$_nestedPopupIcon,
"#{$_iconMenuitem}, #{$_iconMenu}"
);
$_nestedPopupPaddingMenus: selector.nest(
$_nestedPopupPadding,
"#{$_iconMenuitem}, #{$_iconMenu}"
);
$_iconMenuPopupMenus: selector.nest(
$_iconMenuPopup,
"#{$_iconMenuitem}, #{$_iconMenu}"
);
$_globalMenus: "#main-menubar > menu";
$_libraryMenuitem: "menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > #{$_iconMenuitem}";
$_libraryMenu: "menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > #{$_iconMenu}";
$_sendTabMenuitem: "menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup) > menuitem";
$_otherIconMenu: ".openintabs-menuitem, #blockedPopupDontShowMessage, #BMB_viewBookmarksToolbar";
//-- Mixin ---------------------------------------------------------------------
// Init Menu
$_initialMenus: selector.append(
"menupopup menuitem, menupopup menu",
":not([type=\"checkbox\"][checked=\"true\"], [type=\"radio\"])"
);
@mixin _initial_menus() {
-moz-appearance: none !important; /* Linux: menulist */
}
// Icon
@mixin _layout_icon_menus() {
/* Color */
-moz-context-properties: fill, fill-opacity !important;
fill: currentColor !important;
/* Layout */
background-size: 16px !important;
background-repeat: no-repeat !important;
background-image: var(--menuitem-image);
}
@mixin _layout_icon_native_menus() {
@include NativeMenu {
list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important;
}
}
// Padding
@mixin _layout_root_padding() {
:root {
--context-menu-background-padding-default: 5px;
--context-menu-background-padding: var(--context-menu-background-padding-default);
}
}
@mixin _layout_init_padding() {
background-position: left var(--context-menu-background-padding) center !important;
padding-inline-start: var(--context-menu-background-padding) !important;
}
@mixin _layout_root_win7_8() {
@include OS($win7) {
:root {
--context-menu-background-padding-default: 2px;
}
}
@include OS($win8) {
:root {
--context-menu-background-padding-default: 3px;
}
}
}
@mixin _layout_init_win7_8() {
background-position: left var(--context-menu-background-padding) center !important;
padding-inline-start: 0 !important;
}
@mixin _layout_root_win10() {
:root {
--context-menu-background-padding: 1em;
--context-menu-text-padding: 24px; /* 16px + 8px */
--menu-background-padding-default: calc(var(--context-menu-background-padding) + var(--context-menu-text-padding));
}
}
@mixin _layout_init_win10() {
padding-inline-start: var(--menu-background-padding-default) !important;
margin-left: 0 !important;
}
@mixin _layout_root_linux() {
:root {
--context-menu-background-padding-default: 6px;
}
}
@mixin _layout_init_linux() {
padding-inline-start: 3px;
}
@mixin _layout_root_mac() {
:root {
--context-menu-background-padding-default: 10px;
--context-menu-mac-padding: 21px;
}
}
@mixin _layout_init_mac_width() {
padding-inline-end: var(--context-menu-background-padding) !important;
}
@mixin _layout_init_mac_text() {
padding-inline-start: var(--context-menu-mac-padding) !important;
}
@mixin _layout_init_mac_others() {
padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important;
}
// Checkbox
// @include OS($win) {
// /* Checkbox */
// :root {
// --context-menu-text-padding: calc(var(--menu-padding) + var(--context-menu-background-padding-default) + 16px);
// }
// :not(menu, #ContentSelectDropdown, #context-navigation)
// > menupopup
// > menuitem[type="checkbox"]:not([checked="true"])
// > .menu-iconic-left {
// padding-inline-start: var(--context-menu-text-padding);
// }
// }

View File

@ -0,0 +1,90 @@
@import "./menu_common";
//-- Mixin ---------------------------------------------------------------------
$_placesPopupSet: "menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)";
$_placesPopupSetMenus: selector.nest(
$_placesPopupSet,
"#{$_iconMenuitem}, #{$_iconMenu}"
);
@mixin _library_contextMenu {
#{$_placesPopupSetMenus},
#{$_libraryMenuitem},
#{$_libraryMenu} {
@content;
}
}
//------------------------------------------------------------------------------
#{$_initialMenus} {
@include _initial_menus;
}
@include _library_contextMenu {
@include _layout_icon_menus;
}
/* For native context menus */
#{$_nestedPopupIconMenus} {
@include _layout_icon_native_menus;
}
/* Padding */
@include _layout_root_padding;
@include _library_contextMenu {
@include _layout_init_padding;
}
/* Padding - Windows */
@include _layout_root_win7_8;
@include OS($win7, $win8) {
@include _library_contextMenu {
@include _layout_init_win7_8();
}
}
@include OS($win10) {
@include _layout_root_win10;
@include _library_contextMenu {
@include _layout_init_win10;
}
}
/* Padding - Linux */
@include OS($linux) {
@include _layout_root_linux;
/* Contextmenu Checkbox Unset */
#{$_placesPopupSet} menuitem[type="checkbox"] {
margin-inline: 0 !important;
> .menu-iconic-left > .menu-iconic-icon {
margin-inline-end: 0 !important;
}
&:not([checked="true"]) > .menu-iconic-left > .menu-iconic-icon {
border: none !important;
background-color: unset !important;
}
}
}
/* Padding - Mac */
@include OS($mac) {
@include _layout_root_mac;
/* context menu width */
#{$_placesPopupSetMenus} {
@include _layout_init_mac_width;
> .menu-text {
/* text position */
@include _layout_init_mac_text;
}
}
/* Checkbox menuitem, None iconic menu */
#{$_placesPopupSet} menuitem[checked="true"],
#{$_placesPopupSet} menu:not(.menu-iconic) {
@include _layout_init_mac_others;
}
}

View File

@ -0,0 +1,101 @@
/*= Padding ==================================================================*/
:root {
--arrowpanel-menuicon-padding: 8px;
--arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-padding) * 2 + var(var(--arrowpanel-menuitem-padding-inline))) !important;
--arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding-inline) - 2px) !important;
--arrowpanel-menuimageblank-padding-block: calc(var(--arrowpanel-menuitem-padding-block) - 2px) !important;
}
.subviewbutton > .toolbarbutton-icon {
width: 16px;
}
@include Option("userChrome.icon.panel_photon", "userChrome.icon.panel_sparse") {
:root {
/* Global */
--arrowpanel-menuicon-paddingx2: calc(var(--arrowpanel-menuicon-padding) * 2);
/* General Panel */
--arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-paddingx2) + 8px) !important;
--arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding-inline) - 2px) !important;
/* Blank Menu Left Padding */
--arrowpanel-menuimageblank-padding-horizontal: calc(
var(--arrowpanel-menuicon-paddingx2) + var(--arrowpanel-menuitem-padding-inline)
);
--arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding-block) + 1px);
}
}
#downloadsHistory .button-text,
.subviewbutton > .toolbarbutton-text {
padding-inline-start: var(--arrowpanel-menuicon-padding) !important;
}
.toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text {
padding-inline-start: 0 !important;
}
#panelMenu_bookmarksMenu .subviewbutton[disabled="true"] .toolbarbutton-text,
#appMenu_historyMenu .subviewbutton[disabled="true"] .toolbarbutton-text {
padding-inline-start: var(--arrowpanel-menublank-padding) !important;
}
#appMenu-proton-update-banner .toolbarbutton-text {
margin-inline-start: 0 !important;
}
#appMenu-multiView .subviewbutton::before,
#appMenu-proton-update-banner::before {
display: -moz-inline-box;
margin-inline-end: var(--arrowpanel-menuicon-padding);
width: 16px;
height: 16px;
}
#appMenu-proton-update-banner {
margin-bottom: 2px !important;
}
#appMenu-proton-update-banner::before {
margin-inline-start: var(--arrowpanel-menuitem-padding-inline) !important;
}
#appMenu-fxa-status2,
#appMenu-zoom-controls2, /* Legacy v104 */
#appMenu-zoom-controls {
align-items: center;
padding-top: var(--arrowpanel-menuimageblank-padding-block) !important;
padding-bottom: var(--arrowpanel-menuimageblank-padding-block) !important;
}
#appMenu-zoom-controls2::before, /* Legacy v104 */
#appMenu-zoom-controls::before {
margin-inline-end: 0 !important;
}
#appMenu-zoomReduce-button2,
#appMenu-zoomReset-button2,
#appMenu-zoomEnlarge-button2,
#appMenu-fullscreen-button2 {
--arrowpanel-menuitem-padding-block: 0px;
}
.subviewbutton[type="checkbox"]:not([checked="true"]) > .toolbarbutton-text {
margin-left: 16px !important;
}
/* Icons Color */
#appMenu-multiView .subviewbutton::before,
#appMenu-proton-update-banner::before,
#downloadsHistory .button-icon,
.subviewbutton > image {
fill: currentColor !important;
fill-opacity: var(--toolbarbutton-icon-fill-opacity) !important;
-moz-context-properties: fill !important;
}
#appMenu-zoomReduce-button2 > .toolbarbutton-icon,
#appMenu-zoomEnlarge-button2 > .toolbarbutton-icon {
stroke: var(--zoom-controls-bgcolor, var(--button-bgcolor, ButtonFace)) !important;
-moz-context-properties: fill, stroke !important;
}
#appMenu-zoomReduce-button2:not([disabled], [open], :active):is(:hover) > .toolbarbutton-icon,
#appMenu-zoomEnlarge-button2:not([disabled], [open], :active):is(:hover) > .toolbarbutton-icon {
stroke: var(--button-hover-bgcolor) !important;
}
.subviewbutton[disabled="true"] > image {
/* Ghost icons when disabled */
opacity: 0.4;
}

View File

@ -4,6 +4,7 @@
@use "utils/theme" as *; @use "utils/theme" as *;
@use "utils/accent_color" as *; @use "utils/accent_color" as *;
@use "utils/native_menu" as *; @use "utils/native_menu" as *;
@use "utils/one_liner" as *;
@use "utils/proton_elements" as Proton; @use "utils/proton_elements" as Proton;
@use "sass:selector"; @use "sass:selector";
@ -18,37 +19,8 @@
/** Compatibility Fixes *******************************************************/ /** Compatibility Fixes *******************************************************/
@import "compatibility/index"; @import "compatibility/index";
/** System Default Theme ******************************************************/ /** Theme *********************************************************************/
@include Option("userChrome.theme.system_default") { @import "theme/index";
@import "theme/system_default_theme";
}
/** Fully Theme Mode **********************************************************/
/* Default Themes
https://github.com/mozilla/gecko-dev/blob/master/toolkit/mozapps/extensions/default-theme/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
*/
@include Option("userChrome.theme.proton_color") {
@import "theme/proton_color";
@include Option("userChrome.theme.proton_color.dark_blue_accent") {
@import "theme/dark_blue_accent";
}
}
@include Option("userChrome.theme.fully_color") {
@import "theme/fully_color";
}
/* Fully Dark Mode ************************************************************/
@include Option("userChrome.theme.fully_dark") {
@import "theme/fully_dark";
}
/* Proton Theme Mode **********************************************************/
@include Option("userChrome.theme.proton_chrome") {
@import "theme/proton_chrome";
}
/** Decoration ****************************************************************/ /** Decoration ****************************************************************/
@import "decoration/index"; @import "decoration/index";
@ -62,54 +34,38 @@
/** Tab Bar UI ****************************************************************/ /** Tab Bar UI ****************************************************************/
@import "tabbar/index"; @import "tabbar/index";
/** Tab UI ****************************************************************/
@import "tab/index";
/** Url View UI ***************************************************************/ /** Url View UI ***************************************************************/
@import "urlview/index"; @import "urlview/index";
/** Panel UI ******************************************************************/ /** Panel UI ******************************************************************/
@import "panel/index"; @import "panel/index";
/** Sidebar UI ****************************************************************/
@import "sidebar/index";
/** Fullscreen - Overlap toolbar **********************************************/ /** Fullscreen - Overlap toolbar **********************************************/
@import "fullscreen/index"; @import "fullscreen/index";
/** Library - Icons Replace ***************************************************/ /** Centered ******************************************************************/
@include Option("userChrome.icon.library") { @import "centered/index";
@import "library/chrome";
}
/** Panel - Icons *************************************************************/ /** Auto Hide *****************************************************************/
@include Option("userChrome.icon.panel") { @import "autohide/index";
@import "icons/layout_panel";
@import "icons/panel";
}
/** Menu - Icons Layout *******************************************************/ /** Hidden ********************************************************************/
@include Option("userChrome.icon.menu") { @import "hidden/index";
@import "icons/layout_menu";
@import "icons/layout_bookmark_menu";
@include Option("userChrome.icon.context_menu") { /** Icons *********************************************************************/
@import "icons/context_menu"; @import "icons/index";
}
@include Option("userChrome.icon.global_menubar") {
@import "icons/global_menubar";
}
@include Option("userChrome.icon.global_menu") {
@import "icons/global_menu";
}
}
/** Libray Menu ***************************************************************/ /** Waterfox ******************************************************************/
@include Option("userChrome.icon.library") {
@include Option("userChrome.icon.menu") {
@import "icons/library";
}
}
/*= Waterfox =================================================================*/
@import "icons/waterfox"; @import "icons/waterfox";
@include Option("userChrome.theme.fully_color") { @include Option("userChrome.theme.fully_color") {
@import "theme/waterfox"; @import "theme/waterfox";
} }
/*= Tor Browser ==============================================================*/ /** Tor Browser ***************************************************************/
@import "icons/tor_browser"; @import "icons/tor_browser";

View File

@ -34,6 +34,11 @@
@import "contents/proton_contents"; @import "contents/proton_contents";
} }
/** Monospace *****************************************************************/
@include Option("userContent.page.monospace") {
@import "contents/monospace";
}
/** Menu - Icons Layout *******************************************************/ /** Menu - Icons Layout *******************************************************/
@include Option("userChrome.icon.menu") { @include Option("userChrome.icon.menu") {
@import "contents/context_menu"; @import "contents/context_menu";

View File

@ -0,0 +1,3 @@
:root[uidensity="compact"] #PersonalToolbar toolbarbutton {
margin-top: 0px; /* Original: 2px */
}

View File

@ -26,12 +26,12 @@
/*= Nav Bar - Reduce Width ===================================================*/ /*= Nav Bar - Reduce Width ===================================================*/
@include Option("userChrome.padding.navbar_width") { @include Option("userChrome.padding.navbar_width") {
@import "nav_bar"; @import "navbar";
} }
/*= URL Bar - Reduce Padding =================================================*/ /*= URL Bar - Reduce Padding =================================================*/
@include Option("userChrome.padding.urlbar") { @include Option("userChrome.padding.urlbar") {
@import "url_bar"; @import "urlbar";
} }
@include Option("userChrome.padding.urlView_expanding") { @include Option("userChrome.padding.urlView_expanding") {
@import "urlview_expanding"; @import "urlview_expanding";
@ -42,12 +42,17 @@
/*= BookMark Bar - Reduce Height =============================================*/ /*= BookMark Bar - Reduce Height =============================================*/
@include Option("userChrome.padding.bookmarkbar") { @include Option("userChrome.padding.bookmarkbar") {
@import "bookmark_bar"; @import "bookmarkbar";
} }
/*= Info Bar - Reduce Padding ================================================*/ /*= Info Bar - Reduce Padding ================================================*/
@include Option("userChrome.padding.infobar", "userChrome.autohide.infobar") {
#tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) {
margin: var(--infobar-message-margin, 0 4px var(--infobar-message-vertical-margin, 8px)) !important;
}
}
@include Option("userChrome.padding.infobar") { @include Option("userChrome.padding.infobar") {
@import "info_bar"; @import "infobar";
} }
/*= Menu - Reduce Padding ====================================================*/ /*= Menu - Reduce Padding ====================================================*/

View File

@ -0,0 +1,54 @@
:root:not([uidensity]) #tab-notification-deck {
--infobar-message-vertical-margin: 3px;
--infobar-vertical-margin: 7px;
--infobar-button-vertical-margin: 3px;
}
:root[uidensity="compact"] #tab-notification-deck {
--infobar-message-vertical-margin: 2px;
--infobar-vertical-margin: 6px;
--infobar-button-vertical-margin: 2px;
}
:root[uidensity="touch"] #tab-notification-deck {
--infobar-message-vertical-margin: 4px;
--infobar-vertical-margin: 8px;
--infobar-button-vertical-margin: 4px;
}
:root:not([uidensity]) #tab-notification-deck,
:root:not([uidensity]) notification-message[message-bar-type="infobar"] {
}
:root[uidensity="compact"] #tab-notification-deck,
:root[uidensity="compact"] notification-message[message-bar-type="infobar"] {
}
:root[uidensity="touch"] #tab-notification-deck,
:root[uidensity="touch"] notification-message[message-bar-type="infobar"] {
}
.infobar > .icon {
margin-block: var(--infobar-vertical-margin) !important; /* Original: 8px */
}
.notification-message {
padding-block: var(--infobar-vertical-margin) !important; /* Original: 8px */
}
.notification-button-container > .notification-button {
margin-block: var(--infobar-button-vertical-margin) !important; /* Original: 4px */
}
.notification-close {
margin: var(--infobar-button-vertical-margin) 8px !important; /* Original: 4px 8px */
}
/* Hard coded for compatibility - Disappearing phenomenon */
.container.infobar::before {
content: "";
display: block;
width: 2px;
position: absolute;
background-image: linear-gradient(0, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%);
top: 0;
inset-inline-start: 0;
height: 100%;
border-start-start-radius: 4px;
border-end-start-radius: 4px;
}

View File

@ -0,0 +1,4 @@
#nav-bar:not([customizing]) toolbarspring {
min-width: 1px !important;
max-width: 100px !important;
}

View File

@ -1,24 +1,28 @@
/* Toolbar Height */ /* Toolbar Height */
@include Option("userChrome.tab.lepton_like_padding") { @include Option("userChrome.tab.lepton_like_padding") {
:root:not([uidensity]) #TabsToolbar { :root {
--tab-min-height: 36px; &:not([uidensity]) {
--tab-min-height: 36px !important;
} }
:root[uidensity="compact"] #TabsToolbar { &[uidensity="compact"] {
--tab-min-height: 32px; --tab-min-height: 32px !important;
}
&[uidensity="touch"] {
--tab-min-height: 41px !important;
} }
:root[uidensity="touch"] #TabsToolbar {
--tab-min-height: 41px;
} }
} }
@include Option("userChrome.tab.photon_like_padding") { @include Option("userChrome.tab.photon_like_padding") {
:root:not([uidensity]) #TabsToolbar { :root {
--tab-min-height: 32px; &:not([uidensity]) {
--tab-min-height: 32px !important;
} }
:root[uidensity="compact"] #TabsToolbar { &[uidensity="compact"] {
--tab-min-height: 29px; --tab-min-height: 29px !important;
}
&[uidensity="touch"] {
--tab-min-height: 41px !important;
} }
:root[uidensity="touch"] #TabsToolbar {
--tab-min-height: 41px;
} }
/* Top Margin */ /* Top Margin */
@ -29,11 +33,13 @@
} }
@include NotOption("userChrome.tab.lepton_like_padding") { @include NotOption("userChrome.tab.lepton_like_padding") {
@include NotOption("userChrome.tab.photon_like_padding") { @include NotOption("userChrome.tab.photon_like_padding") {
:root:not([uidensity]) #TabsToolbar { :root {
--tab-min-height: 36px; /* 38px -> 36px */ &:not([uidensity]) {
--tab-min-height: 36px !important; /* 38px -> 36px */
}
&[uidensity="compact"] {
--tab-min-height: 29px !important; /* 36px -> 29px */
} }
:root[uidensity="compact"] #TabsToolbar {
--tab-min-height: 29px; /* 36px -> 29px */
} }
} }
} }

View File

@ -1,9 +1,13 @@
/* Titlebar Space */ /* Titlebar Space */
:root {
--uc-title-pre-spacer: 30px; /* Original: 40px */
--uc-title-post-spacer: 25px; /* Original: 40px */
}
.titlebar-spacer[type="pre-tabs"] { .titlebar-spacer[type="pre-tabs"] {
width: 30px !important; /* Original: 40px */ width: var(--uc-title-pre-spacer) !important;
} }
.titlebar-spacer[type="post-tabs"] { .titlebar-spacer[type="post-tabs"] {
width: 25px !important; /* Original: 40px */ width: var(--uc-title-post-spacer) !important;
} }
/* Tabbar Buttons */ /* Tabbar Buttons */
@ -55,15 +59,16 @@
} }
/* Tab - Max Size */ /* Tab - Max Size */
@include NotOption("userChrome.tab.photon_like_padding") {
:root { :root {
@include NotOption("userChrome.tab.photon_like_padding") {
--tab-max-width: 240px; --tab-max-width: 240px;
} }
}
@include Option("userChrome.tab.photon_like_padding") { @include Option("userChrome.tab.photon_like_padding") {
:root {
--tab-max-width: 225px; --tab-max-width: 225px;
} }
@include OneLiner {
--tab-max-width: 180px;
}
} }
.tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
max-width: var(--tab-max-width) !important; /* Original: 225px */ max-width: var(--tab-max-width) !important; /* Original: 225px */
@ -77,7 +82,7 @@
} }
} }
.tabbrowser-tab:not([last-visible-tab]) { .tabbrowser-tab:not([last-visible-tab]) {
margin-inline-end: -0.5px !important; margin-inline-end: -1px !important;
} }
} }
@include Option("userChrome.tab.photon_like_padding") { @include Option("userChrome.tab.photon_like_padding") {

View File

@ -0,0 +1,24 @@
:root:not([uidensity="touch"]) #urlbar-container,
:root:not([uidensity="touch"]) #search-container {
padding-block: 3px !important; /* Original: 4px */
margin-inline: 5px !important; /* Original: 5px */
}
:root:not([uidensity="compact"]) #urlbar-container,
:root:not([uidensity="compact"]) #search-container {
padding-block: 2px !important;
}
/* spread menu */
:root:not([uidensity]) .urlbarView-row {
padding-block: 1px !important; /* Original: 2px */
}
:root[uidensity="compact"] .urlbarView-row {
padding-block: 0px !important;
}
:root:not([uidensity]) #urlbar .search-one-offs:not([hidden]) {
padding-block: 8px !important; /* Original: 10px */
}
:root[uidensity="compact"] #urlbar .search-one-offs:not([hidden]) {
padding-block: 2px !important;
}

View File

@ -35,6 +35,7 @@
@include Option("userChrome.rounding.square_menupopup") { @include Option("userChrome.rounding.square_menupopup") {
xul|menupopup { xul|menupopup {
--panel-border-radius: 0px !important;
border-radius: 0 !important; border-radius: 0 !important;
} }
} }

View File

@ -0,0 +1 @@
@import "overlap";

View File

@ -0,0 +1,66 @@
@include Option("userChrome.sidebar.overlap", "userChrome.autohide.sidebar") {
#sidebar-box {
/* Original
min-width: 14em;
width: 18em;
max-width: 36em;
*/
--uc-sidebar-width: 40px;
--uc-sidebar-activate-width: 18em;
--uc-sidebar-activate-width-reverse: calc(-1 * var(--uc-sidebar-activate-width));
--uc-sidebar-fullscreen-width: 4px;
--uc-sidebar-shadow-color: #28282F;
--uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */
z-index: 1 !important;
position: relative !important;
box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color);
&[positionend="true"] {
box-shadow: -1px 0px 15px -10px var(--uc-sidebar-shadow-color);
}
}
#sidebar {
display: block;
}
#sidebar-splitter {
display: none !important;
}
}
@include Option("userChrome.sidebar.overlap") {
#sidebar-box[positionend="true"] {
direction: rtl;
}
#sidebar-header {
background-color: var(--sidebar-background-color) !important;
color: var(--sidebar-text-color) !important;
overflow: hidden;
}
@include NotOption("userChrome.autohide.sidebar") {
#sidebar-box,
#sidebar {
min-width: var(--uc-sidebar-activate-width) !important;
max-width: var(--uc-sidebar-activate-width) !important;
}
#sidebar-box {
margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important;
will-change: padding-inline;
&:not([hidden="true"]) {
padding-inline-start: var(--uc-sidebar-activate-width);
}
@include Animate {
transition: padding-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out,
visibility 0s linear !important;
}
}
}
}

View File

@ -0,0 +1,21 @@
/** Clipped tabs - Letters cleary *********************************************/
@include Option("userChrome.tab.letters_cleary") {
@import "clipped_tab/letters_cleary";
}
/** Clipped tabs - Show close button at hover *********************************/
@include Option("userChrome.tab.close_button_at_hover") {
@import "clipped_tab/show_close_button_at_hover";
}
/** Clipped tabs - Show close button at pinned tab ****************************/
@include Option("userChrome.tab.close_button_at_pinned") {
@include NotOption("userChrome.tabbar.as_titlebar") {
@import "clipped_tab/pinned_close_button";
}
}
/** Clipped tabs - Always show tab icon ***************************************/
@include Option("userChrome.tab.always_show_tab_icon") {
@import "clipped_tab/always_show_tab_icon";
}

View File

@ -0,0 +1,26 @@
.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-stack {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
/* Remove line at Toolbar's top */
#tabbrowser-tabs {
z-index: 1 !important;
}
#TabsToolbar {
overflow: hidden; /* Prevent toolbar area over */
}
/* Pinned Tab - tabbrowser-arrowscrollbox overflowing */
#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
z-index: 0 !important;
}

View File

@ -0,0 +1,105 @@
@include NotOption("userChrome.tab.photon_like_contextline") {
.tab-context-line {
display: none;
}
}
.tabbrowser-tab {
--container-position-y: 11px;
}
:root[uidensity="compact"] .tabbrowser-tab {
--container-position-y: 10px;
}
:root[uidensity="touch"] .tabbrowser-tab {
--container-position-y: 12px;
}
.tab-content:not([titlechanged])::before {
/* Box Model */
content: "";
display: block;
position: absolute !important;
transform: translate(9px, var(--container-position-y)) !important;
/* Shape */
border-bottom: 2px solid var(--identity-icon-color);
width: 25%;
opacity: 0.75;
}
.tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before {
width: calc(100% - 30px);
opacity: 1;
}
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before {
width: calc(100% - 33px);
}
/* Animate */
@include Animate {
.tab-content:not([titlechanged])::before {
transition: 0.15s var(--animation-easing-function) !important;
transition-property: width, opacity;
}
}
/* Pinned Tab */
.tabbrowser-tab[pinned] .tab-content::before {
transform: translateY(var(--container-position-y)) !important;
width: 16px;
}
@include Option("userChrome.tab.close_button_at_pinned") {
.tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before {
opacity: 0;
}
// Don't hide at userChrome.tab.close_button_at_pinned.background
}
/* Pinned Tab - Titlechanged Indicator override */
.tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]),
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
/* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
--dotted-identity-image: radial-gradient(
circle,
var(--identity-icon-color),
var(--identity-icon-color) 2px,
transparent 2px
);
background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important;
background-position-x: 32%, 50%, 70% !important;
}
:root[uidensity="compact"]
.tabbrowser-tab:is([image], [pinned])[usercontextid]
> .tab-stack
> .tab-content[attention]:not([selected="true"]),
:root[uidensity="compact"]
.tabbrowser-tab[usercontextid]
> .tab-stack
> .tab-content[pinned][titlechanged]:not([selected="true"]) {
/* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
background-position-x: 30%, 50%, 70% !important;
}
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
/* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
background-position-y: top calc(0.5px + 50% + var(--container-position-y)) !important;
}
/* Pinned Tab - Titlechanged & soundplaying */
.tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
> .tab-stack
> .tab-content[attention]:not([selected="true"]),
.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
> .tab-stack
> .tab-content[pinned][titlechanged]:not([selected="true"]) {
background-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px) !important;
}
:root[uidensity="compact"]
.tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
> .tab-stack
> .tab-content[attention]:not([selected="true"]),
:root[uidensity="compact"]
.tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
> .tab-stack
> .tab-content[pinned][titlechanged]:not([selected="true"]) {
background-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px) !important;
}

View File

@ -0,0 +1,3 @@
.tab-icon-image[crashed] {
display: none !important;
}

View File

@ -0,0 +1,41 @@
/*= Tab - Connect to window ==============================================*/
@include Option("userChrome.tab.connect_to_window") {
@import "connect_to_window";
}
/*= Selected Tab =============================================================*/
@import "selected_tab";
/*= Unselected Tab - Divide line =============================================*/
@import "unselected_tab";
/*= New tab button ============================================================*/
@import "newtab_button";
/*= Unloaded Tab - Contents Opacity ===========================================*/
@include Option("userChrome.tab.unloaded") {
@import "unload_tab";
}
/*= Clipped tabs =============================================================*/
@import "clipped_tab";
/*= Sound Tab ================================================================*/
@import "sound_tab";
/*= PictureInPicture Tab - Show PIP Icon =====================================*/
@include Option("userChrome.tab.pip") {
@import "picture_in_picture_tab";
}
/*= Container Tab - Color line at icon's bottom ==============================*/
@include Option("userChrome.tab.container") {
@include NotOption("userChrome.tabbar.as_titlebar") {
@import "container_tab";
}
}
/*= Crashed Tab - Don't show Favicons ========================================*/
@include Option("userChrome.tab.crashed") {
@import "crashed_tab";
}

View File

@ -0,0 +1,14 @@
/*= New tab button - Looks like tab ==========================================*/
@include Option("userChrome.tab.newtab_button_like_tab") {
@import "newtab_button/looks_like_tab";
}
/*= New tab button - Smaller button ==========================================*/
@include Option("userChrome.tab.newtab_button_smaller") {
@import "newtab_button/smaller_button";
}
/*= New tab button - Proton like button ======================================*/
@include Option("userChrome.tab.newtab_button_proton") {
@import "newtab_button/proton_like_button";
}

View File

@ -0,0 +1,36 @@
#tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-content::after,
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[pictureinpicture]:not([pinned], :hover) .tab-content::after {
content: "";
}
.tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-content::after {
/* Shape */
display: -moz-inline-box !important;
width: 14px;
height: 14px;
background-size: 14px;
-moz-box-ordinal-group: 1 !important;
/* Color */
fill: currentColor;
opacity: 0.8;
-moz-context-properties: fill;
/* Icon */
background-image: url("chrome://global/skin/media/picture-in-picture-open.svg");
}
.tabbrowser-tab[pictureinpicture]:not([pinned])[selected] .tab-content::after {
opacity: 0.95;
}
/* Close Button's position */
.tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button {
-moz-box-ordinal-group: 2 !important;
}
#tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button {
margin-left: 7px !important;
}
#tabbrowser-tabs:not([closebuttons="activetab"])
.tabbrowser-tab[pictureinpicture]:not([pinned]):hover
.tab-close-button {
margin-left: 2px !important;
}

View File

@ -0,0 +1,24 @@
/*= Selected Tab - Color like toolbar ========================================*/
@include Option("userChrome.tab.color_like_toolbar") {
@import "selected_tab/color_like_toolbar";
}
/*= Multi Selected Color - More Contrast =====================================*/
@include Option("userChrome.tab.multi_selected") {
@import "selected_tab/multi_selected";
}
/*= Selected Tab - Box Shadow ================================================*/
@include Option("userChrome.tab.box_shadow") {
@import "selected_tab/box_shadow";
}
/*= Selected Tab - Bottom Rounded Corner =====================================*/
@include Option("userChrome.tab.bottom_rounded_corner") {
@import "selected_tab/bottom_rounded_corner";
}
/*= Selected Tab - Photon like contextline ===================================*/
@include Option("userChrome.tab.photon_like_contextline") {
@import "selected_tab/photon_like_contextline";
}

View File

@ -0,0 +1,16 @@
/*= Sound Tab - Hide Label ===================================================*/
@include Option("userChrome.tab.sound_hide_label") {
@include NotOption("userChrome.tab.sound_show_label") {
@import "sound_tab/hide_label";
}
}
/*= Sound Tab - Show Label ===================================================*/
@include Option("userChrome.tab.sound_show_label") {
@import "sound_tab/show_label";
}
/*= Sound Tab - Show with Favicons ===========================================*/
@include Option("userChrome.tab.sound_with_favicons") {
@import "sound_tab/show_with_favicons";
}

View File

@ -0,0 +1,3 @@
#tabbrowser-tabs .tabbrowser-tab[pending] .tab-content {
opacity: 0.7;
}

View File

@ -0,0 +1,9 @@
/*= Unselected Tab - Dynamic Separator =======================================*/
@include Option("userChrome.tab.dynamic_separtor") {
@import "unselected_tab/dynamic_separator";
}
/*= Unselected Tab - Static Separator ========================================*/
@include Option("userChrome.tab.static_separator") {
@import "unselected_tab/static_separator";
}

View File

@ -0,0 +1,3 @@
.tab-icon-image:not([src], [pinned], [crashed], [busy]) {
display: -moz-inline-box !important;
}

View File

@ -0,0 +1,35 @@
#tabbrowser-tabs[closebuttons="activetab"] {
--inline-tab-padding: 7px !important; /* Original: 8px */
}
#tabbrowser-tabs[overflow="true"] {
--inline-tab-padding: 6px !important; /* Original: 8px */
}
.tab-content[pinned] {
--inline-tab-padding: 10px; /* Prevent overflow pinned tab's divide line not aligned */
padding-inline: var(--inline-tab-padding) !important;
}
:root[uidensity="compact"] .tab-content[pinned] {
--inline-tab-padding: 8px;
}
// mask-image: linear-gradient(to left, transparent, black var(--tab-label-mask-size));
.tabbrowser-tab {
.tab-label-container {
--tab-label-mask-size: 1.8em; /* Original: 2em */
}
}
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab {
.tab-label-container {
--tab-label-mask-size: 30%;
}
&:is([visuallyselected="true"], [multiselected="true"]) .tab-label-container {
--tab-label-mask-size: 25%;
}
}
.tabbrowser-tab[visuallyselected=true]:not([labelendaligned]):hover .tab-label-container,
#tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true],[labelendaligned]):hover .tab-label-container {
--tab-label-mask-size: 0.9em; /* Original: 1em */
}

View File

@ -0,0 +1,57 @@
#tabbrowser-tabs {
--uc-close-button-size: 24px;
--uc-close-button-padding: 6px;
--uc-close-button-margin: calc((var(--uc-close-button-size) - 16px) / -2);
}
#tabbrowser-tabs[closebuttons="activetab"] {
--uc-close-button-size: 20px;
--uc-close-button-padding: 4px;
}
//-- Mixin ---------------------------------------------------------------------
@mixin pinnedCloseButtonShow($prefix: "") {
#{$prefix}:not([busy]) .tab-close-button {
display: -moz-box !important;
-moz-box-ordinal-group: 0 !important;
/* Looks like hover */
width: var(--uc-close-button-size) !important;
height: var(--uc-close-button-size) !important;
padding: var(--uc-close-button-padding) !important;
margin-inline: var(--uc-close-button-margin) !important;
}
}
@mixin pinnedIconStackLayout($prefix: "") {
#{$prefix}:not([busy]) .tab-icon-stack {
width: 0 !important;
position: absolute;
bottom: 8px;
}
}
@mixin pinnedIconHide($prefix: "") {
#{$prefix} .tab-icon-image {
display: none !important;
}
}
//------------------------------------------------------------------------------
.tabbrowser-tab[pinned] {
@include pinnedCloseButtonShow("&[visuallyselected]:not([style*='transform: translateX']):hover");
@include pinnedIconStackLayout("&[visuallyselected]:not([style*='transform: translateX']):hover");
@include pinnedIconHide("&[visuallyselected]:not([style*='transform: translateX']):hover");
@include Option("userChrome.tab.close_button_at_pinned.always") {
@include pinnedCloseButtonShow("&[visuallyselected]");
@include pinnedIconStackLayout("&[visuallyselected]");
@include pinnedIconHide("&[visuallyselected]");
}
@include Option("userChrome.tab.close_button_at_pinned.background") {
@include pinnedCloseButtonShow("&:not([style*='transform: translateX']):hover");
@include pinnedIconStackLayout("&:not([style*='transform: translateX']):hover");
@include pinnedIconHide("&:not([style*='transform: translateX']):hover");
}
}
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-close-button {
margin-inline-end: var(--uc-close-button-margin) !important;
}

View File

@ -0,0 +1,80 @@
#tabbrowser-tabs[closebuttons="activetab"]
> #tabbrowser-arrowscrollbox
> .tabbrowser-tab:not([pinned])
> .tab-stack
> .tab-content
> .tab-close-button:not([selected="true"]) {
display: -moz-inline-box !important;
}
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button {
visibility: collapse !important;
opacity: 0;
}
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button {
visibility: visible !important;
opacity: 1;
}
@include Option("userChrome.tab.close_button_at_hover.always") {
.tabbrowser-tab:not([visuallyselected]) .tab-close-button {
visibility: collapse !important;
opacity: 0;
}
.tabbrowser-tab:hover .tab-close-button {
visibility: visible !important;
opacity: 1;
}
}
/* Animate */
@include Animate {
/* Fade out */
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button {
transition: opacity 0.1s var(--animation-easing-function) !important;
}
/* Fade in */
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button {
transition: opacity 0.25s var(--animation-easing-function) !important;
}
@include Option("userChrome.tab.close_button_at_hover.always") {
/* Fade out */
.tabbrowser-tab:not([visuallyselected]) .tab-close-button {
transition: opacity 0.1s var(--animation-easing-function) !important;
}
/* Fade in */
.tabbrowser-tab:hover .tab-close-button {
transition: opacity 0.25s var(--animation-easing-function) !important;
}
}
}
/* Closed Button's icon thicker */
.tabbrowser-tab .tab-content > .close-icon {
list-style-image: url("../icons/dismiss-filled.svg") !important;
}
/* Closed Button's icon larger */
.tab-close-button {
padding: 6px !important; /* Original: 7px */
}
.tabbrowser-tab:not(:hover, [pinned]) > .tab-stack > .tab-content > .tab-close-button {
padding-inline-start: 1px !important; /* Original: 0px */
width: 19px !important; /* Original: 17px */
}
/* Closed Button's padding reduce */
#tabbrowser-tabs[closebuttons="activetab"] .tab-content > .tab-close-button {
margin-inline-end: calc(
(var(--inline-tab-padding) / -2) + 2px
) !important; /* Original: calc(var(--inline-tab-padding) / -2)*/
padding: 4px !important; /* Original: 7px */
width: 20px !important; /* Original: 24px */
height: 20px !important; /* Original: 24px */
}
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button {
padding-inline-start: 3px !important; /* Original: 0px */
width: 19px !important; /* Redefine from 19px !important, Original: 17px = (width - padding) */
}

View File

@ -0,0 +1,64 @@
#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) {
@include AccentColor {
: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,
$accentTextColor 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,
$accentTextColor 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);
}

View File

@ -0,0 +1,10 @@
: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;
}

View File

@ -0,0 +1,12 @@
#tabs-newtab-button > .toolbarbutton-icon {
margin-left: 1px;
/* Origianl: calc((var(--tab-min-height) - 16px) / 2) = 10px */
--toolbarbutton-inner-padding: 6px;
}
:root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon {
--toolbarbutton-inner-padding: 4px; /* Photon: 6px */
}
:root[uidensity="touch"] #tabs-newtab-button > .toolbarbutton-icon {
--toolbarbutton-inner-padding: 9px; /* Photon: 9px */
}

View File

@ -0,0 +1,86 @@
#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"]):is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
#TabsToolbar[brighttext]
#tabbrowser-tabs:not([noshadowfortests])
tab[visuallyselected]
> stack:-moz-lwtheme::before,
:root:not([customizing="true"]):is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
#TabsToolbar[brighttext]
#tabbrowser-tabs:not([noshadowfortests])
tab[visuallyselected]
> stack:-moz-lwtheme::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");
}
@include OS($linux) {
/* 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;
}
}
@include NotOption("userChrome.tab.color_like_toolbar") {
:root:not([customizing="true"]) tab[visuallyselected] > stack::before,
:root:not([customizing="true"]) tab[visuallyselected] > stack::after {
/* Based on tab background
background-image: 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);
defaults
background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage));
*/
fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important;
}
}

View File

@ -0,0 +1,57 @@
#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;
}
/* Consider 0 0 4px rgba(128,128,142,0.9) -> 0 0 4px rgba(0,0,0,.4) new default */
#TabsToolbar:not([brighttext])
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
> .tab-stack
> .tab-background {
box-shadow: 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))),
0 0 4px rgba(128, 128, 142, 0.5) !important;
}
#TabsToolbar[brighttext]
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
> .tab-stack
> .tab-background:-moz-lwtheme {
box-shadow: 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))) !important;
}
/* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border
around the tab to help themes that are dependent on tab_line to show the selected tab. */
:root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"])
#TabsToolbar:not([brighttext])
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
> .tab-stack
> .tab-background:-moz-lwtheme {
box-shadow: 0 0 0 1px
var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))),
0 0 4px rgba(128, 128, 142, 0.5) !important;
}
:root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
#TabsToolbar[brighttext]
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
> .tab-stack
> .tab-background:-moz-lwtheme {
box-shadow: 0 0 0 1px
var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))) !important;
}

View File

@ -0,0 +1,15 @@
:root:not(:-moz-lwtheme) {
/* Fix for windows's system default theme. Using --toolbar-bgcolor, --toolbar-bgimage fallback */
--tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */
--tab-selected-bgimage: unset !important; /* Above FF v101 */
}
#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;
}

View File

@ -0,0 +1,37 @@
#tabbrowser-tabs:not([movingtab])
> #tabbrowser-arrowscrollbox
> .tabbrowser-tab
> .tab-stack
> .tab-background[multiselected]:not([selected]):-moz-lwtheme {
background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)),
linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
}
.tab-background[multiselected="true"]:not([selected="true"]) > .tab-loading-burst:not([bursting]) {
background: color-mix(in srgb, currentColor 65%, transparent);
opacity: 0.3;
}
#TabsToolbar[brighttext]
.tab-background[multiselected="true"]:not([selected="true"])
> .tab-loading-burst:not([bursting]) {
opacity: 0.15;
}
@include Option("userChrome.tab.connect_to_window") {
.tab-background[multiselected=true] {
outline: none !important;
}
}
@include NotOption("userChrome.tab.connect_to_window") {
/* Backport from FF 99 */
.tab-background[multiselected=true] {
outline: 1px solid color-mix(in srgb, var(--focus-outline-color, currentColor) 40%, transparent);
outline-offset: -1px;
}
.tab-background[multiselected=true][selected=true] {
outline-width: 2px;
outline-offset: -2px;
}
}

View File

@ -0,0 +1,81 @@
:root[lwtheme-mozlightdark] #tabbrowser-tabs, /* Legacy: v96 */
: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);"] {
--tab-line-color: rgb(10, 132, 255) !important;
}
@media (-moz-gtk-csd-available) {
:root:not(:-moz-lwtheme) #tabbrowser-tabs {
--tab-line-color: Highlight !important; /* -moz-accent-color */
}
}
.tab-context-line {
display: -moz-inline-box !important;
height: 2px !important;
border-radius: var(--tab-border-radius, 4px) var(--tab-border-radius, 4px) 0 0 !important;
}
.tabbrowser-tab:is([selected], [multiselected]) .tab-context-line {
/* Photon like color
Default: var(--tab-line-color, rgb(10, 132, 255))
Automatic: color-mix(in srgb, var(--button-primary-bgcolor) 80%, transparent)
FF v96+ replace by var(--lwt-tab-line-color) */
background-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255))) !important;
}
.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
background-color: rgba(0, 0, 0, 0.2) !important;
opacity: 1 !important;
transform: none !important;
}
#TabsToolbar[brighttext]
.tabbrowser-tab:hover:not([selected="true"], [multiselected])
> .tab-stack
> .tab-background
> .tab-context-line {
background-color: rgba(255, 255, 255, 0.2) !important;
}
/* Prevent identitiy color flashing */
.tabbrowser-tab[usercontextid] .tab-context-line {
--identity-icon-color: none;
}
: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;
}
/* Animation */
.tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line {
opacity: 0 !important;
transform: scaleX(0) !important;
}
@media (prefers-reduced-motion: no-preference) {
.tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line {
transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function) !important; /* --animation-easing-function: cubic-bezier(.07, .95, 0, 1); */
}
}
/* Remove side's background color border */
#TabsToolbar[brighttext]
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
> .tab-stack
> .tab-background:-moz-lwtheme {
--tabs-border-color: rgba(0, 0, 0, 0.3) !important;
box-shadow: 0 0 1px var(--tabs-border-color) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) */
}
#TabsToolbar:not([brighttext])
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
> .tab-stack
> .tab-background {
box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
}
/* Container Tab */
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
margin: unset !important;
}

View File

@ -0,0 +1,3 @@
.tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) {
display: none !important;
}

View File

@ -0,0 +1,3 @@
.tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]){
display: -moz-box !important;
}

View File

@ -0,0 +1,131 @@
//-- Mixin ---------------------------------------------------------------------
@mixin _hidden_tabIcon_soundTabLabel() {
@include NotOption("userChrome.hidden.tab_icon") {
@content;
}
@include Option("userChrome.hidden.tab_icon") {
@include NotOption("userChrome.hidden.tab_icon.always") {
@content;
}
}
}
@mixin _hidden_tabIcon_soundTabIcon() {
@include NotOption("userChrome.hidden.tab_icon") {
&:not([image]) {
@content;
}
}
@include Option("userChrome.hidden.tab_icon") {
@include NotOption("userChrome.hidden.tab_icon.always") {
@content;
}
}
}
//------------------------------------------------------------------------------
/* Makes the favicons always visible (also on hover) */
.tab-icon-image:not([pinned]) {
opacity: 1 !important;
}
/* Makes the speaker icon to always appear if the tab is playing (not only on hover) */
.tab-icon-overlay:not([crashed]),
.tab-icon-overlay[pinned][crashed][selected] {
/* Position */
top: 0 !important;
inset-inline-end: -9px !important;
z-index: 1 !important;
transform: translateX(-0.5px) translateY(-6px);
/* Shape */
padding: 1.5px !important;
border-radius: 10px !important;
width: 17px !important;
height: 17px !important;
}
.tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
/* Color */
color: currentColor !important;
stroke: transparent !important;
background: transparent !important;
fill-opacity: 0.8 !important;
opacity: 1 !important;
}
/* Label */
@include _hidden_tabIcon_soundTabLabel {
.tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label {
transform: translateX(4px);
}
}
/* Animate */
@include Animate {
.tab-icon-overlay:not([crashed]),
.tab-icon-overlay[pinned][crashed][selected] {
transition: 0.1s var(--animation-easing-function);
}
.tab-label-container > .tab-label {
transition: transform 0.25s var(--animation-easing-function);
}
}
/* None exist favicon - Size bigger */
@include NotOption("userChrome.tab.always_show_tab_icon") {
.tabbrowser-tab {
@include _hidden_tabIcon_soundTabIcon {
.tab-icon-overlay:not([pinned], [sharing], [crashed]) {
transform: translateX(-0.5px) translateY(-1px);
inset-inline-end: 0 !important;
margin-inline-end: 0 !important;
padding: 0 !important;
}
&:is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) {
opacity: 0 !important; /* Favicon hidden */
}
&:not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
.tab-label {
transform: translateX(3px);
}
}
}
}
/* Busy - Show */
.tab-throbber[busy],
.tab-icon-pending[busy] {
opacity: 1 !important;
}
/* Busy - Overlay Position */
.tabbrowser-tab:not([pinned])[busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) {
transform: translateX(-0.5px) translateY(-6px);
}
.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed])[busy] {
inset-inline-end: -9px !important;
margin-inline-end: 9.5px !important;
padding: 1.5px !important;
}
/* Hover */
.tab-icon-overlay:not([crashed])[soundplaying]:hover,
.tab-icon-overlay:not([crashed])[muted]:hover,
.tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
color: var(--toolbar-bgcolor, white) !important;
stroke: var(--lwt-tab-text, var(--toolbar-color)) !important;
background-color: var(--lwt-tab-text, var(--toolbar-color)) !important;
fill-opacity: 0.95 !important;
}
#TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[soundplaying]:hover,
#TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[muted]:hover,
#TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
color: var(--toolbar-bgcolor, black) !important;
}
.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]):hover {
padding: 0 !important;
}

View File

@ -0,0 +1,141 @@
//-- Mixin ---------------------------------------------------------------------
@mixin _dynamicSeparatorShape() {
/* Box Model */
content: "";
display: block;
position: absolute;
/* Position */
top: 50%;
/* Bar shape */
width: 1px;
height: 20px;
/* Bar Color */
opacity: 0;
background-color: var(--toolbarseparator-color);
@include Option("userChrome.compatibility.dynamic_separator") {
background-color: var(--tabs-border-color);
}
}
//------------------------------------------------------------------------------
@include Option("userChrome.tab.newtab_button_like_tab") {
#tabbrowser-arrowscrollbox {
position: absolute;
}
.tab-background::before,
#tabs-newtab-button::before {
@include _dynamicSeparatorShape;
/* More position */
transform: translateX(-2.5px) translateY(calc(-50% + 1px));
}
}
@include NotOption("userChrome.tab.newtab_button_like_tab") {
.tab-background::before,
#tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab]
.tab-background::after {
@include _dynamicSeparatorShape;
}
.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;
}
}
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before {
opacity: var(--tab-separator-opacity);
}
@include Option("userChrome.tabbar.one_liner") {
@include NotOption("userChrome.tabbar.one_liner.tabbar_first") {
@include OneLinerContent {
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before {
opacity: var(--tab-separator-opacity);
transform: translateX(-1.5px) translateY(calc(-50% + 1px));
}
}
}
}
@include Option("userChrome.tab.newtab_button_like_tab") {
#tabs-newtab-button:not(:hover, [open])::before {
opacity: var(--tab-separator-opacity);
}
}
@include NotOption("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:not([visuallyselected], [multiselected], :hover)[last-visible-tab]
.tab-background::after {
opacity: var(--tab-separator-opacity);
}
}
#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;
}
@include Option("userChrome.tab.newtab_button_like_tab") {
#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, /* Legacy - v103 */
#navigator-toolbox:not([movingtab])
.tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover)
~ #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button::before {
opacity: 0 !important;
}
}
@include NotOption("userChrome.tab.newtab_button_like_tab") {
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
+ .tabbrowser-tab:not([visuallyselected])
.tab-background::before {
opacity: 0 !important;
}
}
/* Animate */
@include Animate {
.tab-background::before {
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
}
@include Option("userChrome.tab.newtab_button_like_tab") {
#tabs-newtab-button::before {
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
}
}
@include NotOption("userChrome.tab.newtab_button_like_tab") {
#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 */
#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[last-visible-tab] {
margin-inline-end: 1px !important;
}

View File

@ -0,0 +1,46 @@
.tabbrowser-tab[first-visible-tab="true"] .tab-background::before,
.tab-background::after {
content: "";
}
.tab-background::before,
.tab-background::after {
/* Box Model */
display: block;
position: absolute;
/* Position */
top: 50%;
transform: translateY(-50%) !important;
/* Bar shape */
width: 0px;
height: 100%;
/* Bar Color */
opacity: 0.3;
border-right: 1px solid var(--lwt-background-tab-separator-color, currentColor) !important;
}
.tab-background::after {
right: 0;
}
.tabbrowser-tab[visuallyselected] .tab-background::before,
.tabbrowser-tab[visuallyselected] .tab-background::after,
.tabbrowser-tab[beforeselected-visible] .tab-background::after {
@include Option("userChrome.tab.static_separator.selected_accent") {
--lwt-background-tab-separator-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255)));
opacity: 1;
}
@include NotOption("userChrome.tab.static_separator.selected_accent") {
opacity: 0;
}
}
/* Animate */
@include Animate {
.tab-background::before,
.tab-background::after {
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
}
}

View File

@ -0,0 +1,87 @@
//-- Mixin ---------------------------------------------------------------------
@mixin _asTitlebar_preSpacer() {
@include NotOption("userChrome.centered.tab") {
@content;
}
@include Option("userChrome.centered.tab") {
@include Option("userChrome.centered.tab.label") {
@content;
}
}
}
//------------------------------------------------------------------------------
:root:not([tabsintitlebar="true"]) #tabbrowser-tabs, /* Show only */
#scrollbutton-up, /* Defaults */
#scrollbutton-down,
.titlebar-spacer[type="pre-tabs"],
spacer:is([part="overflow-start-indicator"], [part="overflow-end-indicator"]),
.tabbrowser-tab:not([selected="true"]),
.tabbrowser-tab[selected="true"] .tab-background,
.tabbrowser-tab[selected="true"] .tab-stack:is(::before, ::after),
.tabbrowser-tab[selected="true"] .tab-close-button,
#tabs-newtab-button {
display: none !important;
}
.tabbrowser-tab[selected="true"] {
-moz-window-dragging: drag;
--tab-max-width: 100vw;
min-width: calc(var(--uc-tabbar-width, 100vw) - var(--uc-widow-control-space)) !important;
max-width: var(--tab-max-width) !important;
margin-inline-start: calc(var(--tab-shadow-max-size) * -1) !important;
// padding-inline-start: calc(var(--tab-shadow-max-size) + 1px) !important;
&[pinned="true"] {
-moz-box-flex: 100;
max-width: var(--tab-max-width) !important;
}
.tab-label-container {
margin-inline: 0 !important;
}
}
.tab-content {
margin-inline: auto;
width: 100%;
}
/* Pinned */
#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned][selected="true"] {
position: relative !important;
}
#tabbrowser-tabs {
--tab-overflow-pinned-tabs-width: 0 !important;
padding-inline: 0 !important; /* Original: var(--tab-overflow-pinned-tabs-width) 0; */
}
.tab-throbber,
.tab-icon-pending,
.tab-icon-image,
.tab-sharing-icon-overlay,
.tab-icon-overlay {
&[pinned] {
margin-inline-end: 5.5px;
}
}
.tab-label-container[pinned] {
width: unset !important;
}
/* Padding */
@include _asTitlebar_preSpacer {
#tabbrowser-arrowscrollbox {
margin-inline: 2px !important;
}
:root[sizemode="normal"] #tabbrowser-arrowscrollbox {
margin-inline: 6px !important;
}
}
@include Option("browser.tabs.tabmanager.enabled") {
:root:not([tabsintitlebar="true"]) #tabbrowser-tabs:not([overflow="true"], [hashiddentabs]) ~ #alltabs-button,
:root:not([tabsintitlebar="true"]) #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow="true"]) ~ #new-tab-button {
display: -moz-box !important;
}
}

View File

@ -1,5 +1,5 @@
/*= Tabs on Bottom ===========================================================*/ /*= Tabs on Bottom ===========================================================*/
@include Option("userChrome.tab.on_bottom", "userChrome.fullscreen.overlap") { @include Option("userChrome.tabbar.on_bottom", "userChrome.fullscreen.overlap") {
/* Don't use display: flex at not fullscreen!! side effect #372 */ /* Don't use display: flex at not fullscreen!! side effect #372 */
:root[sizemode="fullscreen"] #navigator-toolbox { :root[sizemode="fullscreen"] #navigator-toolbox {
display: flex !important; /* Needed for content to take up entire height, compatibility with tabs on bottom */ display: flex !important; /* Needed for content to take up entire height, compatibility with tabs on bottom */
@ -19,51 +19,26 @@
} }
} }
@include Option("userChrome.tab.on_bottom") { @include Option("userChrome.tabbar.on_bottom") {
@import "tabs_on_bottom"; @include OneLinerOnBottom {
@import "on_bottom";
}
} }
/*= Tab Bar - Connect to window ==============================================*/ /*= Tab Bar - Oneliner =======================================================*/
@include Option("userChrome.tab.connect_to_window") { @include OneLiner {
@import "connect_to_window"; @import "one_liner";
} }
/*= Selected Tab =============================================================*/ /*= Tab Bar - Shared Layout ==================================================*/
@import "selected_tab"; @include Option("userChrome.tabbar.on_bottom", "userChrome.tabbar.one_liner", "userChrome.hidden.tabbar", "userChrome.tabbar.as_titlebar") {
@import "layout/window_control_size";
/*= Unselected Tab - Divide line =============================================*/ }
@import "unselected_tab"; @include Option("userChrome.tabbar.on_bottom", "userChrome.tabbar.one_liner", "userChrome.hidden.tabbar") {
@import "layout";
/*= New tab button ============================================================*/
@import "newtab_button";
/*= Unloaded Tab - Contents Opacity ===========================================*/
@include Option("userChrome.tab.unloaded") {
@import "unload_tab";
} }
/*= Clipped tabs =============================================================*/ /*= Tab Bar - Show only current tab ==========================================*/
@import "clipped_tab"; @include Option("userChrome.tabbar.as_titlebar") {
@import "as_titlebar";
/*= Sound Tab ================================================================*/
@import "sound_tab";
/*= PictureInPicture Tab - Show PIP Icon =====================================*/
@include Option("userChrome.tab.pip") {
@import "picture_in_picture_tab";
}
/*= Container Tab - Color line at icon's bottom ==============================*/
@include Option("userChrome.tab.container") {
@import "container_tab";
}
/*= Crashed Tab - Don't show Favicons ========================================*/
@include Option("userChrome.tab.crashed") {
@import "crashed_tab";
}
/*= Tab Label - Make to Center ===============================================*/
@include Option("userChrome.tab.centered_label") {
@import "centered_label";
} }

View File

@ -0,0 +1,26 @@
@include NotOption("userChrome.tabbar.one_liner") {
@include Option("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") {
@import "layout/window_control";
}
}
@include Option("userChrome.tabbar.one_liner") {
@include NotOption("userChrome.tabbar.one_liner.responsive") {
@include Option("userChrome.tabbar.one_liner.tabbar_first") {
@import "layout/window_control";
}
}
@include Option("userChrome.tabbar.one_liner.responsive") {
@include Option("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") {
@media screen and (max-width: 1100px) {
@import "layout/window_control";
}
}
@include Option("userChrome.tabbar.one_liner.tabbar_first") {
@media screen and (min-width: 1100px) {
@import "layout/window_control";
}
}
}
}
@import "layout/navbar_padding";

View File

@ -0,0 +1,130 @@
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/*= Tabbar - Move to bottom ==================================================*/
#titlebar {
order: 2; /* When userChrome.fullscreen.overlap */
-moz-box-ordinal-group: 2;
--tabs-navbar-shadow-size: 0px;
}
#tab-notification-deck {
order: 2; /* When userChrome.fullscreen.overlap */
-moz-box-ordinal-group: 2;
}
#TabsToolbar .titlebar-spacer {
display: none;
}
#TabsToolbar-customization-target > .toolbarbutton-1:last-child {
padding-inline-end: var(--toolbar-start-end-padding, 8px);
}
@include Option("userChrome.tabbar.on_bottom.above_bookmark") {
#PersonalToolbar {
order: 2; /* When userChrome.fullscreen.overlap */
-moz-box-ordinal-group: 2;
}
}
@include NotOption("userChrome.tabbar.on_bottom.above_bookmark") {
@include Option("userChrome.tab.connect_to_window") {
@include Option("userChrome.tab.color_like_toolbar") {
#navigator-toolbox {
border-bottom-color: var(--toolbar-bgcolor) !important; /* Original: 1px solid var(--chrome-content-separator-color); */
}
}
}
}
/*= Tabbar - Hidden at singgle tab ===========================================*/
@include Option("userChrome.tabbar.on_bottom.hidden_single_tab") {
#tabbrowser-tabs .tabbrowser-tab:only-of-type {
display: none !important;
}
#tabbrowser-tabs,
#tabbrowser-tabs arrowscrollbox {
height: auto !important;
min-height: auto !important;
}
@include Animate {
#tabbrowser-tabs {
transition: height 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
}
}
}
/*= Menubar - Always on top ==================================================*/
@include Option("userChrome.tabbar.on_bottom.menubar_on_top") {
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
:root {
/* height if native titlebar is enabled, assumes empty menubar */
--uc-menubar-height: 20px;
--uc-menubar-padding: 1px; /* FF's menubar padding */
--uc-menubar-container-height: calc(var(--uc-menubar-height) - (2 * var(--uc-menubar-padding)));
}
:root[tabsintitlebar] {
/* height when native titlebar is disabled, more roomy so can fit buttons etc. */
--uc-menubar-height: 30px;
}
/* Menubar on top patch - use with tabs_on_bottom.css */
/* Only really useful if menubar is ALWAYS visible */
:root:not([sizemode="fullscreen"]) {
--uc-window-control-width: 0px !important;
}
/* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */
:root:not([sizemode="fullscreen"]) #nav-bar {
border-inline-width: 0;
}
#navigator-toolbox{
-moz-window-dragging: drag;
}
:root[sizemode="fullscreen"] #navigator-toolbox {
padding-top: 0px !important;
}
#toolbar-menubar {
position: fixed;
display: flex;
top: var(--uc-titlebar-padding);
height: var(--uc-menubar-height);
width: 100%;
overflow: hidden;
}
:root[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive="true"]) {
height: var(--uc-menubar-height) !important; /* calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) */
}
#toolbar-menubar > .titlebar-buttonbox-container {
height: 100%;
order: 100;
}
#toolbar-menubar > [flex] {
flex-grow: 100;
}
#toolbar-menubar > spacer[flex] {
order: 99;
flex-grow: 1;
min-width: var(--uc-window-drag-space-post);
}
#toolbar-menubar .toolbarbutton-1 {
--toolbarbutton-inner-padding: 3px;
}
#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container {
height: var(--uc-menubar-container-height);
}
:root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container{
visibility: collapse !important;
}
:root:not([chromehidden~="menubar"]):not([sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container {
visibility: visible;
}
}

View File

@ -0,0 +1,104 @@
:root {
--uc-navbar-width-origin: 40vw;
--uc-navbar-width: var(--uc-navbar-width-origin);
--uc-tabbar-width: calc(100vw - var(--uc-navbar-width));
--uc-navbar-margin: calc(var(--uc-navbar-width) + var(--uc-navbar-gap, 0px));
@include Option("userChrome.autohide.fill_urlbar") {
--uc-navbar-width-origin: 50vw;
--uc-navbar-width: 24em;
}
}
#nav-bar {
--uc-navbar-double-block: calc(2 * var(--uc-navbar-block, 0px));
height: calc(var(--uc-tabbar-height) - var(--uc-navbar-double-block)) !important;
margin-top: calc(var(--uc-tabbar-hide-height) + var(--uc-navbar-double-block)) !important;
margin-bottom: var(--uc-navbar-block, 0px) !important;
transform: translateY(calc(-1 * var(--uc-navbar-block, 0px)));
}
#titlebar {
transform: translateY(var(--uc-navbar-block, 0px));
}
#TabsToolbar > .titlebar-buttonbox-container {
transform: translateY(calc(-1 * var(--uc-navbar-block, 0px)));
}
@include NotOption("userChrome.tabbar.one_liner.combine_navbar") {
:root {
--uc-navbar-gap: 10px;
--uc-navbar-block: 1.5px; // var(--tab-block-margin) or var(--tabs-navbar-shadow-size)
&[uidensity="compact"] {
--uc-navbar-block: 1px;
}
&[uidensity="touch"] {
--uc-navbar-block: 3px;
}
}
#nav-bar {
--toolbarbutton-inner-padding: 6px; /* Original: 8px */
border-radius: var(--tab-border-radius, 4px);
}
#nav-bar,
#nav-bar-customization-target {
-moz-box-align: center;
}
#urlbar[breakout] {
top: 0px !important; /* Original: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2); */
}
}
@include Option("userChrome.tabbar.one_liner.combine_navbar") {
#navigator-toolbox {
background-color: var(--toolbar-bgcolor) !important;
}
#nav-bar {
--lwt-tabs-border-color: transparent; // box-shadow
background-color: unset !important; // var(--toolbar-bgcolor)
background-image: unset !important; // var(--toolbar-bgimage)
}
}
#urlbar-container {
min-width: calc(24px + 2 * var(--toolbarbutton-inner-padding)) !important; // Original: calc(350px + 24px + 2 * var(--toolbarbutton-inner-padding))
}
#PersonalToolbar {
// for URL Bar
position: relative;
z-index: -1;
}
toolbarspring.chromeclass-toolbar-additional {
display: none !important;
}
@include NotOption("userChrome.tabbar.one_liner.tabbar_first") {
#TabsToolbar {
margin-inline-start: var(--uc-navbar-margin) !important;
}
#nav-bar {
margin-inline-end: var(--uc-tabbar-width) !important;
}
.titlebar-spacer[type="pre-tabs"] {
display: none !important;
}
}
@include Option("userChrome.tabbar.one_liner.tabbar_first") {
#TabsToolbar {
margin-inline-end: var(--uc-navbar-margin) !important;
}
#nav-bar {
margin-inline-start: var(--uc-tabbar-width) !important;
}
.titlebar-spacer[type="post-tabs"] {
display: none !important;
}
}

View File

@ -0,0 +1,128 @@
/*= Navbar - Padding for window controls =====================================*/
/* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */
//-- Mixin ---------------------------------------------------------------------
@mixin _remove_spacer_pre() {
/* Don't need pre spacer */
--uc-window-drag-space-pre: 0px;
}
@mixin _remove_spacer_post() {
/* Don't need window control */
--uc-widow-control-space: 0px;
}
@mixin _remove_spacer_oneLiner() {
@include Option("userChrome.tabbar.one_liner.tabbar_first") {
@include _remove_spacer_pre;
@include Option("userChrome.tabbar.as_titlebar") {
#tabbrowser-tabs {
@include _remove_spacer_post;
}
}
}
@include NotOption("userChrome.tabbar.one_liner.tabbar_first") {
@include NotOption("userChrome.tabbar.as_titlebar") {
@include _remove_spacer_post;
}
}
}
@mixin _oneLiner_navBar_borderPadding() {
@include NotOption("userChrome.tabbar.one_liner") {
@content;
}
@include Option("userChrome.tabbar.one_liner") {
@include Option("userChrome.tabbar.one_liner.combine_navbar") {
@content;
}
@include NotOption("userChrome.tabbar.one_liner.combine_navbar") {
@include Option("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") {
@media screen and (max-width: 1100px) {
@content;
}
}
}
}
}
@mixin _oneLiner_navBar_marginGap() {
@include NotOption("userChrome.tabbar.one_liner.combine_navbar") {
@include NotOption("userChrome.tabbar.one_liner.responsive") {
@content;
}
@include Option("userChrome.tabbar.one_liner.responsive") {
@media screen and (min-width: 1100px) {
@content;
}
}
}
}
//------------------------------------------------------------------------------
@include Option("userChrome.tabbar.one_liner") {
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
@include NotOption("userChrome.tabbar.one_liner.responsive") {
@include _remove_spacer_oneLiner;
}
@include Option("userChrome.tabbar.one_liner.responsive") {
@media screen and (max-width: 1100px) {
@include NotOption("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") {
@include _remove_spacer_pre;
@include _remove_spacer_post;
}
}
@media screen and (min-width: 1100px) {
@include _remove_spacer_oneLiner;
}
}
}
}
#nav-bar {
border-inline-style: solid !important;
border-inline-color: transparent;
@include _oneLiner_navBar_borderPadding {
border-inline-start-width: var(--uc-window-drag-space-pre);
border-inline-end-width: var(--uc-widow-control-space);
}
@include Option("userChrome.tabbar.one_liner") {
@include _oneLiner_navBar_marginGap {
@include NotOption("userChrome.tabbar.one_liner.tabbar_first") {
margin-inline-start: var(--uc-window-drag-space-pre) !important;
}
@include Option("userChrome.tabbar.one_liner.tabbar_first") {
margin-inline-end: var(--uc-widow-control-space) !important;
}
}
}
}
/* Use this pref to check Mac OS where window controls are on left */
/* This pref defaults to true on Mac and doesn't actually do anything on other platforms. So if your system has window controls on LEFT side you can set the pref to true */
@include OS($mac) {
:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar {
@include _oneLiner_navBar_borderPadding {
border-inline-start-width: var(--uc-widow-control-space);
border-inline-end-width: var(--uc-window-drag-space-pre);
}
@include Option("userChrome.tabbar.one_liner") {
@include _oneLiner_navBar_marginGap {
@include NotOption("userChrome.tabbar.one_liner.tabbar_first") {
margin-inline-start: var(--uc-window-drag-space-pre, 0px) !important;
}
@include Option("userChrome.tabbar.one_liner.tabbar_first") {
margin-inline-end: var(--uc-widow-control-space, 0px) !important;
}
}
}
}
:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
:root[sizemode="fullscreen"] #window-controls {
right: unset;
}
}

View File

@ -0,0 +1,121 @@
/*= Windows Control - Move to toolbar ========================================*/
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
:root {
--uc-titlebar-padding: 0px;
}
@include OS($win) {
:root[sizemode="maximized"][tabsintitlebar] {
--uc-titlebar-padding: 8px;
}
}
#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container {
position: fixed;
display: block;
top: var(--uc-titlebar-padding);
right:0;
height: 40px;
z-index: 1;
}
/* where window controls are on left */
@include OS($mac) {
:root{
--uc-titlebar-padding: 0px !important;
}
.titlebar-buttonbox-container{
left:0;
right: unset !important;
}
}
#navigator-toolbox {
padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important;
}
:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container {
height: 32px;
}
#toolbar-menubar[inactive] > .titlebar-buttonbox-container {
@include NotOption("userChrome.hidden.tabbar") {
opacity: 0;
visibility: collapse;
}
@include Option("userChrome.hidden.tabbar") {
opacity: 1;
visibility: visible;
@include Option("userChrome.autohide.navbar") {
opacity: 0;
visibility: collapse;
}
}
}
#navigator-toolbox:is(:hover, :focus-within) #toolbar-menubar[inactive]:not([customizing]) > .titlebar-buttonbox-container {
@include Option("userChrome.hidden.tabbar") {
@include Option("userChrome.autohide.navbar") {
opacity: 1;
visibility: visible;
}
}
}
@include Animate {
#toolbar-menubar[inactive] > .titlebar-buttonbox-container {
transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms),
visibility 100ms var(--animation-easing-function) 0.25s !important;
}
#navigator-toolbox:is(:hover, :focus-within) #toolbar-menubar[inactive]:not([customizing]) > .titlebar-buttonbox-container {
transition-delay: 0s !important;
}
}
.titlebar-buttonbox-container > .titlebar-buttonbox {
height: 100%;
@include OS($mac) {
margin-block: 10px;
}
}
/* At Full Screen */
:root[sizemode="fullscreen"] #window-controls {
position: fixed;
display: flex;
top: 0;
right: 0;
height: 40px;
}
:root[uidensity="compact"][sizemode="fullscreen"] #window-controls {
height: 32px;
}
@include Option("browser.fullscreen.autohide") {
:root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container {
visibility: hidden;
}
}
@include Option("userChrome.hidden.tabbar") {
:root[inFullscreen]:not([macOSNativeFullscreen]) {
#toolbar-menubar {
visibility: visible !important;
min-height: 0 !important;
max-height: 0 !important;
}
#menubar-items {
visibility: collapse !important;
}
}
}
/* At Activated Menubar */
:root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container {
display: block !important;
}
:root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container {
@include NotOption("userChrome.hidden.tabbar") {
visibility: hidden;
}
}

View File

@ -0,0 +1,27 @@
:root {
--uc-window-control-width: 0px; /* Same as .titlebar-buttonbox-container - Space reserved for window controls */
--uc-window-drag-space-pre: 0px; /* Same as .titlebar-spacer[type="pre-tabs"] - Extra space reserved on both sides of the nav-bar to be able to drag the window */
--uc-window-drag-space-post: 0px; /* Same as .titlebar-spacer[type="post-tabs"] */
--uc-widow-control-space: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post));
}
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
--uc-window-control-width: 84px; /* 84px is default value of linux */
--uc-window-drag-space-pre: var(--uc-title-pre-spacer, 40px); // 30px
--uc-window-drag-space-post: var(--uc-title-post-spacer, 40px); // 25px
@include OS($win7, $win8) {
--uc-window-control-width: 105px;
}
@include OS($win10) {
--uc-window-control-width: 138px;
}
@include OS($mac) {
--uc-window-control-width: 72px;
}
}
:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) {
--uc-window-drag-space-pre: 0px; /* Remove pre space */
}

View File

@ -0,0 +1,35 @@
/*= System Default Theme =====================================================*/
@include Option("userChrome.theme.system_default") {
@import "system_default_theme";
}
/*= Fully Theme Mode =========================================================*/
// Default Themes
// https://github.com/mozilla/gecko-dev/blob/master/toolkit/mozapps/extensions/default-theme/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
@include Option("userChrome.theme.proton_color") {
@import "proton_color";
@include Option("userChrome.theme.proton_color.dark_blue_accent") {
@import "dark_blue_accent";
}
}
@include Option("userChrome.theme.fully_color") {
@import "fully_color";
}
/*= Fully Dark Mode ==========================================================*/
@include Option("userChrome.theme.fully_dark") {
@import "fully_dark";
}
/*= Proton Theme Mode ========================================================*/
@include Option("userChrome.theme.proton_chrome") {
@import "proton_chrome";
}
/*= Monospace ================================================================*/
@include Option("userChrome.theme.monospace") {
@import "monospace";
}

View File

@ -0,0 +1,3 @@
* {
font-family: -moz-fixed;
}

View File

@ -1,3 +1,4 @@
#pageActionButton { #urlbar:not([breakout-extend="true"]) #pageActionButton {
display: block !important; display: block !important;
visibility: visible !important;
} }

View File

@ -1,7 +1,7 @@
.urlbarView-type-icon { .urlbarView-type-icon {
min-width: 16px !important; min-width: 16px !important;
height: 16px !important; height: 16px !important;
margin-bottom: 0 !important; margin-block: 0 !important;
margin-inline-start: 0 !important; margin-inline-start: 0 !important;
} }

View File

@ -0,0 +1,68 @@
@use "option" as *;
@mixin OneLinerContent() {
@include NotOption("userChrome.tabbar.one_liner.responsive") {
@content;
}
@include Option("userChrome.tabbar.one_liner.responsive") {
@media screen and (min-width: 1100px) {
@content;
}
}
}
@mixin OneLiner() {
@include Option("userChrome.tabbar.one_liner") {
@include OneLinerContent {
@content;
}
}
}
@mixin OneLinerOnBottom() {
@include NotOption("userChrome.tabbar.one_liner") {
@content;
}
@include Option("userChrome.tabbar.one_liner") {
@include Option("userChrome.tabbar.one_liner.responsive") {
@media screen and (max-width: 1100px) {
@content;
}
}
}
}
@mixin OneLinerTabbar() {
@include NotOption("userChrome.tabbar.one_liner.responsive") {
@content;
}
@include Option("userChrome.tabbar.one_liner.responsive") {
@media screen and (min-width: 1100px) {
@content;
}
@include Option("userChrome.autohide.tabbar") {
@content;
}
}
}
@mixin OneLinerNavbarContent() {
@include NotOption("userChrome.tabbar.one_liner") {
@content;
}
@include Option("userChrome.tabbar.one_liner") {
@include Option("userChrome.tabbar.one_liner.responsive") {
@media screen and (max-width: 1100px) {
@content;
}
}
}
}
@mixin OneLinerNavbar() {
@include Option("userChrome.autohide.navbar") {
@include OneLinerNavbarContent() {
@content;
}
}
}

View File

@ -68,10 +68,40 @@ user_pref("userChrome.rounding.square_tab", true);
// == Theme Custom Settings ==================================================== // == Theme Custom Settings ====================================================
// -- User Chrome -------------------------------------------------------------- // -- User Chrome --------------------------------------------------------------
// user_pref("userChrome.theme.proton_color.dark_blue_accent", true);
// user_pref("userChrome.theme.monospace", true);
// user_pref("userChrome.decoration.disable_panel_animate", true); // user_pref("userChrome.decoration.disable_panel_animate", true);
// user_pref("userChrome.decoration.disable_sidebar_animate", true); // user_pref("userChrome.decoration.disable_sidebar_animate", true);
// user_pref("userChrome.theme.proton_color.dark_blue_accent", true); // user_pref("userChrome.autohide.tab", true);
// user_pref("userChrome.autohide.tab.opacity", true);
// user_pref("userChrome.autohide.tab.blur", true);
// user_pref("userChrome.autohide.tabbar", true);
// user_pref("userChrome.autohide.navbar", true);
// user_pref("userChrome.autohide.bookmarkbar", true);
// user_pref("userChrome.autohide.sidebar", true);
// user_pref("userChrome.autohide.fill_urlbar", true);
// user_pref("userChrome.autohide.back_button", true);
// user_pref("userChrome.autohide.forward_button", true);
// user_pref("userChrome.autohide.page_action", true);
// user_pref("userChrome.autohide.toolbar_overlap", true);
// user_pref("userChrome.hidden.tab_icon", true);
// user_pref("userChrome.hidden.tab_icon.always", true);
// user_pref("userChrome.hidden.tabbar", true);
// user_pref("userChrome.hidden.navbar", true);
// user_pref("userChrome.hidden.sidebar_header", true);
// user_pref("userChrome.hidden.sidebar_header.vertical_tab_only", true);
// user_pref("userChrome.hidden.urlbar_iconbox", true);
// user_pref("userChrome.hidden.bookmarkbar_icon", true);
// user_pref("userChrome.hidden.bookmarkbar_label", true);
// user_pref("userChrome.hidden.disabled_menu", true);
// user_pref("userChrome.centered.tab", true);
// user_pref("userChrome.centered.tab.label", true);
// user_pref("userChrome.centered.urlbar", true);
// user_pref("userChrome.centered.bookmarkbar", true);
// user_pref("userChrome.rounding.square_button", true); // user_pref("userChrome.rounding.square_button", true);
// user_pref("userChrome.rounding.square_panel", true); // user_pref("userChrome.rounding.square_panel", true);
@ -95,21 +125,29 @@ user_pref("userChrome.rounding.square_tab", true);
// user_pref("userChrome.urlView.go_button_when_typing", true); // user_pref("userChrome.urlView.go_button_when_typing", true);
// user_pref("userChrome.urlView.always_show_page_actions", true); // user_pref("userChrome.urlView.always_show_page_actions", true);
// user_pref("userChrome.tab.on_bottom", true); // user_pref("userChrome.tabbar.as_titlebar", true);
// user_pref("userChrome.tab.on_bottom.above_bookmark", true); // Need on_bottom // user_pref("userChrome.tabbar.on_bottom", true);
// user_pref("userChrome.tab.on_bottom.menubar_on_top", true); // Need on_bottom // user_pref("userChrome.tabbar.on_bottom.above_bookmark", true); // Need on_bottom
// user_pref("userChrome.tabbar.on_bottom.menubar_on_top", true); // Need on_bottom
// user_pref("userChrome.tabbar.on_bottom.hidden_single_tab", true); // Need on_bottom
// user_pref("userChrome.tabbar.one_liner", true);
// user_pref("userChrome.tabbar.one_liner.combine_navbar", true); // Need one_liner
// user_pref("userChrome.tabbar.one_liner.tabbar_first", true); // Need one_liner
// user_pref("userChrome.tabbar.one_liner.responsive", true); // Need one_liner
// user_pref("userChrome.tab.always_show_tab_icon", true); // user_pref("userChrome.tab.always_show_tab_icon", true);
// user_pref("userChrome.tab.close_button_at_pinned", true); // user_pref("userChrome.tab.close_button_at_pinned", true);
// user_pref("userChrome.tab.close_button_at_pinned.always", true); // user_pref("userChrome.tab.close_button_at_pinned.always", true);
// user_pref("userChrome.tab.close_button_at_pinned.background", true); // user_pref("userChrome.tab.close_button_at_pinned.background", true);
// user_pref("userChrome.tab.close_button_at_hover.always", true); // Need close_button_at_hover // user_pref("userChrome.tab.close_button_at_hover.always", true); // Need close_button_at_hover
// user_pref("userChrome.tab.sound_show_label", true); // Need remove sound_hide_label // user_pref("userChrome.tab.sound_show_label", true); // Need remove sound_hide_label
// user_pref("userChrome.tab.centered_label", true);
// user_pref("userChrome.panel.remove_strip", true); // user_pref("userChrome.panel.remove_strip", true);
// user_pref("userChrome.panel.full_width_separator", true); // user_pref("userChrome.panel.full_width_separator", true);
// user_pref("userChrome.panel.full_width_padding", true); // user_pref("userChrome.panel.full_width_padding", true);
// user_pref("userChrome.sidebar.overlap", true);
// user_pref("userChrome.icon.account_image_to_right", true); // user_pref("userChrome.icon.account_image_to_right", true);
// user_pref("userChrome.icon.account_label_to_right", true); // user_pref("userChrome.icon.account_label_to_right", true);
// user_pref("userChrome.icon.menu.full", true); // user_pref("userChrome.icon.menu.full", true);
@ -120,6 +158,7 @@ user_pref("userChrome.rounding.square_tab", true);
// user_pref("userContent.page.proton_color.dark_blue_accent", true); // user_pref("userContent.page.proton_color.dark_blue_accent", true);
// user_pref("userContent.page.proton_color.system_accent", true); // user_pref("userContent.page.proton_color.system_accent", true);
// user_pref("userContent.page.monospace", true);
// == Theme Default Settings =================================================== // == Theme Default Settings ===================================================
// -- User Chrome -------------------------------------------------------------- // -- User Chrome --------------------------------------------------------------