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
|
||||
W: https://github.com/MarNicGit
|
||||
|
||||
N: Oondanomala
|
||||
W: https://github.com/Oondanomala
|
||||
|
||||
N: ph3b3
|
||||
E: phoebeleong8@gmail.com
|
||||
W: https://phoebe-leong.github.io/
|
||||
@ -102,6 +105,9 @@ N: Tatsuyuki Ishi
|
||||
E: ishitatsuyuki@gmail.com
|
||||
W: https://github.com/ishitatsuyuki
|
||||
|
||||
N: thunderstone135
|
||||
W: https://github.com/thunderstone135
|
||||
|
||||
----------
|
||||
Reference Projects & Resources
|
||||
|
||||
@ -170,6 +176,11 @@ W: https://github.com/coekuss/quietfox
|
||||
C: Copyright (c) 2019 coekuss
|
||||
L: MIT
|
||||
|
||||
N: RainFox
|
||||
W: https://github.com/1280px/rainfox
|
||||
C: Copyright (c) 2020 1280px
|
||||
L: MIT
|
||||
|
||||
N: ShadowFox
|
||||
W: https://github.com/overdodactyl/ShadowFox
|
||||
C: Copyright (c) 2017 overdodactyl
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
[Info]
|
||||
Ver=v5.3.0
|
||||
Ver=v6.0.0
|
||||
Branch=photon-style
|
||||
|
||||
@ -68,6 +68,10 @@ Some settings [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options#using-u
|
||||
- Menu
|
||||
- Density
|
||||
- Others...
|
||||
- *Tabbar Layouts*
|
||||
- Tabs on Bottom
|
||||
- One Liner
|
||||
- Vertical Tab Support
|
||||
- *Tab Design*
|
||||
- General:
|
||||
- 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
|
||||
- *Others*
|
||||
- Animations
|
||||
- Hidden & Auto Hide
|
||||
- Activate calculator at address bar
|
||||
- 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 *******************************************************/
|
||||
@supports -moz-bool-pref("userChrome.icon.menu") {
|
||||
@-moz-document url("chrome://browser/content/places/places.xhtml"),
|
||||
@ -3396,6 +3407,9 @@
|
||||
text-decoration: line-through;
|
||||
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 {
|
||||
filter: grayscale(100%) !important;
|
||||
}
|
||||
|
||||
@ -390,6 +390,7 @@ $firefoxProfileDirPaths = @(
|
||||
"${HOME}\AppData\Roaming\Mozilla\Firefox",
|
||||
"${HOME}\AppData\Roaming\Waterfox",
|
||||
"${HOME}\AppData\Roaming\librewolf",
|
||||
"${HOME}\AppData\Roaming\Ghostery 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 */
|
||||
--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 ********************************************/
|
||||
@include Option("userChrome.icon.context_menu") {
|
||||
@import "../icons/layout_activity_stream";
|
||||
@import "../icons/layout/activity_stream";
|
||||
@import "../icons/activity_stream";
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@-moz-document url("chrome://browser/content/places/places.xhtml"),
|
||||
url("about:downloads") {
|
||||
@import "../icons/layout_menu_contents";
|
||||
@import "../icons/layout/menu_contents";
|
||||
|
||||
/*= 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 */
|
||||
transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out,
|
||||
visibility 0s linear !important;
|
||||
will-change: margin-inline-start, opacity, visibility;
|
||||
|
||||
&[hidden="true"] {
|
||||
display: -moz-box !important;
|
||||
|
||||
@ -11,6 +11,9 @@
|
||||
.downloadTarget {
|
||||
text-decoration: line-through;
|
||||
text-decoration-color: color-mix(in srgb, currentColor 65%, transparent);
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.downloadTypeIcon {
|
||||
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 {
|
||||
list-style-image: url("chrome://browser/skin/window.svg");
|
||||
}
|
||||
#appMenuRestoreSession {
|
||||
#appMenuRestoreSession, /* Legacy - v103 */
|
||||
#appMenu-restoreSession {
|
||||
list-style-image: url("../icons/restore-session.svg");
|
||||
}
|
||||
#appMenuClearRecentHistory {
|
||||
|
||||
@ -204,3 +204,6 @@ menuitem.searchbar-clear-history {
|
||||
--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 ===========================================================*/
|
||||
#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");
|
||||
}
|
||||
#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_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");
|
||||
}
|
||||
#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");
|
||||
}
|
||||
#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");
|
||||
}
|
||||
#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");
|
||||
}
|
||||
#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");
|
||||
}
|
||||
#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");
|
||||
}
|
||||
#tabcenter-reborn_ariasuni-menuitem-_contextMenuUnloadTab {
|
||||
}
|
||||
|
||||
#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");
|
||||
}
|
||||
#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");
|
||||
}
|
||||
#context_sendTabToDevice {
|
||||
#context_sendTabToDevice,
|
||||
#treestyletab_piro_sakura_ne_jp-menuitem-_context_sendTabsToDevice {
|
||||
--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"]) + menuitem.share-tab-url-item {
|
||||
@ -50,22 +93,52 @@
|
||||
--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");
|
||||
}
|
||||
#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");
|
||||
}
|
||||
|
||||
#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");
|
||||
}
|
||||
#tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTabs,
|
||||
#sidebartabs_asamuzak_jp-menuitem-_closeMultipleTabs {
|
||||
}
|
||||
#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");
|
||||
}
|
||||
|
||||
#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 > 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/accent_color" as *;
|
||||
@use "utils/native_menu" as *;
|
||||
@use "utils/one_liner" as *;
|
||||
@use "utils/proton_elements" as Proton;
|
||||
@use "sass:selector";
|
||||
|
||||
@ -18,37 +19,8 @@
|
||||
/** Compatibility Fixes *******************************************************/
|
||||
@import "compatibility/index";
|
||||
|
||||
/** System Default Theme ******************************************************/
|
||||
@include Option("userChrome.theme.system_default") {
|
||||
@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";
|
||||
}
|
||||
/** Theme *********************************************************************/
|
||||
@import "theme/index";
|
||||
|
||||
/** Decoration ****************************************************************/
|
||||
@import "decoration/index";
|
||||
@ -62,54 +34,38 @@
|
||||
/** Tab Bar UI ****************************************************************/
|
||||
@import "tabbar/index";
|
||||
|
||||
/** Tab UI ****************************************************************/
|
||||
@import "tab/index";
|
||||
|
||||
/** Url View UI ***************************************************************/
|
||||
@import "urlview/index";
|
||||
|
||||
/** Panel UI ******************************************************************/
|
||||
@import "panel/index";
|
||||
|
||||
/** Sidebar UI ****************************************************************/
|
||||
@import "sidebar/index";
|
||||
|
||||
/** Fullscreen - Overlap toolbar **********************************************/
|
||||
@import "fullscreen/index";
|
||||
|
||||
/** Library - Icons Replace ***************************************************/
|
||||
@include Option("userChrome.icon.library") {
|
||||
@import "library/chrome";
|
||||
}
|
||||
/** Centered ******************************************************************/
|
||||
@import "centered/index";
|
||||
|
||||
/** Panel - Icons *************************************************************/
|
||||
@include Option("userChrome.icon.panel") {
|
||||
@import "icons/layout_panel";
|
||||
@import "icons/panel";
|
||||
}
|
||||
/** Auto Hide *****************************************************************/
|
||||
@import "autohide/index";
|
||||
|
||||
/** Menu - Icons Layout *******************************************************/
|
||||
@include Option("userChrome.icon.menu") {
|
||||
@import "icons/layout_menu";
|
||||
@import "icons/layout_bookmark_menu";
|
||||
/** Hidden ********************************************************************/
|
||||
@import "hidden/index";
|
||||
|
||||
@include Option("userChrome.icon.context_menu") {
|
||||
@import "icons/context_menu";
|
||||
}
|
||||
@include Option("userChrome.icon.global_menubar") {
|
||||
@import "icons/global_menubar";
|
||||
}
|
||||
@include Option("userChrome.icon.global_menu") {
|
||||
@import "icons/global_menu";
|
||||
}
|
||||
}
|
||||
/** Icons *********************************************************************/
|
||||
@import "icons/index";
|
||||
|
||||
/** Libray Menu ***************************************************************/
|
||||
@include Option("userChrome.icon.library") {
|
||||
@include Option("userChrome.icon.menu") {
|
||||
@import "icons/library";
|
||||
}
|
||||
}
|
||||
|
||||
/*= Waterfox =================================================================*/
|
||||
/** Waterfox ******************************************************************/
|
||||
@import "icons/waterfox";
|
||||
@include Option("userChrome.theme.fully_color") {
|
||||
@import "theme/waterfox";
|
||||
}
|
||||
|
||||
/*= Tor Browser ==============================================================*/
|
||||
/** Tor Browser ***************************************************************/
|
||||
@import "icons/tor_browser";
|
||||
|
||||
@ -34,6 +34,11 @@
|
||||
@import "contents/proton_contents";
|
||||
}
|
||||
|
||||
/** Monospace *****************************************************************/
|
||||
@include Option("userContent.page.monospace") {
|
||||
@import "contents/monospace";
|
||||
}
|
||||
|
||||
/** Menu - Icons Layout *******************************************************/
|
||||
@include Option("userChrome.icon.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 ===================================================*/
|
||||
@include Option("userChrome.padding.navbar_width") {
|
||||
@import "nav_bar";
|
||||
@import "navbar";
|
||||
}
|
||||
|
||||
/*= URL Bar - Reduce Padding =================================================*/
|
||||
@include Option("userChrome.padding.urlbar") {
|
||||
@import "url_bar";
|
||||
@import "urlbar";
|
||||
}
|
||||
@include Option("userChrome.padding.urlView_expanding") {
|
||||
@import "urlview_expanding";
|
||||
@ -42,12 +42,17 @@
|
||||
|
||||
/*= BookMark Bar - Reduce Height =============================================*/
|
||||
@include Option("userChrome.padding.bookmarkbar") {
|
||||
@import "bookmark_bar";
|
||||
@import "bookmarkbar";
|
||||
}
|
||||
|
||||
/*= 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") {
|
||||
@import "info_bar";
|
||||
@import "infobar";
|
||||
}
|
||||
|
||||
/*= 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 */
|
||||
@include Option("userChrome.tab.lepton_like_padding") {
|
||||
:root:not([uidensity]) #TabsToolbar {
|
||||
--tab-min-height: 36px;
|
||||
:root {
|
||||
&:not([uidensity]) {
|
||||
--tab-min-height: 36px !important;
|
||||
}
|
||||
:root[uidensity="compact"] #TabsToolbar {
|
||||
--tab-min-height: 32px;
|
||||
&[uidensity="compact"] {
|
||||
--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") {
|
||||
:root:not([uidensity]) #TabsToolbar {
|
||||
--tab-min-height: 32px;
|
||||
:root {
|
||||
&:not([uidensity]) {
|
||||
--tab-min-height: 32px !important;
|
||||
}
|
||||
:root[uidensity="compact"] #TabsToolbar {
|
||||
--tab-min-height: 29px;
|
||||
&[uidensity="compact"] {
|
||||
--tab-min-height: 29px !important;
|
||||
}
|
||||
&[uidensity="touch"] {
|
||||
--tab-min-height: 41px !important;
|
||||
}
|
||||
:root[uidensity="touch"] #TabsToolbar {
|
||||
--tab-min-height: 41px;
|
||||
}
|
||||
|
||||
/* Top Margin */
|
||||
@ -29,11 +33,13 @@
|
||||
}
|
||||
@include NotOption("userChrome.tab.lepton_like_padding") {
|
||||
@include NotOption("userChrome.tab.photon_like_padding") {
|
||||
:root:not([uidensity]) #TabsToolbar {
|
||||
--tab-min-height: 36px; /* 38px -> 36px */
|
||||
:root {
|
||||
&: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 */
|
||||
:root {
|
||||
--uc-title-pre-spacer: 30px; /* Original: 40px */
|
||||
--uc-title-post-spacer: 25px; /* Original: 40px */
|
||||
}
|
||||
.titlebar-spacer[type="pre-tabs"] {
|
||||
width: 30px !important; /* Original: 40px */
|
||||
width: var(--uc-title-pre-spacer) !important;
|
||||
}
|
||||
.titlebar-spacer[type="post-tabs"] {
|
||||
width: 25px !important; /* Original: 40px */
|
||||
width: var(--uc-title-post-spacer) !important;
|
||||
}
|
||||
|
||||
/* Tabbar Buttons */
|
||||
@ -55,15 +59,16 @@
|
||||
}
|
||||
|
||||
/* Tab - Max Size */
|
||||
@include NotOption("userChrome.tab.photon_like_padding") {
|
||||
:root {
|
||||
:root {
|
||||
@include NotOption("userChrome.tab.photon_like_padding") {
|
||||
--tab-max-width: 240px;
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.tab.photon_like_padding") {
|
||||
:root {
|
||||
@include Option("userChrome.tab.photon_like_padding") {
|
||||
--tab-max-width: 225px;
|
||||
}
|
||||
@include OneLiner {
|
||||
--tab-max-width: 180px;
|
||||
}
|
||||
}
|
||||
.tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
|
||||
max-width: var(--tab-max-width) !important; /* Original: 225px */
|
||||
@ -77,7 +82,7 @@
|
||||
}
|
||||
}
|
||||
.tabbrowser-tab:not([last-visible-tab]) {
|
||||
margin-inline-end: -0.5px !important;
|
||||
margin-inline-end: -1px !important;
|
||||
}
|
||||
}
|
||||
@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") {
|
||||
xul|menupopup {
|
||||
--panel-border-radius: 0px !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 ===========================================================*/
|
||||
@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 */
|
||||
:root[sizemode="fullscreen"] #navigator-toolbox {
|
||||
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") {
|
||||
@import "tabs_on_bottom";
|
||||
@include Option("userChrome.tabbar.on_bottom") {
|
||||
@include OneLinerOnBottom {
|
||||
@import "on_bottom";
|
||||
}
|
||||
}
|
||||
|
||||
/*= Tab Bar - Connect to window ==============================================*/
|
||||
@include Option("userChrome.tab.connect_to_window") {
|
||||
@import "connect_to_window";
|
||||
/*= Tab Bar - Oneliner =======================================================*/
|
||||
@include OneLiner {
|
||||
@import "one_liner";
|
||||
}
|
||||
|
||||
/*= 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";
|
||||
/*= Tab Bar - Shared Layout ==================================================*/
|
||||
@include Option("userChrome.tabbar.on_bottom", "userChrome.tabbar.one_liner", "userChrome.hidden.tabbar", "userChrome.tabbar.as_titlebar") {
|
||||
@import "layout/window_control_size";
|
||||
}
|
||||
@include Option("userChrome.tabbar.on_bottom", "userChrome.tabbar.one_liner", "userChrome.hidden.tabbar") {
|
||||
@import "layout";
|
||||
}
|
||||
|
||||
/*= 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") {
|
||||
@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";
|
||||
/*= Tab Bar - Show only current tab ==========================================*/
|
||||
@include Option("userChrome.tabbar.as_titlebar") {
|
||||
@import "as_titlebar";
|
||||
}
|
||||
|
||||
@ -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;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.urlbarView-type-icon {
|
||||
min-width: 16px !important;
|
||||
height: 16px !important;
|
||||
margin-bottom: 0 !important;
|
||||
margin-block: 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 ====================================================
|
||||
// -- 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_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_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.always_show_page_actions", true);
|
||||
|
||||
// user_pref("userChrome.tab.on_bottom", true);
|
||||
// user_pref("userChrome.tab.on_bottom.above_bookmark", true); // Need on_bottom
|
||||
// user_pref("userChrome.tab.on_bottom.menubar_on_top", true); // Need on_bottom
|
||||
// user_pref("userChrome.tabbar.as_titlebar", true);
|
||||
// user_pref("userChrome.tabbar.on_bottom", true);
|
||||
// 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.close_button_at_pinned", 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_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.centered_label", true);
|
||||
|
||||
// user_pref("userChrome.panel.remove_strip", true);
|
||||
// user_pref("userChrome.panel.full_width_separator", 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_label_to_right", 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.system_accent", true);
|
||||
// user_pref("userContent.page.monospace", true);
|
||||
|
||||
// == Theme Default Settings ===================================================
|
||||
// -- User Chrome --------------------------------------------------------------
|
||||
|
||||
Loading…
Reference in New Issue
Block a user