Update to lepton 6.0.0
This commit is contained in:
parent
9ad7265158
commit
98621a80e5
@ -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
|
||||||
|
@ -1,3 +1,3 @@
|
|||||||
[Info]
|
[Info]
|
||||||
Ver=v5.3.0
|
Ver=v6.0.0
|
||||||
Branch=photon-style
|
Branch=photon-style
|
||||||
|
@ -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
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
File diff suppressed because it is too large
Load Diff
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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"
|
||||||
)
|
)
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -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";
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -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";
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -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";
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -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));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,4 @@
|
|||||||
|
#PlacesToolbarItems {
|
||||||
|
display: flex !important;
|
||||||
|
justify-content: safe center !important;
|
||||||
|
}
|
@ -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";
|
||||||
|
}
|
@ -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";
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,4 @@
|
|||||||
|
.tab-icon-stack {
|
||||||
|
-moz-box-flex: 1;
|
||||||
|
justify-content: end;
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -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)) */
|
||||||
|
}
|
||||||
|
@ -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";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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") {
|
||||||
|
@ -0,0 +1,5 @@
|
|||||||
|
@-moz-document url-prefix("about:"),
|
||||||
|
url-prefix("chrome://browser/content/places/places.xhtml"),
|
||||||
|
regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
|
||||||
|
@import "../theme/monospace";
|
||||||
|
}
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -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";
|
||||||
|
}
|
||||||
|
}
|
@ -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 {
|
||||||
|
@ -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");
|
||||||
|
}
|
||||||
|
@ -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"] {
|
||||||
|
@ -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;
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -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);
|
||||||
|
// }
|
||||||
|
// }
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
@ -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";
|
||||||
|
@ -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";
|
||||||
|
@ -0,0 +1,3 @@
|
|||||||
|
:root[uidensity="compact"] #PersonalToolbar toolbarbutton {
|
||||||
|
margin-top: 0px; /* Original: 2px */
|
||||||
|
}
|
@ -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 ====================================================*/
|
||||||
|
@ -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;
|
||||||
|
}
|
@ -0,0 +1,4 @@
|
|||||||
|
#nav-bar:not([customizing]) toolbarspring {
|
||||||
|
min-width: 1px !important;
|
||||||
|
max-width: 100px !important;
|
||||||
|
}
|
@ -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 */
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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") {
|
||||||
|
@ -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;
|
||||||
|
}
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1 @@
|
|||||||
|
@import "overlap";
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -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";
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
@ -0,0 +1,3 @@
|
|||||||
|
.tab-icon-image[crashed] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
@ -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";
|
||||||
|
}
|
@ -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";
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
@ -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";
|
||||||
|
}
|
@ -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";
|
||||||
|
}
|
@ -0,0 +1,3 @@
|
|||||||
|
#tabbrowser-tabs .tabbrowser-tab[pending] .tab-content {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
@ -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";
|
||||||
|
}
|
@ -0,0 +1,3 @@
|
|||||||
|
.tab-icon-image:not([src], [pinned], [crashed], [busy]) {
|
||||||
|
display: -moz-inline-box !important;
|
||||||
|
}
|
@ -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 */
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
@ -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) */
|
||||||
|
}
|
@ -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);
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
@ -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 */
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
@ -0,0 +1,3 @@
|
|||||||
|
.tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
@ -0,0 +1,3 @@
|
|||||||
|
.tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]){
|
||||||
|
display: -moz-box !important;
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
@ -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) */
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -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";
|
|
||||||
}
|
}
|
||||||
|
@ -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";
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -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 */
|
||||||
|
}
|
@ -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";
|
||||||
|
}
|
@ -0,0 +1,3 @@
|
|||||||
|
* {
|
||||||
|
font-family: -moz-fixed;
|
||||||
|
}
|
@ -1,3 +1,4 @@
|
|||||||
#pageActionButton {
|
#urlbar:not([breakout-extend="true"]) #pageActionButton {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
|
visibility: visible !important;
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -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 --------------------------------------------------------------
|
||||||
|
Loading…
Reference in New Issue
Block a user