mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2026-02-19 06:31:53 -08:00
MS_Y
GitHub
commit
1a4206f422
98 changed files with 4722 additions and 918 deletions
5
CREDITS
5
CREDITS
|
|
@ -176,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
|
||||
|
|
|
|||
|
|
@ -66,6 +66,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)
|
||||
|
|
@ -104,6 +108,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
|
||||
|
||||
|
|
|
|||
118
__tests__/one_liner.test.scss
Normal file
118
__tests__/one_liner.test.scss
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
@use 'true' as *;
|
||||
@use "example" as *;
|
||||
@use "../src/utils/one_liner";
|
||||
|
||||
@include test-module("One Liner [mix]") {
|
||||
@include test("content") {
|
||||
@include assert {
|
||||
@include output {
|
||||
@include one_liner.OneLinerContent {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
@include expect {
|
||||
@supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
|
||||
@include example;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
|
||||
@media screen and (min-width: 1100px) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include test("explicitly") {
|
||||
@include assert {
|
||||
@include output {
|
||||
@include one_liner.OneLiner {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
@include expect {
|
||||
@supports -moz-bool-pref("userChrome.tabbar.one_liner") {
|
||||
@supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
|
||||
@include example;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
|
||||
@media screen and (min-width: 1100px) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include test-module("One Liner for Responsive [mix]") {
|
||||
@include test("Tabs on bottom") {
|
||||
@include assert {
|
||||
@include output {
|
||||
@include one_liner.OneLinerOnBottom {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
@include expect {
|
||||
@supports not -moz-bool-pref("userChrome.tabbar.one_liner") {
|
||||
@include example;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tabbar.one_liner") {
|
||||
@supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
|
||||
@media screen and (max-width: 1100px) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include test("Tab bar") {
|
||||
@include assert {
|
||||
@include output {
|
||||
@include one_liner.OneLinerTabbar {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
@include expect {
|
||||
@supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
|
||||
@include example;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
|
||||
@media screen and (min-width: 1100px) {
|
||||
@include example;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.autohide.tabbar") {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include test("Nav Bar") {
|
||||
@include assert {
|
||||
@include output {
|
||||
@include one_liner.OneLinerNavbar {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
@include expect {
|
||||
@supports -moz-bool-pref("userChrome.autohide.navbar") {
|
||||
@supports not -moz-bool-pref("userChrome.tabbar.one_liner") {
|
||||
@include example;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tabbar.one_liner") {
|
||||
@supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
|
||||
@media screen and (max-width: 1100px) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
3160
css/leptonChrome.css
3160
css/leptonChrome.css
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"),
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -338,6 +338,7 @@ firefoxProfileDirPaths=(
|
|||
"${HOME}/.mozilla/firefox"
|
||||
"${HOME}/.waterfox"
|
||||
"${HOME}/.librewolf"
|
||||
"${HOME}/.ghostery browser"
|
||||
"${HOME}/.pulse-browser"
|
||||
"${HOME}/.firedragon"
|
||||
"${HOME}/.local/opt/tor-browser/app/Browser/TorBrowser/Data/Browser"
|
||||
|
|
@ -346,6 +347,7 @@ firefoxProfileDirPaths=(
|
|||
"${HOME}/Library/Application Support/Firefox"
|
||||
"${HOME}/Library/Application Support/Waterfox"
|
||||
"${HOME}/Library/Application Support/libreWolf"
|
||||
"${HOME}/Library/Application Support/Ghostery Browser"
|
||||
"${HOME}/Library/Application Support/pulse-browser"
|
||||
"${HOME}/Library/Application Support/TorBrowser/Browser"
|
||||
)
|
||||
|
|
|
|||
16
src/autohide/_back_button.scss
Normal file
16
src/autohide/_back_button.scss
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
#back-button[disabled="true"] {
|
||||
margin-left: -36px !important;
|
||||
opacity: 0 !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@include Animate {
|
||||
#back-button {
|
||||
transition-property: background-color, opacity, margin-left !important;
|
||||
}
|
||||
#back-button[disabled="true"] {
|
||||
transition: background-color 1s var(--animation-easing-function),
|
||||
opacity 1s var(--animation-easing-function),
|
||||
margin-left 0.5s ease !important;
|
||||
}
|
||||
}
|
||||
30
src/autohide/_bookmarkbar.scss
Normal file
30
src/autohide/_bookmarkbar.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
// Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/autohide_bookmarks_toolbar.css
|
||||
#PersonalToolbar:not([customizing]) {
|
||||
margin-bottom: var(--uc-bm-hide-height);
|
||||
opacity: 0;
|
||||
will-change: margin-bottom, opacity;
|
||||
|
||||
@include Option("userChrome.autohide.toolbar_overlap") {
|
||||
&[collapsed="true"] {
|
||||
visibility: visible !important;
|
||||
max-height: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) {
|
||||
margin-bottom: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@include Animate {
|
||||
#PersonalToolbar:not([customizing]) {
|
||||
// --ext-theme-background-transition: background-color 0.1s cubic-bezier(.17,.67,.83,.67);
|
||||
transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
|
||||
opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
|
||||
min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition) !important;
|
||||
}
|
||||
#navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) {
|
||||
transition-delay: 0s !important;
|
||||
}
|
||||
}
|
||||
50
src/autohide/_common.scss
Normal file
50
src/autohide/_common.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.tabbar.one_liner") {
|
||||
:root {
|
||||
--uc-tabbar-height: var(--tab-min-height); // calc((var(--tab-block-margin) * 2) + var(--tab-min-height));
|
||||
--uc-tabbar-hide-height: calc(-1 * var(--uc-tabbar-height));
|
||||
--uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)));
|
||||
--uc-navbar-hide-height: calc(-1 * var(--uc-navbar-height));
|
||||
--uc-bm-height: calc(20px + (2 * var(--bookmark-block-padding, 4px))); /* 20px = 16px + (2px * 2) [margin block] */
|
||||
--uc-bm-hide-height: calc(-1 * var(--uc-bm-height));
|
||||
|
||||
@include Option("userChrome.hidden.tabbar") {
|
||||
@include OneLinerNavbarContent() {
|
||||
--uc-tabbar-height: 0px;
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.hidden.navbar") {
|
||||
--uc-navbar-height: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.autohide.infobar") {
|
||||
:root {
|
||||
--uc-autohide-toolbar-delay: 600ms;
|
||||
}
|
||||
|
||||
#navigator-toolbox {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
#navigator-toolbox:not(:hover) {
|
||||
animation: 1s keepfront;
|
||||
}
|
||||
@keyframes keepfront {
|
||||
from {
|
||||
z-index: 3;
|
||||
}
|
||||
to {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar-box:is(:hover, :focus-within) {
|
||||
position: relative;
|
||||
z-index: 2 !important;
|
||||
}
|
||||
|
||||
@include Option("userChrome.autohide.toolbar_overlap") {
|
||||
@import "toolbar_overlap";
|
||||
}
|
||||
}
|
||||
31
src/autohide/_fill_urlbar.scss
Normal file
31
src/autohide/_fill_urlbar.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
#nav-bar:not(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container {
|
||||
-moz-box-ordinal-group: 0;
|
||||
min-width: calc(var(--uc-navbar-width, 100vw) - ((2 * var(--urlbar-margin-inline)) + var(--uc-window-drag-space-pre, 0px) + var(--uc-navbar-gap, 0px))) !important;
|
||||
}
|
||||
|
||||
@include Option("userChrome.tabbar.one_liner") {
|
||||
#nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) {
|
||||
--uc-tabbar-width: calc(100vw - var(--uc-navbar-width-origin));
|
||||
}
|
||||
}
|
||||
|
||||
@include Animate {
|
||||
@include OneLiner {
|
||||
#nav-bar {
|
||||
transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
|
||||
var(--ext-theme-background-transition) !important;
|
||||
}
|
||||
#nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) {
|
||||
transition-delay: 0s !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include OneLinerNavbarContent {
|
||||
#urlbar-container {
|
||||
transition: min-width 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
|
||||
}
|
||||
#nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container {
|
||||
transition-delay: 0s !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
16
src/autohide/_forward_button.scss
Normal file
16
src/autohide/_forward_button.scss
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
#forward-button[disabled="true"] {
|
||||
margin-left: -36px !important;
|
||||
opacity: 0 !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@include Animate {
|
||||
#forward-button {
|
||||
transition-property: background-color, opacity, margin-left !important;
|
||||
}
|
||||
#forward-button[disabled="true"] {
|
||||
transition: background-color 1s var(--animation-easing-function),
|
||||
opacity 1s var(--animation-easing-function),
|
||||
margin-left 0.5s ease !important;
|
||||
}
|
||||
}
|
||||
35
src/autohide/_index.scss
Normal file
35
src/autohide/_index.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
@include Option("userChrome.autohide.back_button") {
|
||||
@import "back_button";
|
||||
}
|
||||
@include Option("userChrome.autohide.forward_button") {
|
||||
@import "forward_button";
|
||||
}
|
||||
@include Option("userChrome.autohide.page_action") {
|
||||
@import "page_action";
|
||||
}
|
||||
|
||||
@include Option("userChrome.autohide.tab") {
|
||||
@import "tab";
|
||||
}
|
||||
|
||||
@import "common";
|
||||
@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar") {
|
||||
@include Option("userChrome.autohide.tabbar", "userChrome.tabbar.one_liner") {
|
||||
@import "tabbar";
|
||||
}
|
||||
@include Option("userChrome.autohide.navbar", "userChrome.tabbar.one_liner") {
|
||||
@import "navbar";
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.autohide.bookmarkbar") {
|
||||
@import "bookmarkbar";
|
||||
}
|
||||
@include Option("userChrome.autohide.infobar") {
|
||||
@import "infobar";
|
||||
}
|
||||
|
||||
@import "sidebar";
|
||||
|
||||
@include Option("userChrome.autohide.fill_urlbar") {
|
||||
@import "fill_urlbar";
|
||||
}
|
||||
32
src/autohide/_infobar.scss
Normal file
32
src/autohide/_infobar.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
#tab-notification-deck:not([customizing]) > .notificationbox-stack {
|
||||
$infobarFixedHeight: 13px + ((1px + 5px) * 2); // button height + (button border + [button.small-button padding]) * 2
|
||||
// fiexedHeight + (button margin * 2) + messagebar margin
|
||||
--infobar-height: calc(#{ $infobarFixedHeight } + (var(--infobar-button-vertical-margin, 4px) * 2) + var(--infobar-message-vertical-margin, 8px));
|
||||
}
|
||||
#tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message {
|
||||
--infobar-message-margin: 0 4px calc(-1 * var(--infobar-height));
|
||||
opacity: 0;
|
||||
will-change: margin-bottom, opacity;
|
||||
}
|
||||
|
||||
#navigator-toolbox:is(:hover, :focus-within) #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message {
|
||||
--infobar-message-margin: 0 4px var(--infobar-message-vertical-margin, 8px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@include Option("userChrome.autohide.toolbar_overlap") {
|
||||
#tab-notification-deck:not([customizing]) {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include Animate {
|
||||
#tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message {
|
||||
transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
|
||||
opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
|
||||
var(--ext-theme-background-transition) !important;
|
||||
}
|
||||
#navigator-toolbox:is(:hover, :focus-within) #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message {
|
||||
transition-delay: 0s !important;
|
||||
}
|
||||
}
|
||||
29
src/autohide/_navbar.scss
Normal file
29
src/autohide/_navbar.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
@include OneLinerNavbar {
|
||||
#nav-bar:not([customizing]) {
|
||||
margin-bottom: var(--uc-navbar-hide-height);
|
||||
opacity: 0;
|
||||
will-change: margin-bottom, opacity;
|
||||
}
|
||||
#navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) {
|
||||
margin-bottom: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@include Animate {
|
||||
#nav-bar:not([customizing]) {
|
||||
transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
|
||||
opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
|
||||
var(--ext-theme-background-transition) !important;
|
||||
|
||||
@include Option("userChrome.autohide.fill_urlbar") {
|
||||
transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
|
||||
margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
|
||||
opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
|
||||
var(--ext-theme-background-transition) !important;
|
||||
}
|
||||
}
|
||||
#navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) {
|
||||
transition-delay: 0s !important;
|
||||
}
|
||||
}
|
||||
29
src/autohide/_page_action.scss
Normal file
29
src/autohide/_page_action.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
#page-action-buttons > .urlbar-page-action {
|
||||
margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding) );
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#urlbar-container:is(:hover, :focus-within) #page-action-buttons > .urlbar-page-action,
|
||||
.urlbar-page-action[open],
|
||||
.urlbar-page-action[open] ~ .urlbar-page-action {
|
||||
margin-inline-end: 0px !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@include Animate {
|
||||
#page-action-buttons > .urlbar-page-action {
|
||||
transition: margin-inline-end 50ms var(--animation-easing-function) 900ms,
|
||||
opacity 1.5s var(--animation-easing-function) 600ms !important;
|
||||
|
||||
@include Option("userChrome.decoration.animate") {
|
||||
transition: margin-inline-end 50ms var(--animation-easing-function) 900ms,
|
||||
opacity 1.5s var(--animation-easing-function) 600ms,
|
||||
background-color 2.5s var(--animation-easing-function) !important;
|
||||
}
|
||||
}
|
||||
#urlbar-container:is(:hover, :focus-within) #page-action-buttons > .urlbar-page-action,
|
||||
.urlbar-page-action[open],
|
||||
.urlbar-page-action[open] ~ .urlbar-page-action{
|
||||
transition-delay: 0s !important;
|
||||
}
|
||||
}
|
||||
20
src/autohide/_sidebar.scss
Normal file
20
src/autohide/_sidebar.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
// Refer variable `src/sidebar/overlap`
|
||||
|
||||
@include Option("userChrome.autohide.sidebar") {
|
||||
#sidebar-box {
|
||||
min-width: var(--uc-sidebar-width) !important;
|
||||
max-width: var(--uc-sidebar-width) !important;
|
||||
}
|
||||
|
||||
:root[inFullscreen="true"] #sidebar-box {
|
||||
min-width: var(--uc-sidebar-activate-width) !important;
|
||||
max-width: var(--uc-sidebar-activate-width) !important;
|
||||
}
|
||||
|
||||
@include Option("userChrome.sidebar.overlap") {
|
||||
@import "sidebar/overlap";
|
||||
}
|
||||
@include NotOption("userChrome.sidebar.overlap") {
|
||||
@import "sidebar/static";
|
||||
}
|
||||
}
|
||||
34
src/autohide/_tab.scss
Normal file
34
src/autohide/_tab.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
.tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) {
|
||||
@include NotOption("userChrome.autohide.tab.opacity") {
|
||||
@include NotOption("userChrome.autohide.tab.blur") {
|
||||
margin-bottom: -64px;
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.autohide.tab.opacity") {
|
||||
opacity: 0%;
|
||||
}
|
||||
@include Option("userChrome.autohide.tab.blur") {
|
||||
filter: blur(8px);
|
||||
}
|
||||
|
||||
@include Animate {
|
||||
transition-timing-function: var(--animation-easing-function);
|
||||
transition-duration: 0.2s;
|
||||
transition-delay: 600ms;
|
||||
&:is(:hover, :focus-within) {
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
@include NotOption("userChrome.autohide.tab.opacity") {
|
||||
@include NotOption("userChrome.autohide.tab.blur") {
|
||||
transition-property: margin-bottom;
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.autohide.tab.opacity") {
|
||||
transition-property: opacity;
|
||||
}
|
||||
@include Option("userChrome.autohide.tab.blur") {
|
||||
transition-property: filter;
|
||||
}
|
||||
}
|
||||
}
|
||||
64
src/autohide/_tabbar.scss
Normal file
64
src/autohide/_tabbar.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
//-- Mixin ---------------------------------------------------------------------
|
||||
@mixin _autohide_tabbar() {
|
||||
@include NotOption("userChrome.tabbar.on_bottom") {
|
||||
@content;
|
||||
}
|
||||
@include Option("userChrome.tabbar.on_bottom") {
|
||||
> *:not(.titlebar-buttonbox-container) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
@include OneLinerTabbar {
|
||||
:root:not([customizing]) #titlebar {
|
||||
margin-bottom: var(--uc-tabbar-hide-height);
|
||||
will-change: margin-bottom;
|
||||
}
|
||||
#TabsToolbar:not([customizing]) {
|
||||
@include _autohide_tabbar {
|
||||
opacity: 0;
|
||||
will-change: opacity;
|
||||
}
|
||||
}
|
||||
|
||||
#navigator-toolbox:is(:hover, :focus-within) {
|
||||
> #titlebar {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
#TabsToolbar {
|
||||
@include _autohide_tabbar {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include Animate {
|
||||
#titlebar:not([customizing]) {
|
||||
transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
|
||||
background-color 1s var(--animation-easing-function) !important;
|
||||
}
|
||||
|
||||
#TabsToolbar:not([customizing]) {
|
||||
@include _autohide_tabbar {
|
||||
transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#navigator-toolbox:is(:hover, :focus-within) {
|
||||
transition-delay: 0s !important;
|
||||
|
||||
> #titlebar:not([customizing]) {
|
||||
transition-delay: 0s !important;
|
||||
}
|
||||
|
||||
#TabsToolbar:not([customizing]) {
|
||||
@include _autohide_tabbar {
|
||||
transition-delay: 0s !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
68
src/autohide/_toolbar_overlap.scss
Normal file
68
src/autohide/_toolbar_overlap.scss
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
#navigator-toolbox {
|
||||
--uc-toolbar-hide-height: calc(-1 * var(--uc-toolbar-height, 0));
|
||||
margin-bottom: var(--uc-toolbar-hide-height) !important;
|
||||
|
||||
@include Animate {
|
||||
@include Option("userChrome.decoration.animate") {
|
||||
transition: margin-top 1s ease,
|
||||
margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
|
||||
|
||||
&:is(:hover, :focus-within) {
|
||||
transition-delay: 0s !important;
|
||||
}
|
||||
|
||||
&[inFullscreen="true"] {
|
||||
transition: margin-top 1.3s var(--animation-easing-function) 50ms,
|
||||
margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
|
||||
}
|
||||
}
|
||||
@include NotOption("userChrome.decoration.animate") {
|
||||
transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
|
||||
|
||||
&:is(:hover, :focus-within) {
|
||||
transition-delay: 0s !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:is(:hover, :focus-within) {
|
||||
@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar") {
|
||||
@include Option("userChrome.autohide.tabbar", "userChrome.tabbar.one_liner") {
|
||||
--uc-toolbar-height: var(--uc-tabbar-height);
|
||||
|
||||
@include NotOption("userChrome.autohide.navbar") {
|
||||
@include Option("userChrome.autohide.bookmarkbar") {
|
||||
--uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-bm-height));
|
||||
}
|
||||
}
|
||||
|
||||
@include OneLinerNavbar {
|
||||
@include NotOption("userChrome.autohide.bookmarkbar") {
|
||||
--uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height));
|
||||
}
|
||||
@include Option("userChrome.autohide.bookmarkbar") {
|
||||
--uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height) + var(--uc-bm-height));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include NotOption("userChrome.autohide.tabbar") {
|
||||
@include NotOption("userChrome.autohide.navbar") {
|
||||
@include Option("userChrome.autohide.bookmarkbar") {
|
||||
--uc-toolbar-height: var(--uc-bm-height);
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.autohide.navbar", "userChrome.tabbar.one_liner") {
|
||||
@include OneLinerNavbar {
|
||||
@include NotOption("userChrome.autohide.bookmarkbar") {
|
||||
--uc-toolbar-height: var(--uc-navbar-height);
|
||||
}
|
||||
@include Option("userChrome.autohide.bookmarkbar") {
|
||||
--uc-toolbar-height: calc(var(--uc-navbar-height) + var(--uc-bm-height));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
47
src/autohide/sidebar/_overlap.scss
Normal file
47
src/autohide/sidebar/_overlap.scss
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
#sidebar {
|
||||
min-width: var(--uc-sidebar-width) !important;
|
||||
max-width: var(--uc-sidebar-width) !important;
|
||||
|
||||
will-change: min-width, max-width;
|
||||
}
|
||||
|
||||
#sidebar-box:is(:hover, :focus-within) > #sidebar {
|
||||
min-width: var(--uc-sidebar-activate-width) !important;
|
||||
max-width: var(--uc-sidebar-activate-width) !important;
|
||||
}
|
||||
|
||||
:root[inFullscreen="true"] #sidebar-box {
|
||||
margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important;
|
||||
padding-inline-start: var(--uc-sidebar-fullscreen-width);
|
||||
will-change: padding-inline-start;
|
||||
|
||||
&:is(:hover, :focus-within) {
|
||||
padding-inline-start: var(--uc-sidebar-activate-width);
|
||||
}
|
||||
|
||||
#sidebar-header,
|
||||
#sidebar {
|
||||
min-width: calc(var(--uc-sidebar-activate-width)) !important;
|
||||
max-width: calc(var(--uc-sidebar-activate-width)) !important;
|
||||
|
||||
will-change: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@include Animate {
|
||||
#sidebar {
|
||||
transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
|
||||
}
|
||||
|
||||
#sidebar-box:is(:hover, :focus-within) > #sidebar {
|
||||
transition-delay: 0ms !important;
|
||||
}
|
||||
|
||||
:root[inFullscreen="true"] #sidebar-box {
|
||||
transition: padding-inline-start 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
|
||||
|
||||
&:is(:hover, :focus-within) {
|
||||
transition-delay: 0ms !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
52
src/autohide/sidebar/_static.scss
Normal file
52
src/autohide/sidebar/_static.scss
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
#sidebar-box {
|
||||
--uc-sidebar-fullscreen-margin: calc(var(--uc-sidebar-fullscreen-width) + var(--uc-sidebar-activate-width-reverse));
|
||||
overflow: hidden;
|
||||
|
||||
will-change: min-width, max-width;
|
||||
&:is(:hover, :focus-within) {
|
||||
min-width: var(--uc-sidebar-activate-width) !important;
|
||||
max-width: var(--uc-sidebar-activate-width) !important;
|
||||
}
|
||||
}
|
||||
|
||||
:root[inFullscreen="true"] #sidebar-box {
|
||||
&:not([positionend="true"]) {
|
||||
margin-inline-start: var(--uc-sidebar-fullscreen-margin) !important;
|
||||
will-change: margin-inline-start;
|
||||
|
||||
&:is(:hover, :focus-within) {
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&[positionend="true"] {
|
||||
margin-inline-end: var(--uc-sidebar-fullscreen-margin) !important;
|
||||
will-change: margin-inline-end;
|
||||
|
||||
&:is(:hover, :focus-within) {
|
||||
margin-inline-end: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include Animate {
|
||||
#sidebar-box {
|
||||
transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
|
||||
|
||||
&:is(:hover, :focus-within) {
|
||||
transition-delay: 0ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
:root[inFullscreen="true"] #sidebar-box {
|
||||
transition: margin-inline-start 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
|
||||
|
||||
&[positionend="true"] {
|
||||
transition-property: margin-inline-end !important;
|
||||
}
|
||||
&:is(:hover, :focus-within) {
|
||||
transition-delay: 0ms !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
4
src/centered/_bookmarkbar.scss
Normal file
4
src/centered/_bookmarkbar.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
#PlacesToolbarItems {
|
||||
display: flex !important;
|
||||
justify-content: safe center !important;
|
||||
}
|
||||
12
src/centered/_index.scss
Normal file
12
src/centered/_index.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
/*= Centered - Tab ===========================================================*/
|
||||
@import "tab";
|
||||
|
||||
/*= Centered - URL Bar =======================================================*/
|
||||
@include Option("userChrome.centered.urlbar") {
|
||||
@import "urlbar";
|
||||
}
|
||||
|
||||
/*= Centered - Bookmark Bar ==================================================*/
|
||||
@include Option("userChrome.centered.bookmarkbar") {
|
||||
@import "bookmarkbar";
|
||||
}
|
||||
10
src/centered/_tab.scss
Normal file
10
src/centered/_tab.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
@include Option("userChrome.centered.tab") {
|
||||
@import "tab/layout";
|
||||
|
||||
@include NotOption("userChrome.centered.tab.label") {
|
||||
@import "tab/content";
|
||||
}
|
||||
@include Option("userChrome.centered.tab.label") {
|
||||
@import "tab/label";
|
||||
}
|
||||
}
|
||||
9
src/centered/_urlbar.scss
Normal file
9
src/centered/_urlbar.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
// Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/urlbar_centered_text.css made available under Mozilla Public License v. 2.0
|
||||
// See the above repository for updates as well as full license text.
|
||||
|
||||
#urlbar:not([focused]) {
|
||||
#urlbar-input,
|
||||
.urlbar-input {
|
||||
text-align: center !important;
|
||||
}
|
||||
}
|
||||
4
src/centered/tab/_content.scss
Normal file
4
src/centered/tab/_content.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.tab-icon-stack {
|
||||
-moz-box-flex: 1;
|
||||
justify-content: end;
|
||||
}
|
||||
15
src/centered/tab/_label.scss
Normal file
15
src/centered/tab/_label.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
/* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_label.css */
|
||||
.tab-label-container {
|
||||
display: grid;
|
||||
justify-content: safe center;
|
||||
align-items: safe center;
|
||||
}
|
||||
.tab-label,
|
||||
.tab-secondary-label {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]),
|
||||
.tabbrowser-tab:not(:hover,[pinned]) .tab-label-container:not([textoverflow]) {
|
||||
margin-inline-end: 5px;
|
||||
}
|
||||
|
|
@ -1,14 +1,3 @@
|
|||
/* 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;
|
||||
|
|
@ -18,7 +7,7 @@
|
|||
#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:not([textoverflow]) {
|
||||
margin-inline-end: 19px;
|
||||
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected]):not(:hover, [pinned]) .tab-label-container label {
|
||||
padding-inline-end: 18px;
|
||||
}
|
||||
}
|
||||
|
|
@ -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") {
|
||||
|
|
|
|||
5
src/contents/_monospace.scss
Normal file
5
src/contents/_monospace.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
@-moz-document url-prefix("about:"),
|
||||
url-prefix("chrome://browser/content/places/places.xhtml"),
|
||||
regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
|
||||
@import "../theme/monospace";
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
91
src/hidden/_index.scss
Normal file
91
src/hidden/_index.scss
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
@include OneLinerNavbarContent() {
|
||||
@include Option("userChrome.hidden.tabbar") {
|
||||
#TabsToolbar {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.hidden.navbar") {
|
||||
#nav-bar {
|
||||
visibility: collapse; /* display: none is not work */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.hidden.tab_icon") {
|
||||
.tabbrowser-tab:not([pinned="true"]) {
|
||||
@include NotOption("userChrome.hidden.tab_icon.always") {
|
||||
.tab-icon-image {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.hidden.tab_icon.always") {
|
||||
.tab-icon-stack {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.hidden.sidebar_header") {
|
||||
@include NotOption("userChrome.hidden.sidebar_header.vertical_tab_only") {
|
||||
#sidebar-header {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.hidden.sidebar_header.vertical_tab_only") {
|
||||
#sidebar-box:is(
|
||||
[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"],
|
||||
[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"],
|
||||
[sidebarcommand="sidebartabs_asamuzak_jp-sidebar-action"]
|
||||
) #sidebar-header {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.hidden.urlbar_iconbox") {
|
||||
#identity-box[pageproxystate="valid"] {
|
||||
&.notSecureText #identity-icon-label,
|
||||
&.chromeUI #identity-icon-box,
|
||||
&.extensionPage #identity-icon-box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.notSecureText #identity-icon-box {
|
||||
padding-inline-end: 5px; /* Original: 8px */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#PlacesToolbarItems .bookmark-item {
|
||||
@include Option("userChrome.hidden.bookmarkbar_icon") {
|
||||
> .toolbarbutton-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.hidden.bookmarkbar_label") {
|
||||
> .toolbarbutton-text {
|
||||
visibility: collapse; /* display: none is not work */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.hidden.disabled_menu") {
|
||||
menu,
|
||||
menuitem:not(#context-back, #context-forward) {
|
||||
&[disabled="true"] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include NativeMenu {
|
||||
#context-back,
|
||||
#context-forward {
|
||||
&[disabled="true"] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
33
src/icons/_index.scss
Normal file
33
src/icons/_index.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
/** Library - Icons Replace ***************************************************/
|
||||
@include Option("userChrome.icon.library") {
|
||||
@import "../library/chrome";
|
||||
}
|
||||
|
||||
/** Panel - Icons *************************************************************/
|
||||
@include Option("userChrome.icon.panel") {
|
||||
@import "layout/panel";
|
||||
@import "panel";
|
||||
}
|
||||
|
||||
/** Menu - Icons Layout *******************************************************/
|
||||
@include Option("userChrome.icon.menu") {
|
||||
@import "layout/menu";
|
||||
@import "layout/bookmark_menu";
|
||||
|
||||
@include Option("userChrome.icon.context_menu") {
|
||||
@import "context_menu";
|
||||
}
|
||||
@include Option("userChrome.icon.global_menubar") {
|
||||
@import "global_menubar";
|
||||
}
|
||||
@include Option("userChrome.icon.global_menu") {
|
||||
@import "global_menu";
|
||||
}
|
||||
}
|
||||
|
||||
/** Libray Menu ***************************************************************/
|
||||
@include Option("userChrome.icon.library") {
|
||||
@include Option("userChrome.icon.menu") {
|
||||
@import "library";
|
||||
}
|
||||
}
|
||||
|
|
@ -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"] {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "./layout_menu_common";
|
||||
@import "./menu_common";
|
||||
|
||||
//-- Mixin ---------------------------------------------------------------------
|
||||
// Components
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../icons/layout_menu_common";
|
||||
@import "./menu_common";
|
||||
|
||||
//-- Mixin ---------------------------------------------------------------------
|
||||
$_placesPopupSet: "menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)";
|
||||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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 ====================================================*/
|
||||
|
|
|
|||
|
|
@ -1,32 +1,42 @@
|
|||
:root:not([uidensity]) #tab-notification-deck {
|
||||
--infobar-message-margin: 0 4px 3px;
|
||||
}
|
||||
:root[uidensity="compact"] #tab-notification-deck {
|
||||
--infobar-message-margin: 0 4px 2px;
|
||||
}
|
||||
#tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) {
|
||||
margin: var(--infobar-message-margin, 0 4px 4px) !important;
|
||||
}
|
||||
--infobar-message-vertical-margin: 3px;
|
||||
|
||||
:root:not([uidensity]) notification-message[message-bar-type="infobar"] {
|
||||
--infobar-vertical-margin: 7px;
|
||||
--infobar-button-vertical-margin: 3px;
|
||||
}
|
||||
:root[uidensity="compact"] notification-message[message-bar-type="infobar"] {
|
||||
: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, 8px) !important; /* Original: 8px */
|
||||
margin-block: var(--infobar-vertical-margin) !important; /* Original: 8px */
|
||||
}
|
||||
.notification-message {
|
||||
padding-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */
|
||||
padding-block: var(--infobar-vertical-margin) !important; /* Original: 8px */
|
||||
}
|
||||
.notification-button-container > .notification-button {
|
||||
margin-block: var(--infobar-button-vertical-margin, 4px) !important; /* Original: 4px */
|
||||
margin-block: var(--infobar-button-vertical-margin) !important; /* Original: 4px */
|
||||
}
|
||||
.notification-close {
|
||||
margin: var(--infobar-button-vertical-margin, 4px) 8px !important; /* Original: 4px 8px */
|
||||
margin: var(--infobar-button-vertical-margin) 8px !important; /* Original: 4px 8px */
|
||||
}
|
||||
|
||||
/* Hard coded for compatibility - Disappearing phenomenon */
|
||||
|
|
@ -1,24 +1,28 @@
|
|||
/* Toolbar Height */
|
||||
@include Option("userChrome.tab.lepton_like_padding") {
|
||||
:root:not([uidensity]) #TabsToolbar {
|
||||
--tab-min-height: 36px;
|
||||
}
|
||||
:root[uidensity="compact"] #TabsToolbar {
|
||||
--tab-min-height: 32px;
|
||||
}
|
||||
:root[uidensity="touch"] #TabsToolbar {
|
||||
--tab-min-height: 41px;
|
||||
:root {
|
||||
&:not([uidensity]) {
|
||||
--tab-min-height: 36px !important;
|
||||
}
|
||||
&[uidensity="compact"] {
|
||||
--tab-min-height: 32px !important;
|
||||
}
|
||||
&[uidensity="touch"] {
|
||||
--tab-min-height: 41px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.tab.photon_like_padding") {
|
||||
:root:not([uidensity]) #TabsToolbar {
|
||||
--tab-min-height: 32px;
|
||||
}
|
||||
:root[uidensity="compact"] #TabsToolbar {
|
||||
--tab-min-height: 29px;
|
||||
}
|
||||
:root[uidensity="touch"] #TabsToolbar {
|
||||
--tab-min-height: 41px;
|
||||
:root {
|
||||
&:not([uidensity]) {
|
||||
--tab-min-height: 32px !important;
|
||||
}
|
||||
&[uidensity="compact"] {
|
||||
--tab-min-height: 29px !important;
|
||||
}
|
||||
&[uidensity="touch"] {
|
||||
--tab-min-height: 41px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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[uidensity="compact"] #TabsToolbar {
|
||||
--tab-min-height: 29px; /* 36px -> 29px */
|
||||
:root {
|
||||
&:not([uidensity]) {
|
||||
--tab-min-height: 36px !important; /* 38px -> 36px */
|
||||
}
|
||||
&[uidensity="compact"] {
|
||||
--tab-min-height: 29px !important; /* 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 */
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@
|
|||
|
||||
@include Option("userChrome.rounding.square_menupopup") {
|
||||
xul|menupopup {
|
||||
--panel-border-radius: 0px !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1
src/sidebar/_index.scss
Normal file
1
src/sidebar/_index.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
@import "overlap";
|
||||
66
src/sidebar/_overlap.scss
Normal file
66
src/sidebar/_overlap.scss
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
@include Option("userChrome.sidebar.overlap", "userChrome.autohide.sidebar") {
|
||||
#sidebar-box {
|
||||
/* Original
|
||||
min-width: 14em;
|
||||
width: 18em;
|
||||
max-width: 36em;
|
||||
*/
|
||||
|
||||
--uc-sidebar-width: 40px;
|
||||
--uc-sidebar-activate-width: 18em;
|
||||
--uc-sidebar-activate-width-reverse: calc(-1 * var(--uc-sidebar-activate-width));
|
||||
--uc-sidebar-fullscreen-width: 4px;
|
||||
--uc-sidebar-shadow-color: #28282F;
|
||||
--uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */
|
||||
|
||||
z-index: 1 !important;
|
||||
position: relative !important;
|
||||
|
||||
box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color);
|
||||
&[positionend="true"] {
|
||||
box-shadow: -1px 0px 15px -10px var(--uc-sidebar-shadow-color);
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#sidebar-splitter {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.sidebar.overlap") {
|
||||
#sidebar-box[positionend="true"] {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
#sidebar-header {
|
||||
background-color: var(--sidebar-background-color) !important;
|
||||
color: var(--sidebar-text-color) !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@include NotOption("userChrome.autohide.sidebar") {
|
||||
#sidebar-box,
|
||||
#sidebar {
|
||||
min-width: var(--uc-sidebar-activate-width) !important;
|
||||
max-width: var(--uc-sidebar-activate-width) !important;
|
||||
}
|
||||
|
||||
#sidebar-box {
|
||||
margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important;
|
||||
will-change: padding-inline;
|
||||
|
||||
&:not([hidden="true"]) {
|
||||
padding-inline-start: var(--uc-sidebar-activate-width);
|
||||
}
|
||||
|
||||
@include Animate {
|
||||
transition: padding-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out,
|
||||
visibility 0s linear !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -10,7 +10,9 @@
|
|||
|
||||
/** Clipped tabs - Show close button at pinned tab ****************************/
|
||||
@include Option("userChrome.tab.close_button_at_pinned") {
|
||||
@import "clipped_tab/pinned_close_button";
|
||||
@include NotOption("userChrome.tabbar.as_titlebar") {
|
||||
@import "clipped_tab/pinned_close_button";
|
||||
}
|
||||
}
|
||||
|
||||
/** Clipped tabs - Always show tab icon ***************************************/
|
||||
41
src/tab/_index.scss
Normal file
41
src/tab/_index.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
/*= Tab - Connect to window ==============================================*/
|
||||
@include Option("userChrome.tab.connect_to_window") {
|
||||
@import "connect_to_window";
|
||||
}
|
||||
|
||||
/*= Selected Tab =============================================================*/
|
||||
@import "selected_tab";
|
||||
|
||||
/*= Unselected Tab - Divide line =============================================*/
|
||||
@import "unselected_tab";
|
||||
|
||||
/*= New tab button ============================================================*/
|
||||
@import "newtab_button";
|
||||
|
||||
/*= Unloaded Tab - Contents Opacity ===========================================*/
|
||||
@include Option("userChrome.tab.unloaded") {
|
||||
@import "unload_tab";
|
||||
}
|
||||
|
||||
/*= Clipped tabs =============================================================*/
|
||||
@import "clipped_tab";
|
||||
|
||||
/*= Sound Tab ================================================================*/
|
||||
@import "sound_tab";
|
||||
|
||||
/*= PictureInPicture Tab - Show PIP Icon =====================================*/
|
||||
@include Option("userChrome.tab.pip") {
|
||||
@import "picture_in_picture_tab";
|
||||
}
|
||||
|
||||
/*= Container Tab - Color line at icon's bottom ==============================*/
|
||||
@include Option("userChrome.tab.container") {
|
||||
@include NotOption("userChrome.tabbar.as_titlebar") {
|
||||
@import "container_tab";
|
||||
}
|
||||
}
|
||||
|
||||
/*= Crashed Tab - Don't show Favicons ========================================*/
|
||||
@include Option("userChrome.tab.crashed") {
|
||||
@import "crashed_tab";
|
||||
}
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
/*= Sound Tab - Hide Label ===================================================*/
|
||||
@include Option("userChrome.tab.sound_hide_label") {
|
||||
@import "sound_tab/hide_label";
|
||||
@include NotOption("userChrome.tab.sound_show_label") {
|
||||
@import "sound_tab/hide_label";
|
||||
}
|
||||
}
|
||||
|
||||
/*= Sound Tab - Show Label ===================================================*/
|
||||
|
|
@ -1,3 +1,30 @@
|
|||
//-- 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;
|
||||
|
|
@ -26,8 +53,12 @@
|
|||
fill-opacity: 0.8 !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label {
|
||||
transform: translateX(4px);
|
||||
|
||||
/* Label */
|
||||
@include _hidden_tabIcon_soundTabLabel {
|
||||
.tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Animate */
|
||||
|
|
@ -44,18 +75,22 @@
|
|||
|
||||
/* None exist favicon - Size bigger */
|
||||
@include NotOption("userChrome.tab.always_show_tab_icon") {
|
||||
.tabbrowser-tab:not([image]) .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;
|
||||
}
|
||||
.tabbrowser-tab:not([image]):is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) {
|
||||
opacity: 0 !important; /* Favicon hidden */
|
||||
}
|
||||
.tabbrowser-tab:not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
|
||||
.tab-label {
|
||||
transform: translateX(3px);
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -57,6 +57,16 @@
|
|||
.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);
|
||||
87
src/tabbar/_as_titlebar.scss
Normal file
87
src/tabbar/_as_titlebar.scss
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
//-- Mixin ---------------------------------------------------------------------
|
||||
@mixin _asTitlebar_preSpacer() {
|
||||
@include NotOption("userChrome.centered.tab") {
|
||||
@content;
|
||||
}
|
||||
@include Option("userChrome.centered.tab") {
|
||||
@include Option("userChrome.centered.tab.label") {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
:root:not([tabsintitlebar="true"]) #tabbrowser-tabs, /* Show only */
|
||||
#scrollbutton-up, /* Defaults */
|
||||
#scrollbutton-down,
|
||||
.titlebar-spacer[type="pre-tabs"],
|
||||
spacer:is([part="overflow-start-indicator"], [part="overflow-end-indicator"]),
|
||||
.tabbrowser-tab:not([selected="true"]),
|
||||
.tabbrowser-tab[selected="true"] .tab-background,
|
||||
.tabbrowser-tab[selected="true"] .tab-stack:is(::before, ::after),
|
||||
.tabbrowser-tab[selected="true"] .tab-close-button,
|
||||
#tabs-newtab-button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[selected="true"] {
|
||||
-moz-window-dragging: drag;
|
||||
--tab-max-width: 100vw;
|
||||
min-width: calc(var(--uc-tabbar-width, 100vw) - var(--uc-widow-control-space)) !important;
|
||||
max-width: var(--tab-max-width) !important;
|
||||
|
||||
margin-inline-start: calc(var(--tab-shadow-max-size) * -1) !important;
|
||||
// padding-inline-start: calc(var(--tab-shadow-max-size) + 1px) !important;
|
||||
|
||||
&[pinned="true"] {
|
||||
-moz-box-flex: 100;
|
||||
max-width: var(--tab-max-width) !important;
|
||||
}
|
||||
.tab-label-container {
|
||||
margin-inline: 0 !important;
|
||||
}
|
||||
}
|
||||
.tab-content {
|
||||
margin-inline: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Pinned */
|
||||
#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned][selected="true"] {
|
||||
position: relative !important;
|
||||
}
|
||||
#tabbrowser-tabs {
|
||||
--tab-overflow-pinned-tabs-width: 0 !important;
|
||||
padding-inline: 0 !important; /* Original: var(--tab-overflow-pinned-tabs-width) 0; */
|
||||
}
|
||||
.tab-throbber,
|
||||
.tab-icon-pending,
|
||||
.tab-icon-image,
|
||||
.tab-sharing-icon-overlay,
|
||||
.tab-icon-overlay {
|
||||
&[pinned] {
|
||||
margin-inline-end: 5.5px;
|
||||
}
|
||||
}
|
||||
.tab-label-container[pinned] {
|
||||
width: unset !important;
|
||||
}
|
||||
|
||||
/* Padding */
|
||||
@include _asTitlebar_preSpacer {
|
||||
#tabbrowser-arrowscrollbox {
|
||||
margin-inline: 2px !important;
|
||||
}
|
||||
:root[sizemode="normal"] #tabbrowser-arrowscrollbox {
|
||||
margin-inline: 6px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include Option("browser.tabs.tabmanager.enabled") {
|
||||
:root:not([tabsintitlebar="true"]) #tabbrowser-tabs:not([overflow="true"], [hashiddentabs]) ~ #alltabs-button,
|
||||
:root:not([tabsintitlebar="true"]) #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow="true"]) ~ #new-tab-button {
|
||||
display: -moz-box !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -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";
|
||||
}
|
||||
|
|
|
|||
26
src/tabbar/_layout.scss
Normal file
26
src/tabbar/_layout.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
@include NotOption("userChrome.tabbar.one_liner") {
|
||||
@include Option("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") {
|
||||
@import "layout/window_control";
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.tabbar.one_liner") {
|
||||
@include NotOption("userChrome.tabbar.one_liner.responsive") {
|
||||
@include Option("userChrome.tabbar.one_liner.tabbar_first") {
|
||||
@import "layout/window_control";
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.tabbar.one_liner.responsive") {
|
||||
@include Option("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") {
|
||||
@media screen and (max-width: 1100px) {
|
||||
@import "layout/window_control";
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.tabbar.one_liner.tabbar_first") {
|
||||
@media screen and (min-width: 1100px) {
|
||||
@import "layout/window_control";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import "layout/navbar_padding";
|
||||
130
src/tabbar/_on_bottom.scss
Normal file
130
src/tabbar/_on_bottom.scss
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
|
||||
See the above repository for updates as well as full license text. */
|
||||
|
||||
/*= Tabbar - Move to bottom ==================================================*/
|
||||
#titlebar {
|
||||
order: 2; /* When userChrome.fullscreen.overlap */
|
||||
-moz-box-ordinal-group: 2;
|
||||
--tabs-navbar-shadow-size: 0px;
|
||||
}
|
||||
#tab-notification-deck {
|
||||
order: 2; /* When userChrome.fullscreen.overlap */
|
||||
-moz-box-ordinal-group: 2;
|
||||
}
|
||||
|
||||
#TabsToolbar .titlebar-spacer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#TabsToolbar-customization-target > .toolbarbutton-1:last-child {
|
||||
padding-inline-end: var(--toolbar-start-end-padding, 8px);
|
||||
}
|
||||
|
||||
@include Option("userChrome.tabbar.on_bottom.above_bookmark") {
|
||||
#PersonalToolbar {
|
||||
order: 2; /* When userChrome.fullscreen.overlap */
|
||||
-moz-box-ordinal-group: 2;
|
||||
}
|
||||
}
|
||||
@include NotOption("userChrome.tabbar.on_bottom.above_bookmark") {
|
||||
@include Option("userChrome.tab.connect_to_window") {
|
||||
@include Option("userChrome.tab.color_like_toolbar") {
|
||||
#navigator-toolbox {
|
||||
border-bottom-color: var(--toolbar-bgcolor) !important; /* Original: 1px solid var(--chrome-content-separator-color); */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*= Tabbar - Hidden at singgle tab ===========================================*/
|
||||
@include Option("userChrome.tabbar.on_bottom.hidden_single_tab") {
|
||||
#tabbrowser-tabs .tabbrowser-tab:only-of-type {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs,
|
||||
#tabbrowser-tabs arrowscrollbox {
|
||||
height: auto !important;
|
||||
min-height: auto !important;
|
||||
}
|
||||
|
||||
@include Animate {
|
||||
#tabbrowser-tabs {
|
||||
transition: height 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*= Menubar - Always on top ==================================================*/
|
||||
@include Option("userChrome.tabbar.on_bottom.menubar_on_top") {
|
||||
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0
|
||||
See the above repository for updates as well as full license text. */
|
||||
|
||||
:root {
|
||||
/* height if native titlebar is enabled, assumes empty menubar */
|
||||
--uc-menubar-height: 20px;
|
||||
--uc-menubar-padding: 1px; /* FF's menubar padding */
|
||||
--uc-menubar-container-height: calc(var(--uc-menubar-height) - (2 * var(--uc-menubar-padding)));
|
||||
}
|
||||
:root[tabsintitlebar] {
|
||||
/* height when native titlebar is disabled, more roomy so can fit buttons etc. */
|
||||
--uc-menubar-height: 30px;
|
||||
}
|
||||
|
||||
/* Menubar on top patch - use with tabs_on_bottom.css */
|
||||
/* Only really useful if menubar is ALWAYS visible */
|
||||
:root:not([sizemode="fullscreen"]) {
|
||||
--uc-window-control-width: 0px !important;
|
||||
}
|
||||
/* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */
|
||||
:root:not([sizemode="fullscreen"]) #nav-bar {
|
||||
border-inline-width: 0;
|
||||
}
|
||||
|
||||
#navigator-toolbox{
|
||||
-moz-window-dragging: drag;
|
||||
}
|
||||
:root[sizemode="fullscreen"] #navigator-toolbox {
|
||||
padding-top: 0px !important;
|
||||
}
|
||||
#toolbar-menubar {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
top: var(--uc-titlebar-padding);
|
||||
height: var(--uc-menubar-height);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
:root[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive="true"]) {
|
||||
height: var(--uc-menubar-height) !important; /* calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) */
|
||||
}
|
||||
|
||||
#toolbar-menubar > .titlebar-buttonbox-container {
|
||||
height: 100%;
|
||||
order: 100;
|
||||
}
|
||||
|
||||
#toolbar-menubar > [flex] {
|
||||
flex-grow: 100;
|
||||
}
|
||||
#toolbar-menubar > spacer[flex] {
|
||||
order: 99;
|
||||
flex-grow: 1;
|
||||
min-width: var(--uc-window-drag-space-post);
|
||||
}
|
||||
|
||||
#toolbar-menubar .toolbarbutton-1 {
|
||||
--toolbarbutton-inner-padding: 3px;
|
||||
}
|
||||
|
||||
#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
|
||||
#TabsToolbar > .titlebar-buttonbox-container {
|
||||
height: var(--uc-menubar-container-height);
|
||||
}
|
||||
:root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container{
|
||||
visibility: collapse !important;
|
||||
}
|
||||
:root:not([chromehidden~="menubar"]):not([sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
104
src/tabbar/_one_liner.scss
Normal file
104
src/tabbar/_one_liner.scss
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
:root {
|
||||
--uc-navbar-width-origin: 40vw;
|
||||
--uc-navbar-width: var(--uc-navbar-width-origin);
|
||||
--uc-tabbar-width: calc(100vw - var(--uc-navbar-width));
|
||||
|
||||
--uc-navbar-margin: calc(var(--uc-navbar-width) + var(--uc-navbar-gap, 0px));
|
||||
|
||||
@include Option("userChrome.autohide.fill_urlbar") {
|
||||
--uc-navbar-width-origin: 50vw;
|
||||
--uc-navbar-width: 24em;
|
||||
}
|
||||
}
|
||||
|
||||
#nav-bar {
|
||||
--uc-navbar-double-block: calc(2 * var(--uc-navbar-block, 0px));
|
||||
height: calc(var(--uc-tabbar-height) - var(--uc-navbar-double-block)) !important;
|
||||
margin-top: calc(var(--uc-tabbar-hide-height) + var(--uc-navbar-double-block)) !important;
|
||||
margin-bottom: var(--uc-navbar-block, 0px) !important;
|
||||
transform: translateY(calc(-1 * var(--uc-navbar-block, 0px)));
|
||||
}
|
||||
|
||||
#titlebar {
|
||||
transform: translateY(var(--uc-navbar-block, 0px));
|
||||
}
|
||||
#TabsToolbar > .titlebar-buttonbox-container {
|
||||
transform: translateY(calc(-1 * var(--uc-navbar-block, 0px)));
|
||||
}
|
||||
|
||||
@include NotOption("userChrome.tabbar.one_liner.combine_navbar") {
|
||||
:root {
|
||||
--uc-navbar-gap: 10px;
|
||||
--uc-navbar-block: 1.5px; // var(--tab-block-margin) or var(--tabs-navbar-shadow-size)
|
||||
|
||||
&[uidensity="compact"] {
|
||||
--uc-navbar-block: 1px;
|
||||
}
|
||||
&[uidensity="touch"] {
|
||||
--uc-navbar-block: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
#nav-bar {
|
||||
--toolbarbutton-inner-padding: 6px; /* Original: 8px */
|
||||
border-radius: var(--tab-border-radius, 4px);
|
||||
}
|
||||
|
||||
#nav-bar,
|
||||
#nav-bar-customization-target {
|
||||
-moz-box-align: center;
|
||||
}
|
||||
|
||||
#urlbar[breakout] {
|
||||
top: 0px !important; /* Original: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2); */
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.tabbar.one_liner.combine_navbar") {
|
||||
#navigator-toolbox {
|
||||
background-color: var(--toolbar-bgcolor) !important;
|
||||
}
|
||||
|
||||
#nav-bar {
|
||||
--lwt-tabs-border-color: transparent; // box-shadow
|
||||
background-color: unset !important; // var(--toolbar-bgcolor)
|
||||
background-image: unset !important; // var(--toolbar-bgimage)
|
||||
}
|
||||
}
|
||||
|
||||
#urlbar-container {
|
||||
min-width: calc(24px + 2 * var(--toolbarbutton-inner-padding)) !important; // Original: calc(350px + 24px + 2 * var(--toolbarbutton-inner-padding))
|
||||
}
|
||||
|
||||
#PersonalToolbar {
|
||||
// for URL Bar
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
toolbarspring.chromeclass-toolbar-additional {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@include NotOption("userChrome.tabbar.one_liner.tabbar_first") {
|
||||
#TabsToolbar {
|
||||
margin-inline-start: var(--uc-navbar-margin) !important;
|
||||
}
|
||||
#nav-bar {
|
||||
margin-inline-end: var(--uc-tabbar-width) !important;
|
||||
}
|
||||
.titlebar-spacer[type="pre-tabs"] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.tabbar.one_liner.tabbar_first") {
|
||||
#TabsToolbar {
|
||||
margin-inline-end: var(--uc-navbar-margin) !important;
|
||||
}
|
||||
#nav-bar {
|
||||
margin-inline-start: var(--uc-tabbar-width) !important;
|
||||
}
|
||||
.titlebar-spacer[type="post-tabs"] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,237 +0,0 @@
|
|||
/* 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;
|
||||
}
|
||||
|
||||
@include Option("userChrome.tab.on_bottom.above_bookmark") {
|
||||
#PersonalToolbar {
|
||||
order: 2; /* When userChrome.fullscreen.overlap */
|
||||
-moz-box-ordinal-group: 2;
|
||||
}
|
||||
}
|
||||
@include NotOption("userChrome.tab.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); */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*= Windows Control - Move to toolbar ========================================*/
|
||||
: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;
|
||||
}
|
||||
|
||||
/* 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: var(--uc-titlebar-padding) !important;
|
||||
}
|
||||
|
||||
:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
#toolbar-menubar[inactive] > .titlebar-buttonbox-container {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/*= Navbar - Padding for window controls =====================================*/
|
||||
/* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */
|
||||
: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"] */
|
||||
}
|
||||
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
||||
--uc-window-control-width: 84px; /* 84px is default value of linux */
|
||||
--uc-window-drag-space-pre: 30px;
|
||||
--uc-window-drag-space-post: 25px;
|
||||
}
|
||||
:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) {
|
||||
--uc-window-drag-space-pre: 0px; /* Remove pre space */
|
||||
}
|
||||
|
||||
#nav-bar {
|
||||
border-inline-start-width: var(--uc-window-drag-space-pre);
|
||||
border-inline-end-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post));
|
||||
|
||||
border-inline-style: solid !important;
|
||||
border-inline-color: var(--toolbar-bgcolor);
|
||||
}
|
||||
|
||||
/* Windows */
|
||||
@include OS($win7, $win8) {
|
||||
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
||||
--uc-window-control-width: 105px;
|
||||
}
|
||||
}
|
||||
|
||||
@include OS($win10) {
|
||||
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
||||
--uc-window-control-width: 138px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
||||
--uc-window-control-width: 72px;
|
||||
}
|
||||
:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar {
|
||||
border-inline-start-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post));
|
||||
border-inline-end-width: var(--uc-window-drag-space-pre);
|
||||
}
|
||||
:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
|
||||
:root[sizemode="fullscreen"] #window-controls {
|
||||
right: unset;
|
||||
}
|
||||
}
|
||||
|
||||
/*= Menubar - Always on top ==================================================*/
|
||||
@include Option("userChrome.tab.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;
|
||||
padding-top: calc(var(--uc-menubar-height) + var(--uc-titlebar-padding)) !important;
|
||||
}
|
||||
: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;
|
||||
}
|
||||
}
|
||||
128
src/tabbar/layout/_navbar_padding.scss
Normal file
128
src/tabbar/layout/_navbar_padding.scss
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
/*= Navbar - Padding for window controls =====================================*/
|
||||
/* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */
|
||||
|
||||
//-- Mixin ---------------------------------------------------------------------
|
||||
@mixin _remove_spacer_pre() {
|
||||
/* Don't need pre spacer */
|
||||
--uc-window-drag-space-pre: 0px;
|
||||
}
|
||||
|
||||
@mixin _remove_spacer_post() {
|
||||
/* Don't need window control */
|
||||
--uc-widow-control-space: 0px;
|
||||
}
|
||||
|
||||
@mixin _remove_spacer_oneLiner() {
|
||||
@include Option("userChrome.tabbar.one_liner.tabbar_first") {
|
||||
@include _remove_spacer_pre;
|
||||
@include Option("userChrome.tabbar.as_titlebar") {
|
||||
#tabbrowser-tabs {
|
||||
@include _remove_spacer_post;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include NotOption("userChrome.tabbar.one_liner.tabbar_first") {
|
||||
@include NotOption("userChrome.tabbar.as_titlebar") {
|
||||
@include _remove_spacer_post;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _oneLiner_navBar_borderPadding() {
|
||||
@include NotOption("userChrome.tabbar.one_liner") {
|
||||
@content;
|
||||
}
|
||||
@include Option("userChrome.tabbar.one_liner") {
|
||||
@include Option("userChrome.tabbar.one_liner.combine_navbar") {
|
||||
@content;
|
||||
}
|
||||
@include NotOption("userChrome.tabbar.one_liner.combine_navbar") {
|
||||
@include Option("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") {
|
||||
@media screen and (max-width: 1100px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _oneLiner_navBar_marginGap() {
|
||||
@include NotOption("userChrome.tabbar.one_liner.combine_navbar") {
|
||||
@include NotOption("userChrome.tabbar.one_liner.responsive") {
|
||||
@content;
|
||||
}
|
||||
@include Option("userChrome.tabbar.one_liner.responsive") {
|
||||
@media screen and (min-width: 1100px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
@include Option("userChrome.tabbar.one_liner") {
|
||||
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
||||
@include NotOption("userChrome.tabbar.one_liner.responsive") {
|
||||
@include _remove_spacer_oneLiner;
|
||||
}
|
||||
@include Option("userChrome.tabbar.one_liner.responsive") {
|
||||
@media screen and (max-width: 1100px) {
|
||||
@include NotOption("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") {
|
||||
@include _remove_spacer_pre;
|
||||
@include _remove_spacer_post;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1100px) {
|
||||
@include _remove_spacer_oneLiner;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#nav-bar {
|
||||
border-inline-style: solid !important;
|
||||
border-inline-color: transparent;
|
||||
|
||||
@include _oneLiner_navBar_borderPadding {
|
||||
border-inline-start-width: var(--uc-window-drag-space-pre);
|
||||
border-inline-end-width: var(--uc-widow-control-space);
|
||||
}
|
||||
|
||||
@include Option("userChrome.tabbar.one_liner") {
|
||||
@include _oneLiner_navBar_marginGap {
|
||||
@include NotOption("userChrome.tabbar.one_liner.tabbar_first") {
|
||||
margin-inline-start: var(--uc-window-drag-space-pre) !important;
|
||||
}
|
||||
@include Option("userChrome.tabbar.one_liner.tabbar_first") {
|
||||
margin-inline-end: var(--uc-widow-control-space) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Use this pref to check Mac OS where window controls are on left */
|
||||
/* This pref defaults to true on Mac and doesn't actually do anything on other platforms. So if your system has window controls on LEFT side you can set the pref to true */
|
||||
@include OS($mac) {
|
||||
:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar {
|
||||
@include _oneLiner_navBar_borderPadding {
|
||||
border-inline-start-width: var(--uc-widow-control-space);
|
||||
border-inline-end-width: var(--uc-window-drag-space-pre);
|
||||
}
|
||||
|
||||
@include Option("userChrome.tabbar.one_liner") {
|
||||
@include _oneLiner_navBar_marginGap {
|
||||
@include NotOption("userChrome.tabbar.one_liner.tabbar_first") {
|
||||
margin-inline-start: var(--uc-window-drag-space-pre, 0px) !important;
|
||||
}
|
||||
@include Option("userChrome.tabbar.one_liner.tabbar_first") {
|
||||
margin-inline-end: var(--uc-widow-control-space, 0px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
|
||||
:root[sizemode="fullscreen"] #window-controls {
|
||||
right: unset;
|
||||
}
|
||||
}
|
||||
121
src/tabbar/layout/_window_control.scss
Normal file
121
src/tabbar/layout/_window_control.scss
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
/*= Windows Control - Move to toolbar ========================================*/
|
||||
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
|
||||
See the above repository for updates as well as full license text. */
|
||||
:root {
|
||||
--uc-titlebar-padding: 0px;
|
||||
}
|
||||
|
||||
@include OS($win) {
|
||||
:root[sizemode="maximized"][tabsintitlebar] {
|
||||
--uc-titlebar-padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
|
||||
#TabsToolbar > .titlebar-buttonbox-container {
|
||||
position: fixed;
|
||||
display: block;
|
||||
top: var(--uc-titlebar-padding);
|
||||
right:0;
|
||||
height: 40px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* where window controls are on left */
|
||||
@include OS($mac) {
|
||||
:root{
|
||||
--uc-titlebar-padding: 0px !important;
|
||||
}
|
||||
.titlebar-buttonbox-container{
|
||||
left:0;
|
||||
right: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
#navigator-toolbox {
|
||||
padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important;
|
||||
}
|
||||
|
||||
:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
#toolbar-menubar[inactive] > .titlebar-buttonbox-container {
|
||||
@include NotOption("userChrome.hidden.tabbar") {
|
||||
opacity: 0;
|
||||
visibility: collapse;
|
||||
}
|
||||
@include Option("userChrome.hidden.tabbar") {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
@include Option("userChrome.autohide.navbar") {
|
||||
opacity: 0;
|
||||
visibility: collapse;
|
||||
}
|
||||
}
|
||||
}
|
||||
#navigator-toolbox:is(:hover, :focus-within) #toolbar-menubar[inactive]:not([customizing]) > .titlebar-buttonbox-container {
|
||||
@include Option("userChrome.hidden.tabbar") {
|
||||
@include Option("userChrome.autohide.navbar") {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include Animate {
|
||||
#toolbar-menubar[inactive] > .titlebar-buttonbox-container {
|
||||
transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms),
|
||||
visibility 100ms var(--animation-easing-function) 0.25s !important;
|
||||
}
|
||||
#navigator-toolbox:is(:hover, :focus-within) #toolbar-menubar[inactive]:not([customizing]) > .titlebar-buttonbox-container {
|
||||
transition-delay: 0s !important;
|
||||
}
|
||||
}
|
||||
|
||||
.titlebar-buttonbox-container > .titlebar-buttonbox {
|
||||
height: 100%;
|
||||
@include OS($mac) {
|
||||
margin-block: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* At Full Screen */
|
||||
:root[sizemode="fullscreen"] #window-controls {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
}
|
||||
:root[uidensity="compact"][sizemode="fullscreen"] #window-controls {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
@include Option("browser.fullscreen.autohide") {
|
||||
:root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.hidden.tabbar") {
|
||||
:root[inFullscreen]:not([macOSNativeFullscreen]) {
|
||||
#toolbar-menubar {
|
||||
visibility: visible !important;
|
||||
min-height: 0 !important;
|
||||
max-height: 0 !important;
|
||||
}
|
||||
#menubar-items {
|
||||
visibility: collapse !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* At Activated Menubar */
|
||||
:root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container {
|
||||
display: block !important;
|
||||
}
|
||||
:root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container {
|
||||
@include NotOption("userChrome.hidden.tabbar") {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
27
src/tabbar/layout/_window_control_size.scss
Normal file
27
src/tabbar/layout/_window_control_size.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
:root {
|
||||
--uc-window-control-width: 0px; /* Same as .titlebar-buttonbox-container - Space reserved for window controls */
|
||||
--uc-window-drag-space-pre: 0px; /* Same as .titlebar-spacer[type="pre-tabs"] - Extra space reserved on both sides of the nav-bar to be able to drag the window */
|
||||
--uc-window-drag-space-post: 0px; /* Same as .titlebar-spacer[type="post-tabs"] */
|
||||
|
||||
--uc-widow-control-space: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post));
|
||||
}
|
||||
|
||||
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
||||
--uc-window-control-width: 84px; /* 84px is default value of linux */
|
||||
--uc-window-drag-space-pre: var(--uc-title-pre-spacer, 40px); // 30px
|
||||
--uc-window-drag-space-post: var(--uc-title-post-spacer, 40px); // 25px
|
||||
|
||||
@include OS($win7, $win8) {
|
||||
--uc-window-control-width: 105px;
|
||||
}
|
||||
@include OS($win10) {
|
||||
--uc-window-control-width: 138px;
|
||||
}
|
||||
@include OS($mac) {
|
||||
--uc-window-control-width: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) {
|
||||
--uc-window-drag-space-pre: 0px; /* Remove pre space */
|
||||
}
|
||||
35
src/theme/_index.scss
Normal file
35
src/theme/_index.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
/*= System Default Theme =====================================================*/
|
||||
@include Option("userChrome.theme.system_default") {
|
||||
@import "system_default_theme";
|
||||
}
|
||||
|
||||
/*= Fully Theme Mode =========================================================*/
|
||||
// Default Themes
|
||||
// https://github.com/mozilla/gecko-dev/blob/master/toolkit/mozapps/extensions/default-theme/manifest.json
|
||||
// https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/light/manifest.json
|
||||
// https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/dark/manifest.json
|
||||
|
||||
@include Option("userChrome.theme.proton_color") {
|
||||
@import "proton_color";
|
||||
@include Option("userChrome.theme.proton_color.dark_blue_accent") {
|
||||
@import "dark_blue_accent";
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.theme.fully_color") {
|
||||
@import "fully_color";
|
||||
}
|
||||
|
||||
/*= Fully Dark Mode ==========================================================*/
|
||||
@include Option("userChrome.theme.fully_dark") {
|
||||
@import "fully_dark";
|
||||
}
|
||||
|
||||
/*= Proton Theme Mode ========================================================*/
|
||||
@include Option("userChrome.theme.proton_chrome") {
|
||||
@import "proton_chrome";
|
||||
}
|
||||
|
||||
/*= Monospace ================================================================*/
|
||||
@include Option("userChrome.theme.monospace") {
|
||||
@import "monospace";
|
||||
}
|
||||
3
src/theme/_monospace.scss
Normal file
3
src/theme/_monospace.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
68
src/utils/_one_liner.scss
Normal file
68
src/utils/_one_liner.scss
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
@use "option" as *;
|
||||
|
||||
@mixin OneLinerContent() {
|
||||
@include NotOption("userChrome.tabbar.one_liner.responsive") {
|
||||
@content;
|
||||
}
|
||||
@include Option("userChrome.tabbar.one_liner.responsive") {
|
||||
@media screen and (min-width: 1100px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin OneLiner() {
|
||||
@include Option("userChrome.tabbar.one_liner") {
|
||||
@include OneLinerContent {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin OneLinerOnBottom() {
|
||||
@include NotOption("userChrome.tabbar.one_liner") {
|
||||
@content;
|
||||
}
|
||||
@include Option("userChrome.tabbar.one_liner") {
|
||||
@include Option("userChrome.tabbar.one_liner.responsive") {
|
||||
@media screen and (max-width: 1100px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin OneLinerTabbar() {
|
||||
@include NotOption("userChrome.tabbar.one_liner.responsive") {
|
||||
@content;
|
||||
}
|
||||
@include Option("userChrome.tabbar.one_liner.responsive") {
|
||||
@media screen and (min-width: 1100px) {
|
||||
@content;
|
||||
}
|
||||
@include Option("userChrome.autohide.tabbar") {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin OneLinerNavbarContent() {
|
||||
@include NotOption("userChrome.tabbar.one_liner") {
|
||||
@content;
|
||||
}
|
||||
@include Option("userChrome.tabbar.one_liner") {
|
||||
@include Option("userChrome.tabbar.one_liner.responsive") {
|
||||
@media screen and (max-width: 1100px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin OneLinerNavbar() {
|
||||
@include Option("userChrome.autohide.navbar") {
|
||||
@include OneLinerNavbarContent() {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
49
user.js
49
user.js
|
|
@ -68,10 +68,40 @@ user_pref("userChrome.rounding.square_tab", false);
|
|||
|
||||
// == 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", false);
|
|||
// 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", false);
|
|||
|
||||
// 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…
Add table
Add a link
Reference in a new issue