mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2026-01-13 12:51:20 -08:00
Merge branch 'master' into photon-style
This commit is contained in:
alstjr7375
commit
c72ee6cc79
123 changed files with 5548 additions and 1543 deletions
10
CREDITS
10
CREDITS
|
|
@ -156,6 +156,11 @@ W: https://gist.github.com/mmis1000/08d8de4bbe70c04423f0b966bcc286b1
|
|||
C: Copyright (c) 2021 Mmis1000 <mmis10002@gmail.com>
|
||||
L: MIT
|
||||
|
||||
N: edge-frfox
|
||||
W: https://github.com/bmFtZQ/edge-frfox
|
||||
C: Copyright (c) 2021 bmFtZQ
|
||||
L: MIT
|
||||
|
||||
N: Feather
|
||||
W: https://github.com/feathericons/feather
|
||||
C: Copyright (c) 2013-2017 Cole Bemis
|
||||
|
|
@ -246,3 +251,8 @@ N: Waterfox
|
|||
W: https://github.com/WaterfoxCo/Waterfox
|
||||
C: Copyright (c) 2012 Waterfox Limited
|
||||
L: MPL 2.0
|
||||
|
||||
N: WaveFox
|
||||
W: https://github.com/QNetITQ/WaveFox
|
||||
C: Copyright (c) 2021 QNetITQ
|
||||
L: MIT
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
}
|
||||
}
|
||||
@include expect {
|
||||
@-moz-document url(about:home) {
|
||||
@#{-moz-document} url(about:home) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
}
|
||||
}
|
||||
@include expect {
|
||||
@-moz-document url(about:home), url(about:newtab) {
|
||||
@#{-moz-document} url(about:home), url(about:newtab) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
59
__tests__/moz_document.test.scss
Normal file
59
__tests__/moz_document.test.scss
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
@use "true" as *;
|
||||
@use "example" as *;
|
||||
@use "../src/utils/moz_document" as *;
|
||||
|
||||
@include test-module("Moz Documents [mix]") {
|
||||
@include test("simple") {
|
||||
@include assert {
|
||||
@include output {
|
||||
@include moz-document(url "about:downloads") {
|
||||
@include example;
|
||||
}
|
||||
@include moz-document(url-prefix "about:") {
|
||||
@include example;
|
||||
}
|
||||
@include moz-document(regexp "^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
@include expect {
|
||||
@-moz-document url("about:downloads") {
|
||||
@include example;
|
||||
}
|
||||
@-moz-document url-prefix("about:") {
|
||||
@include example;
|
||||
}
|
||||
@-moz-document regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include test("multiple") {
|
||||
@include assert {
|
||||
@include output {
|
||||
@include moz-document(
|
||||
url "about:downloads",
|
||||
url-prefix "about:",
|
||||
regexp "^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$"
|
||||
) {
|
||||
@include example;
|
||||
}
|
||||
@include moz-document(
|
||||
url-prefix "about:cache",
|
||||
url-prefix "about:checkerboard"
|
||||
) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
@include expect {
|
||||
@-moz-document url("about:downloads"), url-prefix("about:"), regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
|
||||
@include example;
|
||||
}
|
||||
@-moz-document url-prefix("about:cache"), url-prefix("about:checkerboard") {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -32,6 +32,48 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include test("simple `and`") {
|
||||
@include assert {
|
||||
@include output {
|
||||
@include option.Option("userChrome.tab.photon" "userChrome.padding.photon") {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
@include expect {
|
||||
@supports (-moz-bool-pref("userChrome.tab.photon") and -moz-bool-pref("userChrome.padding.photon")) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include test("multiple `and`") {
|
||||
@include assert {
|
||||
@include output {
|
||||
@include option.Option("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow") {
|
||||
@include example;
|
||||
}
|
||||
@include option.Option("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow", "userChrome.icon.panel_full") {
|
||||
@include example;
|
||||
}
|
||||
@include option.Option("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow" "userChrome.icon.panel_full") {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
@include expect {
|
||||
@supports (-moz-bool-pref("userChrome.tab.photon") and -moz-bool-pref("userChrome.padding.photon")) or -moz-bool-pref("userChrome.tab.box_shadow") {
|
||||
@include example;
|
||||
}
|
||||
@supports (-moz-bool-pref("userChrome.tab.photon") and -moz-bool-pref("userChrome.padding.photon")) or -moz-bool-pref("userChrome.tab.box_shadow") or -moz-bool-pref("userChrome.icon.panel_full") {
|
||||
@include example;
|
||||
}
|
||||
@supports (-moz-bool-pref("userChrome.tab.photon") and -moz-bool-pref("userChrome.padding.photon")) or (-moz-bool-pref("userChrome.tab.box_shadow") and -moz-bool-pref("userChrome.icon.panel_full")) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include test-module("If not exist pref [mx]") {
|
||||
|
|
@ -50,5 +92,61 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Need multiple test
|
||||
@include test("multiple") {
|
||||
@include assert {
|
||||
@include output {
|
||||
@include option.NotOption("userChrome.tab.photon", "userChrome.padding.photon") {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
@include expect {
|
||||
@supports (not -moz-bool-pref("userChrome.tab.photon")) or (not -moz-bool-pref("userChrome.padding.photon")) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// @include test("simple `and`") {
|
||||
// @include assert {
|
||||
// @include output {
|
||||
// @include option.NotOption("userChrome.tab.photon" "userChrome.padding.photon") {
|
||||
// @include example;
|
||||
// }
|
||||
// }
|
||||
// @include expect {
|
||||
// // top level parens
|
||||
// @supports ((not -moz-bool-pref("userChrome.tab.photon")) and (not -moz-bool-pref("userChrome.padding.photon"))) {
|
||||
// @include example;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@include test("multiple `and`") {
|
||||
@include assert {
|
||||
@include output {
|
||||
@include option.NotOption("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow") {
|
||||
@include example;
|
||||
}
|
||||
@include option.NotOption("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow", "userChrome.icon.panel_full") {
|
||||
@include example;
|
||||
}
|
||||
@include option.NotOption("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow" "userChrome.icon.panel_full") {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
@include expect {
|
||||
@supports ((not -moz-bool-pref("userChrome.tab.photon")) and (not -moz-bool-pref("userChrome.padding.photon"))) or (not -moz-bool-pref("userChrome.tab.box_shadow")) {
|
||||
@include example;
|
||||
}
|
||||
@supports ((not -moz-bool-pref("userChrome.tab.photon")) and (not -moz-bool-pref("userChrome.padding.photon"))) or (not -moz-bool-pref("userChrome.tab.box_shadow")) or (not -moz-bool-pref("userChrome.icon.panel_full")) {
|
||||
@include example;
|
||||
}
|
||||
@supports ((not -moz-bool-pref("userChrome.tab.photon")) and (not -moz-bool-pref("userChrome.padding.photon"))) or ((not -moz-bool-pref("userChrome.tab.box_shadow")) and (not -moz-bool-pref("userChrome.icon.panel_full"))) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
3954
css/leptonChrome.css
3954
css/leptonChrome.css
File diff suppressed because it is too large
Load diff
|
|
@ -242,7 +242,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
} /** Activity Stream - Menu Icons ********************************************/
|
||||
}
|
||||
/** Activity Stream - Menu Icons ********************************************/
|
||||
@supports -moz-bool-pref("userChrome.icon.context_menu") {
|
||||
.context-menu-list .context-menu-item button {
|
||||
padding-inline-start: 0 !important;
|
||||
|
|
@ -458,9 +459,7 @@
|
|||
}
|
||||
/** Error Page - Restore illustrations ****************************************/
|
||||
@supports -moz-bool-pref("userContent.page.illustration") {
|
||||
@-moz-document url-prefix("about:neterror"),
|
||||
url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"),
|
||||
url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml")
|
||||
@-moz-document url-prefix("about:neterror"), url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"), url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml")
|
||||
{
|
||||
/* Illustrations Position */
|
||||
#errorPageContainer,
|
||||
|
|
@ -490,12 +489,7 @@
|
|||
padding-inline-start: 38%;
|
||||
}
|
||||
}
|
||||
@-moz-document url-prefix("about:neterror?e=connectionFailure"),
|
||||
url-prefix("about:neterror?e=netInterrupt"),
|
||||
url-prefix("about:neterror?e=netReset"),
|
||||
url-prefix("about:neterror?e=netTimeout"),
|
||||
url-prefix("about:neterror?e=netOffline"),
|
||||
url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml")
|
||||
@-moz-document url-prefix("about:neterror?e=connectionFailure"), url-prefix("about:neterror?e=netInterrupt"), url-prefix("about:neterror?e=netReset"), url-prefix("about:neterror?e=netTimeout"), url-prefix("about:neterror?e=netOffline"), url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml")
|
||||
{
|
||||
:root {
|
||||
--uc-error-llustration: url(../icons/error-connection-failure.svg);
|
||||
|
|
@ -506,15 +500,12 @@
|
|||
--uc-error-llustration: url(../icons/error-server-not-found.svg);
|
||||
}
|
||||
}
|
||||
@-moz-document url-prefix("about:neterror?e=blockedByPolicy"),
|
||||
url-prefix("about:neterror?e=deniedPortAccess"),
|
||||
url-prefix("about:neterror?e=malformedURI") {
|
||||
@-moz-document url-prefix("about:neterror?e=blockedByPolicy"), url-prefix("about:neterror?e=deniedPortAccess"), url-prefix("about:neterror?e=malformedURI") {
|
||||
:root {
|
||||
--uc-error-llustration: url(chrome://browser/skin/illustrations/error-malformed-url.svg);
|
||||
}
|
||||
}
|
||||
@-moz-document url-prefix("about:neterror?e=clockSkewError"),
|
||||
url-prefix("about:neterror?e=nssFailure") {
|
||||
@-moz-document url-prefix("about:neterror?e=clockSkewError"), url-prefix("about:neterror?e=nssFailure") {
|
||||
:root {
|
||||
--uc-error-llustration: url(../icons/blue-berror.svg);
|
||||
}
|
||||
|
|
@ -566,13 +557,7 @@
|
|||
/** Fully Dark Mode ***********************************************************/
|
||||
/*= Fully Dark Mode - Dark Mode Colors =======================================*/
|
||||
@supports -moz-bool-pref("userContent.page.proton_color") {
|
||||
@-moz-document url-prefix("about:"),
|
||||
url-prefix("chrome://browser/content/places/places.xhtml"),
|
||||
url-prefix("https://addons.mozilla.org"),
|
||||
url-prefix("https://support.mozilla.org"),
|
||||
url-prefix("https://accounts.firefox.com"),
|
||||
url-prefix("view-source"),
|
||||
regexp("^(((jar:)?file:///)|(chrome://)).*/$")
|
||||
@-moz-document url-prefix("about:"), url-prefix("chrome://browser/content/places/places.xhtml"), url-prefix("https://addons.mozilla.org"), url-prefix("https://support.mozilla.org"), url-prefix("https://accounts.firefox.com"), url-prefix("view-source"), regexp("^(((jar:)?file:///)|(chrome://)).*/$")
|
||||
{
|
||||
/*= Default Colors - Hard Coded ==============================================*/
|
||||
/* Based on chrome://global/skin/in-content/common.css */
|
||||
|
|
@ -1660,12 +1645,7 @@
|
|||
/** Fully Proton Mode *********************************************************/
|
||||
@supports -moz-bool-pref("userContent.page.proton") {
|
||||
/*= Common contents ==========================================================*/ /*= abouts' common ===========================================================*/
|
||||
@-moz-document url-prefix("about:plugins"),
|
||||
url-prefix("about:cache"),
|
||||
url-prefix("about:checkerboard"),
|
||||
url-prefix("about:sync-log"),
|
||||
url-prefix("about:memory"),
|
||||
regexp("^(((jar:)?file:///)|(chrome://)).*/$")
|
||||
@-moz-document url-prefix("about:plugins"), url-prefix("about:cache"), url-prefix("about:checkerboard"), url-prefix("about:sync-log"), url-prefix("about:memory"), regexp("^(((jar:)?file:///)|(chrome://)).*/$")
|
||||
{
|
||||
/* Base */
|
||||
html,
|
||||
|
|
@ -1866,16 +1846,13 @@
|
|||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
@-moz-document url-prefix("about:plugins"),
|
||||
url-prefix("about:cache"),
|
||||
url-prefix("about:checkerboard") {
|
||||
@-moz-document url-prefix("about:plugins"), url-prefix("about:cache"), url-prefix("about:checkerboard") {
|
||||
table {
|
||||
border: 1px solid var(--in-content-table-border-color) !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
@-moz-document url-prefix("about:cache"),
|
||||
url-prefix("about:checkerboard") {
|
||||
@-moz-document url-prefix("about:cache"), url-prefix("about:checkerboard") {
|
||||
th,
|
||||
td {
|
||||
border: 1px solid var(--in-content-table-border-color) !important;
|
||||
|
|
@ -1957,8 +1934,7 @@
|
|||
}
|
||||
}
|
||||
/*= Directory View ===========================================================*/
|
||||
@-moz-document url-prefix("about:sync-log"),
|
||||
regexp("^(((jar:)?file:///)|(chrome://)).*/$")
|
||||
@-moz-document url-prefix("about:sync-log"), regexp("^(((jar:)?file:///)|(chrome://)).*/$")
|
||||
{
|
||||
body {
|
||||
background-color: var(--in-content-box-background) !important;
|
||||
|
|
@ -2738,9 +2714,7 @@
|
|||
}
|
||||
/** 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://)).*/$")
|
||||
@-moz-document url-prefix("about:"), url-prefix("chrome://browser/content/places/places.xhtml"), regexp("^(((jar:)?file:///)|(chrome://)).*/$")
|
||||
{
|
||||
* {
|
||||
font-family: -moz-fixed;
|
||||
|
|
@ -2750,8 +2724,8 @@
|
|||
/** Menu - Icons Layout *******************************************************/
|
||||
@supports not -moz-bool-pref("userChrome.icon.disabled") {
|
||||
@supports -moz-bool-pref("userChrome.icon.menu") {
|
||||
@-moz-document url("chrome://browser/content/places/places.xhtml"),
|
||||
url("about:downloads") {
|
||||
@-moz-document url("chrome://browser/content/places/places.xhtml"), url("about:downloads")
|
||||
{
|
||||
menupopup menuitem:not([type="checkbox"][checked="true"], [type="radio"]),
|
||||
menupopup menu:not([type="checkbox"][checked="true"], [type="radio"]) {
|
||||
-moz-appearance: none !important; /* Linux: menulist */
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
* [`-moz-accent-color`](#-moz-accent-color)
|
||||
* [Fork Browsers](#fork-browsers)
|
||||
* [Add-ons](#add-ons)
|
||||
* [SCSS](#scss)
|
||||
- [Internals](#internals)
|
||||
* [CSS Loading Order](#css-loading-order)
|
||||
* [DOM structure cannot be modified](#dom-structure-cannot-be-modified)
|
||||
|
|
@ -126,6 +127,14 @@ Legacy addons can be loaded by [Auto config's feature](./Preference.md#auto-conf
|
|||
List of legacy addons supported by this project:
|
||||
- [Tab Mix Plus](https://github.com/onemen/TabMixPlus)
|
||||
|
||||
### SCSS
|
||||
|
||||
Due to [various compatibility](#firefox-version) and [option dependency](https://github.com/black7375/Firefox-UI-Fix/wiki/Options) requirements, we are using a CSS preprocessor, [SCSS](https://sass-lang.com/).
|
||||
|
||||
[`-moz-document`](https://developer.mozilla.org/en-US/docs/Web/CSS/@document) has been [deprecated in SCSS](https://sass-lang.com/documentation/breaking-changes/moz-document), and displays a lot of warnings.
|
||||
|
||||
Unlike normal cases, this project works because it is [at the UA sheet level](https://bugzilla.mozilla.org/show_bug.cgi?id=1035091), and we have to [hide warnings](https://github.com/black7375/Firefox-UI-Fix/commit/300d3d9c77108520c3757a8898819d8af6a00c62) to show other critical errors.
|
||||
|
||||
## Internals
|
||||
### CSS Loading Order
|
||||
User CSS (`userChrome.css`, `userContent.css`) is usually loaded first.
|
||||
|
|
|
|||
4
icons/panelarrow-vertical-reverse.svg
Normal file
4
icons/panelarrow-vertical-reverse.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="10">
|
||||
<path fill="context-stroke" d="m0 0 10 10L20 0Z"/>
|
||||
<path fill="context-fill" d="m1 0 9 9 9-9z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 172 B |
7
icons/panelarrow-vertical.svg
Normal file
7
icons/panelarrow-vertical.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="10">
|
||||
<path fill="context-stroke" d="M 0,10 L 10,0 20,10 z"/>
|
||||
<path fill="context-fill" d="M 1,10 L 10,1 19,10 z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 397 B |
3
icons/tab-bottom-corner-left-australis-clipped.svg
Normal file
3
icons/tab-bottom-corner-left-australis-clipped.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="47.7, 100" d="M30 0h-1.5C20.286.018 16.736 3.745 15 7.967l.045.105c.18.447.342.9.486 1.36.21.675.392 1.358.547 2.047.101.45.19.899.272 1.337.081.44.154.87.222 1.29.137.837.253 1.625.377 2.335.178 1.01.397 2.01.656 3.002.182.676.393 1.345.631 2.004a17.87 17.87 0 0 0 1.05 2.348c.29.525.612 1.03.966 1.514.344.463.722.9 1.13 1.306a10.525 10.525 0 0 0 1.79 1.414c.674.422 1.392.77 2.14 1.041a15.082 15.082 0 0 0 2.523.673c.47.083.942.148 1.417.195.245.024.494.045.748.062V0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 694 B |
9
icons/tab-bottom-corner-left-australis.svg
Normal file
9
icons/tab-bottom-corner-left-australis.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="46.5, 100" d="M28.5 0C14.55.03 14.046 10.757 13.05 16.442 11.56 24.942 8.125 29.452 0 30h30V0m0 0h-1.5"/>
|
||||
</defs>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" x="-2.2" transform="scale(0.036, 0.0333)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 540 B |
3
icons/tab-bottom-corner-left-chrome-clipped.svg
Normal file
3
icons/tab-bottom-corner-left-chrome-clipped.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="18" height="36" viewBox="0 0 18 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="47 100" d="M18 0a9 9 0 0 0-7.571 4.135 9 9 0 0 0-.617 1.127 9 9 0 0 0-.72 2.457A9 9 0 0 0 9 9v18a9 9 0 0 0 4.135 7.571 9 9 0 0 0 1.127.617 9 9 0 0 0 2.457.72A9 9 0 0 0 18 36V0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 399 B |
9
icons/tab-bottom-corner-left-chrome.svg
Normal file
9
icons/tab-bottom-corner-left-chrome.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="18" height="36" viewBox="0 0 18 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="47 100" d="M18 0a9 9 0 0 0-7.571 4.135 9 9 0 0 0-.617 1.127 9 9 0 0 0-.72 2.457A9 9 0 0 0 9 9v18a9 9 0 0 1-4.135 7.571 9 9 0 0 1-1.127.617 9 9 0 0 1-2.457.72A9 9 0 0 1 0 36h18V0"/>
|
||||
</defs>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" x="-2.5" transform="scale(0.065, 0.0277)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 615 B |
3
icons/tab-bottom-corner-left-chromeLegacy-clipped.svg
Normal file
3
icons/tab-bottom-corner-left-chromeLegacy-clipped.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59 100" d="M36 0h-9l-9 18 9 18h9V0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 258 B |
9
icons/tab-bottom-corner-left-chromeLegacy.svg
Normal file
9
icons/tab-bottom-corner-left-chromeLegacy.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59 100" d="M0 36h9L27 0h9v36z"/>
|
||||
</defs>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" x="-2.5" transform="scale(0.0299, 0.0277)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 468 B |
3
icons/tab-bottom-corner-left-edge-clipped.svg
Normal file
3
icons/tab-bottom-corner-left-edge-clipped.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="32" viewBox="0 0 16 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="44.5, 100" d="M16 0h-4a4 4 0 0 0-3.365 1.838 4 4 0 0 0-.473 1.035A4 4 0 0 0 8 4v24a4 4 0 0 0 1.838 3.365 4 4 0 0 0 1.035.473A4 4 0 0 0 12 32h4V0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 368 B |
9
icons/tab-bottom-corner-left-edge.svg
Normal file
9
icons/tab-bottom-corner-left-edge.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="16" height="32" viewBox="0 0 16 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="37, 100" d="M12 0a4 4 0 0 0-3.365 1.838A4 4 0 0 0 8 4v24a4 4 0 0 1-1.38 3.023A4 4 0 0 1 4 32h12V0m0 0h-4"/>
|
||||
</defs>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" x="-2.5" transform="scale(0.075, 0.0333)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 542 B |
3
icons/tab-bottom-corner-left-wave-clipped.svg
Normal file
3
icons/tab-bottom-corner-left-wave-clipped.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="60, 100" d="M36 0c-6 0-12 0-15 6-1.5 3-2.25 7.5-3 12 .188 1.125.375 2.25.574 3.352.1.55.202 1.096.309 1.632.107.536.219 1.063.336 1.578.117.516.24 1.021.37 1.51.131.49.268.963.415 1.42.146.457.301.898.467 1.317a14.336 14.336 0 0 0 .818 1.736 9.98 9.98 0 0 0 1.695 2.236 9.134 9.134 0 0 0 2.498 1.754c.302.147.61.278.926.397.316.118.639.224.967.318.328.094.66.176 1 .248.34.072.685.133 1.033.186.71.102 1.423.176 2.139.222.363.024.73.042 1.098.055.368.013.739.021 1.11.027C34.5 36 35.25 36 36 36V0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 720 B |
9
icons/tab-bottom-corner-left-wave.svg
Normal file
9
icons/tab-bottom-corner-left-wave.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59.75 100" d="M 0,36 C 6,36 12.001,36 15.0005,30.0005 18,24.001 18,12.001 21.0005,6.0005 24.001,0 30,0 36,0 c 0,0 0,36 0,36 0,0 -36,0 -36,0 z"/>
|
||||
</defs>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" x="-2.5" transform="scale(0.0299, 0.0277)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 580 B |
3
icons/tab-bottom-corner-right-australis-cilpped.svg
Normal file
3
icons/tab-bottom-corner-right-australis-cilpped.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="47, 100" d="M0 0h1.5m0 0C9.714.018 13.264 3.745 15 7.967l-.045.105c-.18.447-.342.9-.486 1.36a26.38 26.38 0 0 0-.547 2.047c-.101.45-.19.899-.272 1.337-.08.44-.154.87-.222 1.29-.137.837-.253 1.625-.377 2.335a38.38 38.38 0 0 1-.305 1.547c-.109.5-.225.986-.351 1.455a25.149 25.149 0 0 1-.631 2.004 17.918 17.918 0 0 1-1.05 2.348 14.16 14.16 0 0 1-.966 1.514c-.344.463-.722.9-1.13 1.306a10.525 10.525 0 0 1-1.79 1.414c-.674.422-1.392.77-2.14 1.041a13.21 13.21 0 0 1-1.213.383c-.432.116-.87.212-1.31.29-.47.083-.942.148-1.417.195-.245.024-.494.045-.748.062V0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 776 B |
9
icons/tab-bottom-corner-right-australis.svg
Normal file
9
icons/tab-bottom-corner-right-australis.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="46.5, 100" d="M0 0h1.5m0 0c13.95.03 14.454 10.757 15.45 16.442C18.44 24.942 21.875 29.452 30 30H0V0"/>
|
||||
</defs>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" transform="scale(0.036, 0.0333)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 528 B |
3
icons/tab-bottom-corner-right-chrome-clipped.svg
Normal file
3
icons/tab-bottom-corner-right-chrome-clipped.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="18" height="36" viewBox="0 0 18 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="47 100" d="M0 0a9 9 0 0 1 7.571 4.135 9 9 0 0 1 .617 1.127 9 9 0 0 1 .72 2.457A9 9 0 0 1 9 9v18a9 9 0 0 1-4.135 7.571 9 9 0 0 1-1.127.617 9 9 0 0 1-2.457.72A9 9 0 0 1 0 36V0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 397 B |
9
icons/tab-bottom-corner-right-chrome.svg
Normal file
9
icons/tab-bottom-corner-right-chrome.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="18" height="36" viewBox="0 0 18 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<path id="tabCorner" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="47 100" fill="context-fill" d="M0 0a9 9 0 0 1 9 9v18a9 9 0 0 0 9 9H0V0"/>
|
||||
</defs>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" transform="scale(0.065, 0.0277)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 479 B |
3
icons/tab-bottom-corner-right-chromeLegacy-clipped.svg
Normal file
3
icons/tab-bottom-corner-right-chromeLegacy-clipped.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59 100" d="M0 0h9l9 18-9 18H0V0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 255 B |
9
icons/tab-bottom-corner-right-chromeLegacy.svg
Normal file
9
icons/tab-bottom-corner-right-chromeLegacy.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<path id="tabCorner" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59 100" fill="context-fill" d="M36 36h-9L9 0H0v36z"/>
|
||||
</defs>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" transform="scale(0.0299, 0.0277)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 460 B |
3
icons/tab-bottom-corner-right-edge-clipped.svg
Normal file
3
icons/tab-bottom-corner-right-edge-clipped.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="32" viewBox="0 0 16 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="44.5, 100" d="M0 0h4a4 4 0 0 1 3.365 1.838 4 4 0 0 1 .473 1.035A4 4 0 0 1 8 4v24a4 4 0 0 1-1.838 3.365 4 4 0 0 1-1.035.473A4 4 0 0 1 4 32H0V0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 365 B |
9
icons/tab-bottom-corner-right-edge.svg
Normal file
9
icons/tab-bottom-corner-right-edge.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="16" height="32" viewBox="0 0 16 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="37, 100" d="M4 0a4 4 0 0 1 3.365 1.838A4 4 0 0 1 8 4v24a4 4 0 0 0 1.838 3.365A4 4 0 0 0 12 32H0V0m0 0h4"/>
|
||||
</defs>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" transform="scale(0.075, 0.0333)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 532 B |
3
icons/tab-bottom-corner-right-wave-clipped.svg
Normal file
3
icons/tab-bottom-corner-right-wave-clipped.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="60, 100" d="M0 0c6 0 12 0 15 6 1.5 3 2.25 7.5 3 12-.188 1.125-.375 2.25-.574 3.352-.1.55-.202 1.096-.309 1.632a60.698 60.698 0 0 1-.336 1.578c-.117.516-.24 1.021-.37 1.51-.131.49-.268.963-.415 1.42a21.2 21.2 0 0 1-.467 1.317 14.336 14.336 0 0 1-.818 1.736 9.98 9.98 0 0 1-1.695 2.236 9.134 9.134 0 0 1-2.498 1.754c-.302.147-.61.278-.926.397-.316.118-.639.224-.967.318-.33.094-.664.177-1 .248-.34.072-.685.133-1.033.186a27.096 27.096 0 0 1-2.139.222c-.363.024-.73.042-1.098.055-.368.013-.739.021-1.11.027C1.5 36 .75 36 0 36V0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 748 B |
9
icons/tab-bottom-corner-right-wave.svg
Normal file
9
icons/tab-bottom-corner-right-wave.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59.75 100" d="M 36,36 C 30,36 23.999,36 20.9995,30.0005 18,24.001 18,12.001 14.9995,6.0005 11.999,0 6,0 0,0 c 0,0 0,36 0,36 0,0 36,0 36,0 z"/>
|
||||
</defs>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" transform="scale(0.0299, 0.0277)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 569 B |
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "Lepton",
|
||||
"version": "5.0.0",
|
||||
"version": "7.0.0",
|
||||
"description": "I respect proton UI and aim to improve it. ",
|
||||
"author": "alstjr7375 <alstjr7375@daum.net>",
|
||||
"license": "MPL 2.0",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
#back-button[disabled="true"] {
|
||||
margin-left: -36px !important;
|
||||
margin-left: var(--uc-toolbarbutton-hide-size) !important;
|
||||
opacity: 0 !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,15 +3,40 @@
|
|||
--uc-autohide-toolbar-delay: 600ms;
|
||||
}
|
||||
|
||||
@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.tabbar.one_liner", "userChrome.hidden.tabbar") {
|
||||
@include Option(
|
||||
"userChrome.autohide.tabbar",
|
||||
"userChrome.autohide.navbar",
|
||||
"userChrome.autohide.bookmarkbar",
|
||||
"userChrome.tabbar.one_liner",
|
||||
"userChrome.tabbar.on_bottom.menubar_on_top",
|
||||
"userChrome.hidden.tabbar",
|
||||
"userChrome.navbar.as_sidebar"
|
||||
) {
|
||||
:root {
|
||||
--uc-tabbar-height: var(--tab-min-height); // calc((var(--tab-block-margin) * 2) + var(--tab-min-height));
|
||||
--uc-tabbar-height: var(--uc-tabbar-height-default);
|
||||
--uc-tabbar-height-default: 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-height: var(--uc-navbar-height-default);
|
||||
--uc-navbar-height-default: 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-height: var(--uc-bm-height-default);
|
||||
--uc-bm-height-default: calc(20px + (2 * var(--bookmark-block-padding, 4px))); /* 20px = 16px + (2px * 2) [margin block] */
|
||||
--uc-bm-hide-height: calc(-1 * var(--uc-bm-height));
|
||||
|
||||
// Mac - None exist
|
||||
// https://github.com/mozilla/gecko-dev/blob/92d3050ecbbdd077ffa4cb78e0dffc4bd5021109/browser/base/content/browser.css#L131
|
||||
// https://github.com/mozilla/gecko-dev/blob/92d3050ecbbdd077ffa4cb78e0dffc4bd5021109/browser/themes/linux/browser.css#L327
|
||||
// https://github.com/mozilla/gecko-dev/blob/92d3050ecbbdd077ffa4cb78e0dffc4bd5021109/browser/themes/windows/browser-aero.css#L14
|
||||
// https://github.com/mozilla/gecko-dev/blob/92d3050ecbbdd077ffa4cb78e0dffc4bd5021109/browser/themes/windows/browser.css#L65
|
||||
$_menubarPadding: 1px * 2; // menubar padding block 1px
|
||||
$_menubarHeightDefault: 1rem + 0.3rem * 2; // text 1rem, menu padding 0.3em
|
||||
--uc-titlebar-buttonbox-height: #{ 32px + $_menubarPadding };
|
||||
--uc-menubar-height: 0px;
|
||||
--uc-menubar-height-default: #{ calc($_menubarHeightDefault + $_menubarPadding) };
|
||||
--uc-menubar-inner-height: #{ calc($_menubarHeightDefault - $_menubarPadding) };
|
||||
|
||||
@include Option("userChrome.hidden.tabbar") {
|
||||
@include OneLinerNavbarContent() {
|
||||
--uc-tabbar-height: 0px;
|
||||
|
|
@ -22,13 +47,57 @@
|
|||
}
|
||||
}
|
||||
@include Has {
|
||||
:root {
|
||||
&:not([tabsintitlebar]):has(#toolbar-menubar) {
|
||||
--uc-menubar-height: var(--uc-menubar-height-default); // text 1rem, menu padding 0.3em
|
||||
}
|
||||
|
||||
&[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) {
|
||||
@include OS($linux) {
|
||||
--uc-menubar-height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin));
|
||||
}
|
||||
@include OS($win10) {
|
||||
--uc-menubar-height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size));
|
||||
}
|
||||
@include OS($win7, $win8) {
|
||||
--uc-menubar-height: calc(var(--tab-min-height) + var(--tab-block-margin));
|
||||
}
|
||||
}
|
||||
&[tabsintitlebar]:has(#toolbar-menubar[autohide="false"]) {
|
||||
--uc-menubar-height: var(--uc-titlebar-buttonbox-height);
|
||||
}
|
||||
|
||||
&:not([tabsintitlebar]),
|
||||
&[tabsintitlebar] {
|
||||
&:has(#toolbar-menubar[autohide="true"][inactive="true"]) {
|
||||
--uc-menubar-height: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#navigator-toolbox:has(#PersonalToolbar[collapsed="true"]) {
|
||||
--uc-bm-height: 0px;
|
||||
}
|
||||
|
||||
@include Option("userChrome.navbar.as_sidebar") {
|
||||
#navigator-toolbox:has(#PersonalToolbar[collapsed="false"]) #nav-bar {
|
||||
--uc-bm-height: var(--uc-bm-height-default); // Re-calculate to force!!
|
||||
}
|
||||
@include Option("userChrome.autohide.bookmarkbar") {
|
||||
#navigator-toolbox:has(#PersonalToolbar[collapsed="false"]):not(:hover) #nav-bar {
|
||||
--uc-bm-height: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.autohide.infobar") {
|
||||
@include Option(
|
||||
"userChrome.autohide.tabbar",
|
||||
"userChrome.autohide.navbar",
|
||||
"userChrome.autohide.bookmarkbar",
|
||||
"userChrome.autohide.infobar"
|
||||
) {
|
||||
#navigator-toolbox {
|
||||
position: relative;
|
||||
&:is(:hover, :focus-within) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
#forward-button[disabled="true"] {
|
||||
margin-left: -36px !important;
|
||||
margin-left: var(--uc-toolbarbutton-hide-size) !important;
|
||||
opacity: 0 !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
@include Option("userChrome.autohide.back_button", "userChrome.autohide.forward_button") {
|
||||
:root {
|
||||
--uc-toolbarbutton-hide-size: calc(-1 * (16px + (2 * var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding))));
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.autohide.back_button") {
|
||||
@import "back_button";
|
||||
}
|
||||
|
|
|
|||
3
src/bookmarkbar/_index.scss
Normal file
3
src/bookmarkbar/_index.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@include Option("userChrome.bookmarkbar.multi_row") {
|
||||
@import "_multi_row";
|
||||
}
|
||||
34
src/bookmarkbar/_multi_row.scss
Normal file
34
src/bookmarkbar/_multi_row.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
// Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_bookmarks.css made available under Mozilla Public License v. 2.0
|
||||
// See the above repository for updates as well as full license text.
|
||||
|
||||
#PersonalToolbar {
|
||||
--uc-multirow-bookmark-rows: 3;
|
||||
--uc-multirow-bookmark-row-margin: 2px;
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
#PlacesToolbar > hbox {
|
||||
display: block;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
#PlacesToolbarItems {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow-y: auto;
|
||||
scroll-snap-type: y mandatory;
|
||||
max-height: calc(var(--uc-multirow-bookmark-rows) *
|
||||
(var(--uc-bm-height, calc(20px + (2 * var(--bookmark-block-padding, 4px)))) +
|
||||
(2 * var(--uc-multirow-bookmark-row-margin)))) !important;
|
||||
}
|
||||
|
||||
// Hide the all-bookmarks button
|
||||
#PlacesChevron {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Add some spacing between rows
|
||||
#PlacesToolbarItems > .bookmark-item {
|
||||
scroll-snap-align: start;
|
||||
margin-block: var(--uc-multirow-bookmark-row-margin) !important;
|
||||
}
|
||||
125
src/combined/_back_forward_button.scss
Normal file
125
src/combined/_back_forward_button.scss
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
//-- Mixin ---------------------------------------------------------------------
|
||||
@import "combined_circle_button";
|
||||
|
||||
@mixin _combined_nav_button_background($autohideOptionName) {
|
||||
> .toolbarbutton-icon {
|
||||
@include circle_button_background;
|
||||
}
|
||||
&:not([disabled], [open]):hover > .toolbarbutton-icon {
|
||||
@include circle_button_background_hover;
|
||||
}
|
||||
&[open] > .toolbarbutton-icon,
|
||||
&:not([disabled]):hover:active > .toolbarbutton-icon {
|
||||
@include circle_button_background_active;
|
||||
}
|
||||
|
||||
&[disabled="true"] {
|
||||
> .toolbarbutton-icon {
|
||||
background-color: color-mix(in srgb, var(--toolbarbutton-hover-background), var(--toolbar-field-background-color) 40%) !important;
|
||||
fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%);
|
||||
}
|
||||
@include NotOption($autohideOptionName) {
|
||||
&[disabled="true"] {
|
||||
opacity: 1 !important; /* Original: 0.4 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin _combined_forward_button_background() {
|
||||
@include _combined_nav_button_background("userChrome.autohide.forward_button");
|
||||
}
|
||||
@mixin _combined_back_button_background() {
|
||||
@include _combined_nav_button_background("userChrome.autohide.back_button");
|
||||
}
|
||||
|
||||
@mixin _back_button_circle_shape() {
|
||||
@include circle_button_shape($backButton: true);
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
#nav-bar-customization-target > {
|
||||
@supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") or
|
||||
(not (-moz-bool-pref("userChrome.combined.sub_button.as_normal") and
|
||||
-moz-bool-pref("userChrome.combined.nav_button") and
|
||||
-moz-bool-pref("userChrome.combined.urlbar.home_button")
|
||||
)) {
|
||||
#forward-button {
|
||||
--uc-forward-button-margin: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px);
|
||||
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
|
||||
> .toolbarbutton-icon {
|
||||
padding-inline-end: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */
|
||||
padding-block: var(--urlbar-icon-padding) !important;
|
||||
height: var(--uc-urlbar-icon-size) !important;
|
||||
}
|
||||
|
||||
@include Option("userChrome.combined.urlbar.nav_button") {
|
||||
padding-inline-end: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */
|
||||
}
|
||||
@include NotOption("userChrome.combined.urlbar.nav_button") {
|
||||
@include NotOption("userChrome.combined.sub_button.none_background") {
|
||||
@include Option("userChrome.combined.urlbar.home_button") {
|
||||
@include NotOption("userChrome.combined.nav_button.home_button") {
|
||||
@include _combined_forward_button_background;
|
||||
}
|
||||
}
|
||||
@include NotOption("userChrome.combined.urlbar.home_button") {
|
||||
@include _combined_forward_button_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include NotOption("userChrome.autohide.forward_button") {
|
||||
margin-inline-start: var(--uc-forward-button-margin) !important;
|
||||
}
|
||||
@include Option("userChrome.autohide.forward_button") {
|
||||
&:not([disabled="true"]) {
|
||||
margin-inline-start: var(--uc-forward-button-margin) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#back-button {
|
||||
position: relative;
|
||||
|
||||
@include NotOption("userChrome.combined.urlbar.home_button") {
|
||||
@include NotOption("userChrome.combined.nav_button.home_button") {
|
||||
@include _combined_back_button_background;
|
||||
}
|
||||
}
|
||||
@include Option(
|
||||
"userChrome.combined.nav_button.home_button",
|
||||
"userChrome.combined.urlbar.home_button"
|
||||
) {
|
||||
z-index: 2;
|
||||
|
||||
@include NotOption("userChrome.combined.sub_button.as_normal") {
|
||||
margin-inline-end: calc(-1 * var(--uc-toolbarbutton-boundary) - 1px) !important;
|
||||
|
||||
@include NotOption("userChrome.combined.sub_button.none_background") {
|
||||
@include _combined_back_button_background;
|
||||
}
|
||||
> .toolbarbutton-icon {
|
||||
padding-inline-start: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */
|
||||
padding-block: var(--urlbar-icon-padding) !important;
|
||||
height: var(--uc-urlbar-icon-size) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include NotOption("userChrome.combined.nav_button.home_button") {
|
||||
@include Option("userChrome.combined.urlbar.nav_button") {
|
||||
@include NotOption("userChrome.combined.urlbar.home_button") {
|
||||
@include _back_button_circle_shape;
|
||||
}
|
||||
}
|
||||
@include NotOption("userChrome.combined.urlbar.nav_button") {
|
||||
@include _back_button_circle_shape;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
62
src/combined/_combined_circle_button.scss
Normal file
62
src/combined/_combined_circle_button.scss
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
@mixin circle_button_shape($backButton: false) {
|
||||
z-index: 3 !important;
|
||||
|
||||
background-color: var(--toolbar-bgcolor) !important;
|
||||
background-clip: content-box !important;
|
||||
border-radius: 100%;
|
||||
|
||||
padding-block: 0 !important;
|
||||
|
||||
@include Option("userChrome.padding.toolbar_button") {
|
||||
@include Option("userChrome.padding.toolbar_button.compact") {
|
||||
--toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default);
|
||||
}
|
||||
}
|
||||
|
||||
@if $backButton {
|
||||
@include NotOption("userChrome.autohide.back_button") {
|
||||
padding-inline-end: 0 !important;
|
||||
}
|
||||
@include Option("userChrome.autohide.back_button") {
|
||||
&:not([disabled="true"]) {
|
||||
padding-inline-end: 0 !important;
|
||||
}
|
||||
&[disabled="true"] {
|
||||
padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@else {
|
||||
padding-inline-end: 0 !important;
|
||||
}
|
||||
|
||||
> menupopup {
|
||||
margin-top: -1px !important;
|
||||
}
|
||||
|
||||
> .toolbarbutton-icon {
|
||||
@if not $backButton {
|
||||
@include circle_button_background;
|
||||
}
|
||||
background-origin: padding-box;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid var(--uc-combined-circlebutton-border-color);
|
||||
border-radius: 10000px !important;
|
||||
|
||||
padding-inline-end: var(--urlbar-icon-padding) !important;
|
||||
height: auto !important
|
||||
}
|
||||
}
|
||||
|
||||
@mixin circle_button_background() {
|
||||
background-color: var(--uc-combined-circlebutton-background);
|
||||
}
|
||||
@mixin circle_button_background_hover() {
|
||||
background-color: var(--uc-combined-circlebutton-hover-background) !important;
|
||||
box-shadow: 0 1px 6px hsla(0,0%,0%,.1);
|
||||
border-color: hsla(240,5%,5%,.35);
|
||||
}
|
||||
@mixin circle_button_background_active() {
|
||||
background-color: var(--uc-combined-circlebutton-active-background) !important;
|
||||
border-color: hsla(240,5%,5%,.40);
|
||||
}
|
||||
13
src/combined/_home_button.scss
Normal file
13
src/combined/_home_button.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
@import "combined_circle_button";
|
||||
|
||||
#nav-bar-customization-target > #home-button {
|
||||
position: relative;
|
||||
@include circle_button_shape;
|
||||
|
||||
&:hover > .toolbarbutton-icon {
|
||||
@include circle_button_background_hover;
|
||||
}
|
||||
&:hover:active > .toolbarbutton-icon {
|
||||
@include circle_button_background_active;
|
||||
}
|
||||
}
|
||||
152
src/combined/_index.scss
Normal file
152
src/combined/_index.scss
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
/*= Combined - At URL bar ====================================================*/
|
||||
@include Option(
|
||||
"userChrome.combined.nav_button",
|
||||
"userChrome.combined.nav_button.home_button",
|
||||
"userChrome.combined.urlbar.nav_button",
|
||||
"userChrome.combined.urlbar.home_button",
|
||||
"userChrome.combined.urlbar.reload_button"
|
||||
) {
|
||||
// Init
|
||||
#nav-bar {
|
||||
// Color
|
||||
--uc-combined-circlebutton-background: hsla(0,100%,100%,.5);
|
||||
--uc-combined-circlebutton-hover-background: var(--uc-combined-circlebutton-background);
|
||||
--uc-combined-circlebutton-active-background: var(--toolbarbutton-active-background);
|
||||
--uc-combined-circlebutton-border-color: hsla(240,5%,5%,.3);
|
||||
&[brighttext] {
|
||||
// Original: Using :-moz-lwtheme
|
||||
--uc-combined-circlebutton-background: var(--toolbarbutton-hover-background);
|
||||
--uc-combined-circlebutton-hover-background: var(--toolbarbutton-active-background);
|
||||
--uc-combined-circlebutton-active-background: color-mix(in srgb, currentColor 20%, transparent);
|
||||
}
|
||||
|
||||
// Padding & Size
|
||||
--uc-toolbarbutton-boundary: calc(var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding));
|
||||
--uc-toolbarbutton-padding: calc(2 * var(--uc-toolbarbutton-boundary));
|
||||
--uc-toolbarbutton-size: calc(12px + var(--uc-toolbarbutton-padding));
|
||||
--uc-toolbarbutton-halfsize: calc(6px + var(--uc-toolbarbutton-boundary));
|
||||
|
||||
--uc-urlbar-icon-size: calc(16px + 2 * var(--urlbar-icon-padding));
|
||||
}
|
||||
|
||||
#nav-bar-customization-target > * {
|
||||
-moz-box-ordinal-group: 1;
|
||||
}
|
||||
// Preserve
|
||||
// `back` -> 2
|
||||
// `home` -> 3
|
||||
// `forward` -> 4
|
||||
#nav-bar-customization-target > #urlbar-container {
|
||||
-moz-box-ordinal-group: 5;
|
||||
}
|
||||
// `reload` -> 6
|
||||
#nav-bar-customization-target > #urlbar-container ~ * {
|
||||
-moz-box-ordinal-group: 7;
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.combined.urlbar.nav_button", "userChrome.combined.urlbar.home_button") {
|
||||
#nav-bar-customization-target > #urlbar-container {
|
||||
/* var(--urlbar-margin-inline) */
|
||||
margin-inline-start: calc(-1 * var(--uc-urlbar-combined-margin, 0px)) !important;
|
||||
|
||||
> #urlbar:not([breakout][breakout-extend]) {
|
||||
padding-left: var(--uc-urlbar-combined-margin, 0px);
|
||||
}
|
||||
|
||||
@include Option("userChrome.combined.urlbar.nav_button") {
|
||||
--uc-urlbar-combined-margin: var(--uc-toolbarbutton-size);
|
||||
}
|
||||
@include NotOption("userChrome.combined.urlbar.nav_button") {
|
||||
--uc-urlbar-combined-margin: var(--uc-toolbarbutton-halfsize);
|
||||
|
||||
@include Option("userChrome.combined.nav_button") {
|
||||
@include Option("userChrome.combined.nav_button.home_button") {
|
||||
@include Option("userChrome.combined.urlbar.home_button") {
|
||||
--uc-urlbar-combined-margin: var(--uc-toolbarbutton-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#nav-bar-customization-target > #forward-button[disabled="true"] ~ #urlbar-container > #urlbar {
|
||||
@include Option("userChrome.combined.urlbar.nav_button") {
|
||||
@include Option("userChrome.autohide.forward_button") {
|
||||
&:not([breakout][breakout-extend]) {
|
||||
padding-left: calc(var(--uc-urlbar-combined-margin, 0px) - var(--urlbar-icon-padding));
|
||||
}
|
||||
}
|
||||
@include Animate {
|
||||
transition-property: margin-left, padding-left;
|
||||
transition-duration: 0.5s;
|
||||
transition-timing-function: var(--animation-easing-function);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.combined.nav_button", "userChrome.combined.urlbar.nav_button") {
|
||||
@import "back_forward_button";
|
||||
}
|
||||
@include Option("userChrome.combined.nav_button") {
|
||||
@include Option("userChrome.combined.nav_button.home_button") {
|
||||
@import "home_button";
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.combined.urlbar.nav_button") {
|
||||
#nav-bar-customization-target > {
|
||||
#back-button {
|
||||
-moz-box-ordinal-group: 2;
|
||||
}
|
||||
#forward-button {
|
||||
-moz-box-ordinal-group: 4;
|
||||
}
|
||||
|
||||
$button: ":is(toolbarbutton, toolbaritem)";
|
||||
@include Option("userChrome.combined.urlbar.home_button") {
|
||||
$combindButtons: "#back-button, #forward-button, #home-button";
|
||||
$target: ":is(#{$combindButtons})";
|
||||
$notTarget: "#{$button}:not(#{$combindButtons})";
|
||||
|
||||
:first-child#{$target} + {
|
||||
#{$notTarget},
|
||||
#{$target} + #{$notTarget},
|
||||
#{$target} + #{$target} + #{$button} {
|
||||
padding-inline-start: var(--toolbar-start-end-padding) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include NotOption("userChrome.combined.urlbar.home_button") {
|
||||
$combindButtons: "#back-button, #forward-button";
|
||||
$target: ":is(#{$combindButtons})";
|
||||
$notTarget: "#{$button}:not(#{$combindButtons})";
|
||||
|
||||
:first-child#{$target} + {
|
||||
#{$notTarget},
|
||||
#{$target} + #{$button} {
|
||||
padding-inline-start: var(--toolbar-start-end-padding) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.combined.urlbar.home_button") {
|
||||
#nav-bar-customization-target > #home-button {
|
||||
-moz-box-ordinal-group: 3;
|
||||
|
||||
@include NotOption("userChrome.combined.urlbar.nav_button") {
|
||||
&:is(:first-child) + :is(toolbarbutton, toolbaritem) {
|
||||
padding-inline-start: var(--toolbar-start-end-padding) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "home_button";
|
||||
}
|
||||
@include Option("userChrome.combined.urlbar.reload_button") {
|
||||
#nav-bar-customization-target > #stop-reload-button {
|
||||
-moz-box-ordinal-group: 6;
|
||||
}
|
||||
|
||||
@import "reload_button";
|
||||
}
|
||||
22
src/combined/_reload_button.scss
Normal file
22
src/combined/_reload_button.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
// Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/reload_button_in_urlbar.css made available under Mozilla Public License v. 2.0
|
||||
// See the above repository for updates as well as full license text.
|
||||
#urlbar {
|
||||
padding-right: calc(var(--uc-toolbarbutton-size) - (var(--urlbar-margin-inline) / 2));
|
||||
}
|
||||
|
||||
#nav-bar-customization-target > #stop-reload-button {
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
|
||||
--toolbarbutton-hover-background: var(--urlbar-box-hover-bgcolor);
|
||||
color: var(--urlbar-box-hover-text-color) !important;
|
||||
|
||||
margin-left: calc( -1 * (var(--uc-toolbarbutton-size) + var(--urlbar-margin-inline)));
|
||||
}
|
||||
|
||||
#nav-bar-customization-target > #stop-reload-button > .toolbarbutton-1 > .toolbarbutton-icon {
|
||||
width: var(--uc-urlbar-icon-size) !important;
|
||||
height: var(--uc-urlbar-icon-size) !important;
|
||||
|
||||
padding: var(--urlbar-icon-padding) !important;
|
||||
}
|
||||
|
|
@ -89,8 +89,8 @@
|
|||
|
||||
//-- Mixin ---------------------------------------------------------------------
|
||||
@mixin _os_menuEmulate($bgRate, $bdRate) {
|
||||
menupopup:not(#BMB_bookmarksPopup) menu[_moz-menuactive="true"],
|
||||
menupopup:not(#BMB_bookmarksPopup) menuitem[_moz-menuactive="true"] {
|
||||
menu[_moz-menuactive="true"],
|
||||
menuitem[_moz-menuactive="true"] {
|
||||
background-color: color-mix(in srgb, -moz-menuhover $bgRate, transparent) !important;
|
||||
border-color: color-mix(in srgb, -moz-menuhover $bdRate, transparent) !important;
|
||||
|
||||
|
|
@ -127,12 +127,15 @@
|
|||
@include Win10_NativeMenu() {
|
||||
menu[_moz-menuactive="true"],
|
||||
menuitem[_moz-menuactive="true"] {
|
||||
background-color: #91c9f7 !important; // color-mix(in srgb, -moz-menuhover 40%, transparent)
|
||||
border-color: transparent !important;
|
||||
|
||||
&[disabled="true"] {
|
||||
background-color: color-mix(in srgb, currentColor 9%, transparent) !important;
|
||||
menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) &,
|
||||
menupopup:not([placespopup="true"]) & {
|
||||
background-color: #91c9f7 !important; // color-mix(in srgb, -moz-menuhover 40%, transparent)
|
||||
border-color: transparent !important;
|
||||
|
||||
&[disabled="true"] {
|
||||
background-color: color-mix(in srgb, currentColor 9%, transparent) !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -83,7 +83,8 @@ menu {
|
|||
}
|
||||
|
||||
/*= Tab Separator Color ======================================================*/
|
||||
#TabsToolbar {
|
||||
#TabsToolbar,
|
||||
#nav-bar {
|
||||
--toolbarseparator-color: color-mix(in srgb, currentColor 20%, transparent); /* 60% at v105 */
|
||||
}
|
||||
|
||||
|
|
@ -115,8 +116,8 @@ menu {
|
|||
|
||||
/* Navbar Border */
|
||||
#navigator-toolbox:-moz-lwtheme {
|
||||
--tabs-border-color: rgba(0, 0, 0, 0.3); /* Legacy: v96 */
|
||||
--lwt-tabs-border-color: rgba(0, 0, 0, 0.3);
|
||||
--tabs-border-color: rgba(0, 0, 0, 0.4); /* Legacy: v96, (0, 0, 0, 0.3) -> (0, 0, 0, 0.4) */
|
||||
--lwt-tabs-border-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/*= Findbar Border Color =====================================================*/
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@-moz-document url("about:home"), url("about:newtab") {
|
||||
@include moz-document(url "about:home", url "about:newtab") {
|
||||
/** Activity Stream - Search Focus Border: like URL *************************/
|
||||
@include Option("userContent.page.field_border") {
|
||||
/* At DarkMode, Color */
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
@-moz-document url("chrome://browser/content/places/places.xhtml"),
|
||||
url("about:downloads") {
|
||||
@include moz-document(
|
||||
url "chrome://browser/content/places/places.xhtml",
|
||||
url "about:downloads"
|
||||
) {
|
||||
@import "../icons/layout/menu_contents";
|
||||
|
||||
/*= Context Menu ===========================================================*/
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@-moz-document url-prefix("about:downloads") {
|
||||
@include moz-document(url-prefix "about:downloads") {
|
||||
@include Animate {
|
||||
@include Option("userChrome.decoration.download_panel") {
|
||||
@import "../decoration/download_panel";
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
@-moz-document url-prefix("about:neterror"),
|
||||
url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"),
|
||||
url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml")
|
||||
{
|
||||
@include moz-document(
|
||||
url-prefix "about:neterror",
|
||||
url "about:restartrequired",
|
||||
url "chrome://browser/content/aboutRestartRequired.xhtml",
|
||||
url "about:sessionrestore",
|
||||
url "chrome://browser/content/aboutSessionRestore.xhtml"
|
||||
) {
|
||||
/* Illustrations Position */
|
||||
#errorPageContainer,
|
||||
.neterror > .container,
|
||||
|
|
@ -66,50 +69,53 @@
|
|||
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
@-moz-document url-prefix("about:neterror?e=connectionFailure"),
|
||||
url-prefix("about:neterror?e=netInterrupt"),
|
||||
url-prefix("about:neterror?e=netReset"),
|
||||
url-prefix("about:neterror?e=netTimeout"),
|
||||
url-prefix("about:neterror?e=netOffline"),
|
||||
url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml")
|
||||
{
|
||||
@include moz-document(
|
||||
url-prefix "about:neterror?e=connectionFailure",
|
||||
url-prefix "about:neterror?e=netInterrupt",
|
||||
url-prefix "about:neterror?e=netReset",
|
||||
url-prefix "about:neterror?e=netTimeout",
|
||||
url-prefix "about:neterror?e=netOffline",
|
||||
url "about:restartrequired",
|
||||
url "chrome://browser/content/aboutRestartRequired.xhtml"
|
||||
) {
|
||||
@include _errorContainerImage("../icons/error-connection-failure.svg");
|
||||
}
|
||||
@-moz-document url-prefix("about:neterror?e=dnsNotFound") {
|
||||
@include moz-document(url-prefix "about:neterror?e=dnsNotFound") {
|
||||
@include _errorContainerImage("../icons/error-server-not-found.svg");
|
||||
}
|
||||
@-moz-document url-prefix("about:neterror?e=blockedByPolicy"),
|
||||
url-prefix("about:neterror?e=deniedPortAccess"),
|
||||
url-prefix("about:neterror?e=malformedURI") {
|
||||
@include moz-document(
|
||||
url-prefix "about:neterror?e=blockedByPolicy",
|
||||
url-prefix "about:neterror?e=deniedPortAccess",
|
||||
url-prefix "about:neterror?e=malformedURI"
|
||||
) {
|
||||
@include _errorContainerImage("chrome://browser/skin/illustrations/error-malformed-url.svg");
|
||||
}
|
||||
@-moz-document url-prefix("about:neterror?e=clockSkewError"),
|
||||
url-prefix("about:neterror?e=nssFailure") {
|
||||
@include moz-document(
|
||||
url-prefix "about:neterror?e=clockSkewError",
|
||||
url-prefix "about:neterror?e=nssFailure"
|
||||
) {
|
||||
@include _errorContainerImage("../icons/blue-berror.svg") {
|
||||
background-size: 18.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-document url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml")
|
||||
{
|
||||
@include moz-document(url "about:sessionrestore" , url "chrome://browser/content/aboutSessionRestore.xhtml") {
|
||||
@include _errorDescriptionImage("../icons/error-session-restore.svg");
|
||||
}
|
||||
|
||||
@-moz-document url-prefix("about:neterror?e=fileNotFound") {
|
||||
@include moz-document(url-prefix "about:neterror?e=fileNotFound") {
|
||||
@include _errorTitleImage("chrome://global/skin/icons/info.svg");
|
||||
|
||||
#text-container {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
@-moz-document url-prefix("about:tabcrashed") {
|
||||
@include moz-document(url-prefix "about:tabcrashed") {
|
||||
@include _errorTitleImage("chrome://browser/skin/tab-crashed.svg");
|
||||
}
|
||||
@-moz-document url("about:robots"), url("chrome://browser/content/aboutRobots.xhtml")
|
||||
{
|
||||
@include moz-document(url "about:robots", url "chrome://browser/content/aboutRobots.xhtml") {
|
||||
@include _errorTitleImage("chrome://browser/content/aboutRobots-icon.png");
|
||||
}
|
||||
@-moz-document url("about:welcomeBack"), url("chrome://browser/content/aboutWelcomeBack.xhtml")
|
||||
{
|
||||
@include moz-document(url "about:welcomeBack", url "chrome://browser/content/aboutWelcomeBack.xhtml") {
|
||||
@include _errorTitleImage("../icons/welcome-back.svg");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
@-moz-document url-prefix("about:"),
|
||||
url-prefix("chrome://browser/content/places/places.xhtml"),
|
||||
regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
|
||||
@include moz-document(
|
||||
url-prefix "about:",
|
||||
url-prefix "chrome://browser/content/places/places.xhtml",
|
||||
regexp "^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$"
|
||||
) {
|
||||
@import "../theme/monospace";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
@-moz-document url-prefix("about:"),
|
||||
url-prefix("chrome://browser/content/places/places.xhtml"),
|
||||
url-prefix("https://addons.mozilla.org"),
|
||||
url-prefix("https://support.mozilla.org"),
|
||||
url-prefix("https://accounts.firefox.com"),
|
||||
url-prefix("view-source"),
|
||||
regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
|
||||
@include moz-document(
|
||||
url-prefix "about:",
|
||||
url-prefix "chrome://browser/content/places/places.xhtml",
|
||||
url-prefix "https://addons.mozilla.org",
|
||||
url-prefix "https://support.mozilla.org",
|
||||
url-prefix "https://accounts.firefox.com",
|
||||
url-prefix "view-source",
|
||||
regexp "^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$"
|
||||
) {
|
||||
@import "../theme/proton_color";
|
||||
|
||||
@include Option("userContent.page.proton_color.dark_blue_accent") {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/*= Accounts.com ===========================================================*/
|
||||
@-moz-document url-prefix("https://accounts.firefox.com")
|
||||
{
|
||||
@include moz-document(url-prefix "https://accounts.firefox.com") {
|
||||
/* Basic */
|
||||
body {
|
||||
color: var(--in-content-page-color) !important;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/*= Addons.org =============================================================*/
|
||||
@-moz-document url-prefix("https://addons.mozilla.org")
|
||||
{
|
||||
@include moz-document(url-prefix "https://addons.mozilla.org") {
|
||||
/* Basic */
|
||||
.Page-content,
|
||||
.SecondaryHero,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/*= Support.org ============================================================*/
|
||||
@-moz-document url-prefix("https://support.mozilla.org")
|
||||
{
|
||||
@include moz-document(url-prefix "https://support.mozilla.org") {
|
||||
/* Basic */
|
||||
:root {
|
||||
--color-blue-06: var(--in-content-link-color) !important;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@-moz-document url-prefix("about:cache") {
|
||||
@include moz-document(url-prefix "about:cache") {
|
||||
table {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@-moz-document url-prefix("about:checkerboard") {
|
||||
@include moz-document(url-prefix "about:checkerboard") {
|
||||
#canvas {
|
||||
border: 1px solid var(--in-content-border-color) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@-moz-document url-prefix("about:memory") {
|
||||
@include moz-document(url-prefix "about:memory") {
|
||||
.opsRow,
|
||||
.section {
|
||||
background-color: var(--in-content-box-background) !important;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@-moz-document url-prefix("about:plugins") {
|
||||
@include moz-document(url-prefix "about:plugins") {
|
||||
.notice {
|
||||
background: var(--in-content-box-background) !important;
|
||||
border: 1px solid var(--in-content-border-color) !important;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
@-moz-document url-prefix("about:sync-log"),
|
||||
regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
|
||||
@include moz-document(
|
||||
url-prefix "about:sync-log",
|
||||
regexp "^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$"
|
||||
) {
|
||||
body {
|
||||
background-color: var(--in-content-box-background) !important;
|
||||
margin: 4em auto !important; /* Override to default */
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@-moz-document url-prefix("about:") {
|
||||
@include moz-document(url-prefix "about:") {
|
||||
html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):not(#newtab-search-text):hover,
|
||||
html|textarea:hover,
|
||||
xul|search-textbox:hover {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
/*= abouts' common ===========================================================*/
|
||||
@-moz-document url-prefix("about:plugins"),
|
||||
url-prefix("about:cache"),
|
||||
url-prefix("about:checkerboard"),
|
||||
url-prefix("about:sync-log"),
|
||||
url-prefix("about:memory"),
|
||||
regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
|
||||
@include moz-document(
|
||||
url-prefix "about:plugins",
|
||||
url-prefix "about:cache",
|
||||
url-prefix "about:checkerboard",
|
||||
url-prefix "about:sync-log",
|
||||
url-prefix "about:memory",
|
||||
regexp "^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$"
|
||||
) {
|
||||
/* Base */
|
||||
html,
|
||||
body {
|
||||
|
|
@ -211,16 +213,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
@-moz-document url-prefix("about:plugins"),
|
||||
url-prefix("about:cache"),
|
||||
url-prefix("about:checkerboard") {
|
||||
@include moz-document(
|
||||
url-prefix "about:plugins",
|
||||
url-prefix "about:cache",
|
||||
url-prefix "about:checkerboard"
|
||||
) {
|
||||
table {
|
||||
border: 1px solid var(--in-content-table-border-color) !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
@-moz-document url-prefix("about:cache"),
|
||||
url-prefix("about:checkerboard") {
|
||||
@include moz-document(
|
||||
url-prefix "about:cache",
|
||||
url-prefix "about:checkerboard"
|
||||
) {
|
||||
th,
|
||||
td {
|
||||
border: 1px solid var(--in-content-table-border-color) !important;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@-moz-document url-prefix("view-source") {
|
||||
@include moz-document(url-prefix "view-source") {
|
||||
:root {
|
||||
background-color: var(--in-content-page-background) !important; /* Original: white */
|
||||
color: var(--in-content-page-color) !important; /* Original: black */
|
||||
|
|
|
|||
17
src/counter/_bookmark_menu.scss
Normal file
17
src/counter/_bookmark_menu.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
menupopup[placespopup="true"] > menu.bookmark-item > .menu-right {
|
||||
counter-reset: bookmark-counts 0;
|
||||
}
|
||||
menupopup[placespopup="true"] > menu.bookmark-item::after {
|
||||
display: -moz-inline-box;
|
||||
content: "(" counter(bookmark-counts) ")";
|
||||
}
|
||||
|
||||
menupopup[placespopup="true"] > menu.bookmark-item > .menu-iconic-highlightable-text,
|
||||
menupopup[placespopup="true"] > menu.bookmark-item > .menu-accel-container,
|
||||
menupopup[placespopup="true"] > menu.bookmark-item > .menu-right {
|
||||
-moz-box-ordinal-group: 2;
|
||||
}
|
||||
|
||||
menu.bookmark-item > menupopup[placespopup="true"] > .bookmark-item {
|
||||
counter-increment: bookmark-counts;
|
||||
}
|
||||
9
src/counter/_index.scss
Normal file
9
src/counter/_index.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
/*= Counter for Tab ==========================================================*/
|
||||
@include Option("userChrome.counter.tab") {
|
||||
@import "tab";
|
||||
}
|
||||
|
||||
/*= Counter for Bookmark menu ================================================*/
|
||||
@include Option("userChrome.counter.bookmark_menu") {
|
||||
@import "bookmark_menu";
|
||||
}
|
||||
100
src/counter/_tab.scss
Normal file
100
src/counter/_tab.scss
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
//-- Mixin ---------------------------------------------------------------------
|
||||
@mixin _tab_counter_without_centered() {
|
||||
@include Option("userChrome.centered.tab") {
|
||||
@include NotOption("userChrome.centered.tab.label") {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@include NotOption("userChrome.centered.tab") {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Copy from "../tab/sound_tab/show_with_favicons"
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
#tabbrowser-tabs {
|
||||
counter-reset: tab-counts;
|
||||
}
|
||||
|
||||
.tabbrowser-tab:not([hidden="true"]) {
|
||||
counter-increment: tab-counts;
|
||||
|
||||
// https://www.designcise.com/web/tutorial/how-to-add-space-before-or-after-an-element-using-css-pseudo-elements
|
||||
&[pinned="true"] .tab-label-container::before {
|
||||
content: "\00a0" counter(tab-counts);
|
||||
}
|
||||
&:not([pinned="true"]) .tab-label-container::before {
|
||||
content: counter(tab-counts) ":\00a0";
|
||||
}
|
||||
|
||||
.tab-label-container {
|
||||
display: grid;
|
||||
|
||||
align-content: safe center;
|
||||
align-items: safe center;
|
||||
|
||||
@include _tab_counter_without_centered {
|
||||
justify-content: start;
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
grid-row: 1;
|
||||
}
|
||||
> .tab-text {
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
&[pinned] {
|
||||
width: unset !important; /* Original: 0 */
|
||||
> .tab-text,
|
||||
> .tab-secondary-label {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Like centered label
|
||||
.tab-label,
|
||||
.tab-secondary-label {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Compatibility with sound tab
|
||||
@include Option("userChrome.tab.sound_with_favicons") {
|
||||
@include _hidden_tabIcon_soundTabLabel {
|
||||
.tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
|
||||
&[pinned] .tab-label-container {
|
||||
&[labeldirection=ltr],
|
||||
&:not([labeldirection]):-moz-locale-dir(ltr) {
|
||||
--uc-sound-tab-label-position-x: 2px;
|
||||
}
|
||||
&[labeldirection=rtl],
|
||||
&:not([labeldirection]):-moz-locale-dir(rtl) {
|
||||
--uc-sound-tab-label-position-x: -2px;
|
||||
}
|
||||
}
|
||||
.tab-label-container::before {
|
||||
transform: translateX(var(--uc-sound-tab-label-position-x, 0px));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-label-container::beforee {
|
||||
transition: transform 0.25s var(--animation-easing-function);
|
||||
}
|
||||
}
|
||||
|
|
@ -79,6 +79,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.combined.urlbar_with_reload") {
|
||||
#nav-bar-customization-target > #stop-reload-button .toolbarbutton-icon {
|
||||
transition: background-color 2.5s var(--animation-easing-function) !important;
|
||||
&:hover {
|
||||
transition: background-color 1.25s var(--animation-easing-function) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*- Border - Other Fields --------------------------------------------------*/
|
||||
#search-box,
|
||||
xul|search-textbox.tabsFilter,
|
||||
|
|
@ -146,8 +155,7 @@ xul|search-textbox.tabsFilter,
|
|||
}
|
||||
|
||||
/*- Expand - Synced Tabs ---------------------------------------------------*/
|
||||
@-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml")
|
||||
{
|
||||
@include moz-document(url "chrome://browser/content/syncedtabs/sidebar.xhtml") {
|
||||
.item-tabs-list {
|
||||
transition: transform 0.2s ease-out, opacity 0.2s ease-out;
|
||||
transform: translateY(0%);
|
||||
|
|
@ -168,8 +176,7 @@ xul|search-textbox.tabsFilter,
|
|||
}
|
||||
|
||||
/*- Arrow - Synced Tabs ----------------------------------------------------*/
|
||||
@-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml")
|
||||
{
|
||||
@include moz-document(url "chrome://browser/content/syncedtabs/sidebar.xhtml") {
|
||||
/* treechildren::-moz-tree-twisty: Can't apply */
|
||||
#template-container .item.client {
|
||||
.item-twisty-container {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@
|
|||
--toolbar-field-border-color: var(--toolbar-field-focus-border-color);
|
||||
}
|
||||
|
||||
@include Option("userChrome.combined.urlbar_with_reload") {
|
||||
#nav-bar-customization-target > #stop-reload-button:hover ~ #urlbar-container #urlbar:not([focused="true"]) > #urlbar-background {
|
||||
--toolbar-field-border-color: var(--toolbar-field-focus-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
/*- Other Fields -----------------------------------------------------------*/
|
||||
/* Sidebar */
|
||||
.sidebar-panel[lwt-sidebar] #search-box:hover,
|
||||
|
|
|
|||
|
|
@ -3,6 +3,16 @@
|
|||
@import "cursor";
|
||||
}
|
||||
|
||||
/*= Panel UI Button Separator ================================================*/
|
||||
@include Option("userChrome.decoration.panel_button_separator") {
|
||||
@import "panel_button_separator";
|
||||
}
|
||||
|
||||
/*= Panel UI Arrow ===========================================================*/
|
||||
@include Option("userChrome.decoration.panel_arrow") {
|
||||
@import "panel_arrow";
|
||||
}
|
||||
|
||||
@include Animate {
|
||||
/*= Field Border ===========================================================*/
|
||||
@include Option("userChrome.decoration.field_border") {
|
||||
|
|
|
|||
22
src/decoration/_panel_arrow.scss
Normal file
22
src/decoration/_panel_arrow.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
#appMenu-popup {
|
||||
background-image: url("../icons/panelarrow-vertical.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: right 10px;
|
||||
background-position-y: top;
|
||||
|
||||
-moz-context-properties: fill, stroke;
|
||||
fill: var(--panel-background);
|
||||
stroke: var(--panel-border-color);
|
||||
|
||||
&[side="top"] {
|
||||
margin-top: -8px !important; /* Original: -4px */
|
||||
padding-top: 4px;
|
||||
}
|
||||
&[side="bottom"] {
|
||||
background-image: url("../icons/panelarrow-vertical-reverse.svg");
|
||||
background-position-y: bottom;
|
||||
|
||||
margin-bottom: -8px !important; /* Original: -4px */
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
13
src/decoration/_panel_button_separator.scss
Normal file
13
src/decoration/_panel_button_separator.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
:root:not([chromehidden~="toolbar"]) #PanelUI-button {
|
||||
// Original: not include at [uidensity=compact]
|
||||
margin-inline-start: 3px;
|
||||
padding-inline-start: 2px;
|
||||
border-inline-start: 1px solid;
|
||||
border-image: linear-gradient(
|
||||
transparent 4px,
|
||||
var(--toolbarseparator-color) 4px,
|
||||
var(--toolbarseparator-color) calc(100% - 4px),
|
||||
transparent calc(100% - 4px)
|
||||
);
|
||||
border-image-slice: 1;
|
||||
}
|
||||
|
|
@ -27,6 +27,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.hidden.titlebar_container") {
|
||||
.titlebar-buttonbox-container {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.hidden.sidebar_header") {
|
||||
@include NotOption("userChrome.hidden.sidebar_header.vertical_tab_only") {
|
||||
#sidebar-header {
|
||||
|
|
@ -47,14 +53,32 @@
|
|||
|
||||
@include Option("userChrome.hidden.urlbar_iconbox") {
|
||||
#identity-box[pageproxystate="valid"] {
|
||||
&.notSecureText #identity-icon-label,
|
||||
&.chromeUI #identity-icon-box,
|
||||
&.extensionPage #identity-icon-box {
|
||||
display: none;
|
||||
}
|
||||
@include NotOption("userChrome.hidden.urlbar_iconbox.label_only") {
|
||||
&.notSecureText #identity-icon-label,
|
||||
&.chromeUI #identity-icon-box,
|
||||
&.extensionPage #identity-icon-box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.notSecureText #identity-icon-box {
|
||||
padding-inline-end: 5px; /* Original: 8px */
|
||||
&.notSecureText #identity-icon-box {
|
||||
padding-inline-end: 5px; /* Original: 8px */
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.hidden.urlbar_iconbox.label_only") {
|
||||
&.chromeUI #identity-icon-box,
|
||||
&.extensionPage #identity-icon-box {
|
||||
&:not(:hover) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
@include NotOption("userChrome.urlbar.iconbox_with_separator") {
|
||||
padding-inline: var(--urlbar-icon-padding) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#identity-icon-label {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -100,6 +100,10 @@
|
|||
content: url("../icons/screenshot.svg");
|
||||
}
|
||||
}
|
||||
#save-page-button {
|
||||
// #496 #553
|
||||
list-style-image: url("../icons/toolbarButton-download.svg") !important;
|
||||
}
|
||||
|
||||
#appMenu-settings-button {
|
||||
list-style-image: url("chrome://global/skin/icons/settings.svg");
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
@use "utils/os" as *;
|
||||
@use "utils/option" as *;
|
||||
@use "utils/color_scheme" as *;
|
||||
@use "utils/theme" as *;
|
||||
@use "utils/accent_color" as *;
|
||||
@use "utils/native_menu" as *;
|
||||
@use "utils/moz_document" as *;
|
||||
@use "utils/theme" as *;
|
||||
@use "utils/one_liner" as *;
|
||||
@use "utils/window_control" as *;
|
||||
@use "utils/has" as *;
|
||||
@use "utils/proton_elements" as Proton;
|
||||
@use "sass:selector";
|
||||
@use "sass:math";
|
||||
|
||||
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
||||
@namespace html "http://www.w3.org/1999/xhtml";
|
||||
|
|
@ -39,6 +41,12 @@
|
|||
/** Tab UI ********************************************************************/
|
||||
@import "tab/index";
|
||||
|
||||
/** Nav Bar UI ****************************************************************/
|
||||
@import "navbar/index";
|
||||
|
||||
/** Bookark Bar UI ************************************************************/
|
||||
@import "bookmarkbar/index";
|
||||
|
||||
/** Url View UI ***************************************************************/
|
||||
@import "urlview/index";
|
||||
|
||||
|
|
@ -48,6 +56,13 @@
|
|||
/** Sidebar UI ****************************************************************/
|
||||
@import "sidebar/index";
|
||||
|
||||
/** Combined UI ***************************************************************/
|
||||
@import "combined/index";
|
||||
|
||||
/** Others UI *****************************************************************/
|
||||
@import "counter/index";
|
||||
@import "others/index";
|
||||
|
||||
/** Fullscreen - Overlap toolbar **********************************************/
|
||||
@import "fullscreen/index";
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
@use "utils/color_scheme" as *;
|
||||
@use "utils/accent_color" as *;
|
||||
@use "utils/native_menu" as *;
|
||||
@use "utils/moz_document" as *;
|
||||
@use "utils/proton_elements" as Proton;
|
||||
@use "sass:selector";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
@import "folder_icons";
|
||||
|
||||
@-moz-document url("chrome://browser/content/places/places.xhtml")
|
||||
{
|
||||
@include moz-document(url "chrome://browser/content/places/places.xhtml") {
|
||||
@include OS($linux) {
|
||||
@import "menubar";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@-moz-document url("chrome://browser/content/places/places.xhtml")
|
||||
{
|
||||
@include moz-document(url "chrome://browser/content/places/places.xhtml") {
|
||||
/** Library - Icons Replace *************************************************/
|
||||
@include Option("userChrome.icon.library") {
|
||||
@import "folder_icons";
|
||||
|
|
|
|||
139
src/navbar/_as_sidebar.scss
Normal file
139
src/navbar/_as_sidebar.scss
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
:root {
|
||||
--uc-navbar-margin-block: var(--toolbarbutton-inner-padding);
|
||||
--uc-urlbar-margin-top: calc(var(--uc-navbar-height) + var(--uc-navbar-margin-block));
|
||||
|
||||
--uc-urlbar-container-height: 36px;
|
||||
--uc-navbar-sideblock-height: calc(var(--uc-urlbar-margin-top) + var(--uc-urlbar-container-height));
|
||||
}
|
||||
|
||||
#nav-bar,
|
||||
#sidebar-box,
|
||||
#sidebar-header,
|
||||
#sidebar {
|
||||
min-width: var(--uc-sidebar-activate-width) !important;
|
||||
max-width: var(--uc-sidebar-activate-width) !important;
|
||||
}
|
||||
|
||||
#nav-bar,
|
||||
#wrapper-urlbar-container,
|
||||
#urlbar-container {
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
#nav-bar-customization-target {
|
||||
-moz-box-pack: justify;
|
||||
}
|
||||
#nav-bar {
|
||||
// --toolbarbutton-outer-padding: 0px !important;
|
||||
z-index: 1;
|
||||
|
||||
margin-top: calc(var(--uc-tabbar-height) + var(--uc-bm-height) + var(--uc-menubar-height) + var(--uc-navbar-margin-block)); // drag space
|
||||
overflow-y: visible !important; // show urlbar
|
||||
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
-moz-window-dragging: drag;
|
||||
}
|
||||
@include Has {
|
||||
:root:has(#sidebar-box[hidden="true"]) #nav-bar {
|
||||
margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important;
|
||||
opacity: 0;
|
||||
visibility: hidden; // If use `collapse`, inline `--urlbar-toolbar-height` variable is calculated strangely small.
|
||||
}
|
||||
:root:has(#sidebar-box[positionend="true"]) #nav-bar {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@include Animate {
|
||||
@include Option("userChrome.decoration.animate") {
|
||||
@include NotOption("userChrome.decoration.disable_sidebar_animate") {
|
||||
#nav-bar {
|
||||
transition: margin-inline-start 0.25s var(--animation-easing-function),
|
||||
opacity 0.25s ease-in-out,
|
||||
visibility 0s linear,
|
||||
margin-top var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
|
||||
var(--ext-theme-background-transition)!important;
|
||||
will-change: margin-inline-start, opacity, visibility, margin-top;
|
||||
}
|
||||
:root:has(#sidebar-box[hidden="true"]) #nav-bar,
|
||||
#navigator-toolbox:is(:hover, :focus-within) #nav-bar {
|
||||
transition-delay: 0s, 0s, 0.25s, 0s, 0s !important;
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.decoration.disable_sidebar_animate") {
|
||||
#nav-bar {
|
||||
transition: margin-top var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important;
|
||||
will-change: margin-top;
|
||||
}
|
||||
#navigator-toolbox:is(:hover, :focus-within) #nav-bar {
|
||||
transition-delay: 0s !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#urlbar-container {
|
||||
top: var(--uc-urlbar-margin-top);
|
||||
min-width: calc(var(--uc-sidebar-activate-width) - (2 * var(--toolbarbutton-inner-padding))) !important;
|
||||
|
||||
margin-inline: auto !important; /* Original: var(--urlbar-margin-inline) */
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
#customizableui-special-spring1,
|
||||
#customizableui-special-spring2,
|
||||
#wrapper-customizableui-special-spring1,
|
||||
#wrapper-customizableui-special-spring2 {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#sidebar-header {
|
||||
margin-top: var(--uc-navbar-sideblock-height) !important;
|
||||
-moz-window-dragging: drag;
|
||||
}
|
||||
|
||||
:root[customizing="true"] {
|
||||
#wrapper-urlbar-container {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
#browser[collapsed="true"] {
|
||||
visibility: visible !important;
|
||||
|
||||
#appcontent {
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
#sidebar-box {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
|
||||
&[positionend="true"] {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#customization-container {
|
||||
--uc-customization-conatiner-margin: var(--uc-navbar-height-default);
|
||||
@include Option("userChrome.hidden.tabbar") {
|
||||
--uc-customization-conatiner-margin: calc(var(--uc-navbar-height-default) - var(--uc-tabbar-height-default));
|
||||
}
|
||||
|
||||
width: calc(100% - var(--uc-sidebar-activate-width));
|
||||
height: calc(100% - var(--uc-customization-conatiner-margin));
|
||||
}
|
||||
|
||||
&:has(#sidebar-box:not([positionend="true"])) #customization-container {
|
||||
margin-inline-start: var(--uc-sidebar-activate-width);
|
||||
}
|
||||
&:has(#sidebar-box[positionend="true"]) #customization-container {
|
||||
margin-inline-end: var(--uc-sidebar-activate-width);
|
||||
}
|
||||
|
||||
#customization-palette-container,
|
||||
#customization-panel-container {
|
||||
flex-shrink: 0.5 !important;
|
||||
}
|
||||
}
|
||||
4
src/navbar/_index.scss
Normal file
4
src/navbar/_index.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
/*= Nav Bar - Navbar comabine with sidebar===================================*/
|
||||
@include Option("userChrome.navbar.as_sidebar") {
|
||||
@import "as_sidebar";
|
||||
}
|
||||
79
src/others/_findbar_floating_on_top.scss
Normal file
79
src/others/_findbar_floating_on_top.scss
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/floating_findbar_on_top.css made available under Mozilla Public License v. 2.0
|
||||
See the above repository for updates as well as full license text. */
|
||||
|
||||
/* Note that privacy.resistFingerprinting.letterboxing prevents this from working properly */
|
||||
|
||||
#main-window > body > box {
|
||||
// #navigator-toolbox-background for compatibility
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
findbar {
|
||||
-moz-box-ordinal-group: 0;
|
||||
position: relative;
|
||||
|
||||
height: 0 !important;
|
||||
overflow: visible;
|
||||
border-top: none !important;
|
||||
padding: 0 !important;
|
||||
background: none !important;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
|
||||
// Move findbar so it isn't over the scrollbar
|
||||
// Delete if you want findbar to begin from right window edge
|
||||
margin-right: 16px;
|
||||
border-right: 1px solid var(--chrome-content-separator-color);
|
||||
|
||||
&::before {
|
||||
content:"";
|
||||
display: -moz-box;
|
||||
-moz-box-flex: 200;
|
||||
}
|
||||
}
|
||||
|
||||
.findbar-container,
|
||||
.findbar-closebutton {
|
||||
border-style: solid;
|
||||
border-color: var(--chrome-content-separator-color);
|
||||
background: var(--uc-light-bkgnd-color, var(--toolbar-bgcolor)) !important;
|
||||
pointer-events: auto;
|
||||
height: 33px !important;
|
||||
}
|
||||
|
||||
.findbar-container {
|
||||
-moz-box-direction: reverse;
|
||||
border-width: 0 0 1px 1px;
|
||||
border-radius: var(--toolbarbutton-border-radius) 0 0 var(--toolbarbutton-border-radius) !important;
|
||||
|
||||
> .findbar-find-fast {
|
||||
padding: var(--toolbarbutton-inner-padding) 1px;
|
||||
margin: 0 !important;
|
||||
}
|
||||
> .findbar-find-status {
|
||||
display: -moz-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-moz-box-flex: 1;
|
||||
}
|
||||
> hbox {
|
||||
margin-inline: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.findbar-closebutton {
|
||||
width: 30px !important; /* Original: 24px */
|
||||
margin: 0 !important;
|
||||
border-width: 0 1px 1px 0px;
|
||||
border-radius: 0 var(--toolbarbutton-border-radius) var(--toolbarbutton-border-radius) 0 !important;
|
||||
padding: 2px 5px 2px 3px !important;
|
||||
overflow: clip;
|
||||
|
||||
image {
|
||||
padding: 4px;
|
||||
border-radius: var(--toolbarbutton-border-radius);
|
||||
}
|
||||
&:hover > image{
|
||||
background: var(--toolbarbutton-hover-background) !important;
|
||||
}
|
||||
}
|
||||
3
src/others/_index.scss
Normal file
3
src/others/_index.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@include Option("userChrome.findbar.floating_on_top") {
|
||||
@import "findbar_floating_on_top";
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
:root[uidensity="compact"] #PersonalToolbar toolbarbutton {
|
||||
margin-top: 0px !important; /* Original: 2px */
|
||||
margin-bottom: 1px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,20 @@
|
|||
}
|
||||
|
||||
/*= Tool Bar - Button Padding ================================================*/
|
||||
@include Option("userChrome.padding.toolbar_button", "userChrome.tab.newtab_button_smaller") {
|
||||
:root {
|
||||
--uc-small-toolbarbutton-inner-padding: 6px;
|
||||
--uc-toolbarbutton-inner-padding-default: 8px;
|
||||
}
|
||||
:root[uidensity="compact"] {
|
||||
--uc-small-toolbarbutton-inner-padding: 4px;
|
||||
--uc-toolbarbutton-inner-padding-default: 6px;
|
||||
}
|
||||
:root[uidensity="touch"] #tabs-newtab-button > .toolbarbutton-icon {
|
||||
--uc-small-toolbarbutton-inner-padding: 9px;
|
||||
--uc-toolbarbutton-inner-padding-default: 9px;
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.padding.toolbar_button") {
|
||||
@import "toolbar_button";
|
||||
}
|
||||
|
|
@ -30,8 +44,23 @@
|
|||
}
|
||||
|
||||
/*= URL Bar - Reduce Padding =================================================*/
|
||||
@include Option("userChrome.padding.urlbar") {
|
||||
@import "urlbar";
|
||||
@include NotOption("userChrome.urlView.as_commandbar") {
|
||||
@include Option("userChrome.padding.urlbar") {
|
||||
@import "urlbar";
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.padding.urlView_expanding", "userChrome.urlView.as_commandbar") {
|
||||
#urlbar[breakout][breakout-extend] {
|
||||
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
#urlbar[breakout][breakout-extend] > #urlbar-input-container {
|
||||
height: var(--urlbar-height) !important;
|
||||
padding-block: 0 !important;
|
||||
padding-inline: var(--urlbar-container-padding, 0px) !important;
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.padding.urlView_expanding") {
|
||||
@import "urlview_expanding";
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
display: block;
|
||||
width: 2px;
|
||||
position: absolute;
|
||||
background-image: linear-gradient(0, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%);
|
||||
background-image: linear-gradient(0deg, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%);
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -61,14 +61,16 @@
|
|||
--toolbarbutton-inner-padding: calc((var(--tab-min-height) - 18px) / 2) !important; /* Prevent overflow pinned tab bottom margin */
|
||||
}
|
||||
|
||||
:root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox,
|
||||
#TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"],
|
||||
#TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack,
|
||||
#TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content {
|
||||
max-height: var(--tab-min-height) !important; /* Force apply height */
|
||||
}
|
||||
:root[uidensity="compact"] #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox {
|
||||
height: var(--tab-min-height) !important;
|
||||
@include NotOption("userChrome.tabbar.multi_row") {
|
||||
:root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox,
|
||||
#TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"],
|
||||
#TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack,
|
||||
#TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content {
|
||||
max-height: var(--tab-min-height) !important; /* Force apply height */
|
||||
}
|
||||
:root[uidensity="compact"] #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox {
|
||||
height: var(--tab-min-height) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -95,8 +95,10 @@
|
|||
padding-inline: 1px !important;
|
||||
}
|
||||
}
|
||||
#TabsToolbar:not([multibar]) .tabbrowser-tab:not([last-visible-tab]) {
|
||||
margin-inline-end: -1px !important;
|
||||
@include NotOption("userChrome.tabbar.multi_row") {
|
||||
#TabsToolbar:not([multibar]) .tabbrowser-tab:not([last-visible-tab]) {
|
||||
margin-inline-end: -1px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.tab.photon_like_padding") {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
:root[uidensity="compact"] {
|
||||
--toolbarbutton-outer-padding: 2px !important; /* Original: 3px, General is 2px */
|
||||
}
|
||||
|
||||
@include Option("userChrome.padding.toolbar_button.compact") {
|
||||
:root {
|
||||
--toolbarbutton-inner-padding: var(--uc-small-toolbarbutton-inner-padding) !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
:root:not([uidensity="touch"]) #urlbar-container,
|
||||
:root:not([uidensity="touch"]) #search-container {
|
||||
padding-block: 3px !important; /* Original: 4px */
|
||||
margin-inline: 5px !important; /* Original: 5px */
|
||||
}
|
||||
:root:not([uidensity="compact"]) #urlbar-container,
|
||||
:root:not([uidensity="compact"]) #search-container {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,3 @@
|
|||
#urlbar[breakout][breakout-extend] {
|
||||
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
#urlbar[breakout][breakout-extend] > #urlbar-input-container {
|
||||
height: var(--urlbar-height) !important;
|
||||
padding-block: 0 !important;
|
||||
padding-inline: var(--urlbar-container-padding, 0px) !important;
|
||||
}
|
||||
|
||||
#urlbar[breakout][breakout-extend] > #urlbar-background {
|
||||
animation-name: none !important;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, .05) !important;
|
||||
|
|
|
|||
|
|
@ -5,21 +5,32 @@
|
|||
}
|
||||
@include Option("userChrome.rounding.square_button") {
|
||||
:root {
|
||||
--toolbarbutton-border-radius: 0 !important; /* Original: 4px */
|
||||
--urlbar-icon-border-radius: 0 !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */
|
||||
}
|
||||
|
||||
.toolbarbutton-1,
|
||||
.toolbarbutton-icon,
|
||||
.panel-info-button,
|
||||
.searchbar-engine-one-off-item,
|
||||
.urlbarView-button,
|
||||
.urlbarView-tip-button,
|
||||
.urlbarView-action,
|
||||
toolbarbutton.bookmark-item:not(.subviewbutton),
|
||||
#sidebar-switcher-target {
|
||||
--toolbarbutton-border-radius: 0; /* Original: 4px */
|
||||
}
|
||||
|
||||
button,
|
||||
findbar toolbarbutton {
|
||||
findbar toolbarbutton,
|
||||
.notification-button {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.rounding.square_tab", "userChrome.round.square_button") {
|
||||
@include Option("userChrome.rounding.square_tab", "userChrome.rounding.square_button") {
|
||||
/* Fix Tab bar button radius */
|
||||
#TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-icon,
|
||||
#TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-text,
|
||||
#TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-badge-stack,
|
||||
#TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button),
|
||||
.tab-close-button {
|
||||
--tab-border-radius: var(--toolbarbutton-border-radius) !important;
|
||||
--tab-border-radius: var(--toolbarbutton-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -57,12 +68,19 @@
|
|||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
#urlbar-input-container,
|
||||
#urlbar-background,
|
||||
#searchbar {
|
||||
--toolbarbutton-border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.rounding.square_urlView_item") {
|
||||
.urlbarView-row-inner {
|
||||
--toolbarbutton-border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.rounding.square_checklabel") {
|
||||
.checkbox-check,
|
||||
xul|*.radio-check {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
@include Option("userChrome.sidebar.overlap", "userChrome.autohide.sidebar") {
|
||||
#sidebar-box {
|
||||
@include Option(
|
||||
"userChrome.sidebar.overlap",
|
||||
"userChrome.autohide.sidebar",
|
||||
"userChrome.navbar.as_sidebar"
|
||||
) {
|
||||
:root {
|
||||
/* Original
|
||||
min-width: 14em;
|
||||
width: 18em;
|
||||
max-width: 36em;
|
||||
*/
|
||||
|
||||
--uc-sidebar-width: 40px;
|
||||
--uc-sidebar-activate-width: 18em;
|
||||
--uc-sidebar-activate-width: 18rem;
|
||||
--uc-sidebar-activate-width-reverse: calc(-1 * var(--uc-sidebar-activate-width));
|
||||
--uc-sidebar-fullscreen-width: 4px;
|
||||
--uc-sidebar-shadow-size: 1px;
|
||||
|
|
@ -19,6 +22,16 @@
|
|||
--uc-autohide-sidebar-speed: 750ms;
|
||||
--uc-autohide-fullscreen-sidebar-speed: 1s;
|
||||
--uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */
|
||||
}
|
||||
|
||||
#sidebar-splitter {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.sidebar.overlap", "userChrome.autohide.sidebar") {
|
||||
#sidebar-box {
|
||||
--uc-sidebar-shadow-color: #28282F;
|
||||
|
||||
z-index: 1 !important;
|
||||
position: relative !important;
|
||||
|
|
@ -32,10 +45,6 @@
|
|||
#sidebar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#sidebar-splitter {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.sidebar.overlap") {
|
||||
|
|
|
|||
|
|
@ -16,8 +16,10 @@
|
|||
#tabbrowser-tabs {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
#TabsToolbar:not([multibar]) {
|
||||
overflow: clip; /* Prevent toolbar area over */
|
||||
@include NotOption("userChrome.tabbar.multi_row") {
|
||||
#TabsToolbar:not([multibar]) {
|
||||
overflow: clip; /* Prevent toolbar area over */
|
||||
}
|
||||
}
|
||||
|
||||
/* Pinned Tab - tabbrowser-arrowscrollbox overflowing */
|
||||
|
|
|
|||
|
|
@ -15,11 +15,33 @@
|
|||
|
||||
/*= Selected Tab - Bottom Rounded Corner =====================================*/
|
||||
@include Option("userChrome.tab.bottom_rounded_corner") {
|
||||
@import "selected_tab/bottom_rounded_corner";
|
||||
@include NotOption("userChrome.tab.bottom_rounded_corner.wave") {
|
||||
@include NotOption("userChrome.tab.bottom_rounded_corner.australis") {
|
||||
@include NotOption("userChrome.tab.bottom_rounded_corner.chrome") {
|
||||
@include NotOption("userChrome.tab.bottom_rounded_corner.chrome_legacy") {
|
||||
@include NotOption("userChrome.tab.bottom_rounded_corner.edge") {
|
||||
@import "selected_tab/bottom_rounded_corner";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include Option(
|
||||
"userChrome.tab.bottom_rounded_corner.wave",
|
||||
"userChrome.tab.bottom_rounded_corner.australis",
|
||||
"userChrome.tab.bottom_rounded_corner.chrome_legacy",
|
||||
"userChrome.tab.bottom_rounded_corner.chrome",
|
||||
"userChrome.tab.bottom_rounded_corner.edge"
|
||||
) {
|
||||
@import "selected_tab/bottom_rounded_corner_others";
|
||||
}
|
||||
}
|
||||
|
||||
/*= Selected Tab - Photon like contextline ===================================*/
|
||||
@include Option("userChrome.tab.photon_like_contextline", "userChrome.tab.static_separator") {
|
||||
@include Option(
|
||||
"userChrome.tab.photon_like_contextline",
|
||||
"userChrome.tab.static_separator",
|
||||
"userChrome.tab.bar_separator") {
|
||||
:root[lwtheme-mozlightdark] #tabbrowser-tabs, /* Legacy: v96 */
|
||||
:root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"],
|
||||
:root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
/*= Unselected Tab - Dynamic Separator =======================================*/
|
||||
@include Option(
|
||||
"userChrome.tab.dynamic_separator",
|
||||
"userChrome.tab.dynamic_separtor"
|
||||
) {
|
||||
@include Option("userChrome.tab.dynamic_separator") {
|
||||
@import "unselected_tab/dynamic_separator";
|
||||
}
|
||||
|
||||
|
|
@ -10,3 +7,8 @@
|
|||
@include Option("userChrome.tab.static_separator") {
|
||||
@import "unselected_tab/static_separator";
|
||||
}
|
||||
|
||||
/*= Unselected Tab - Bar Separator ===========================================*/
|
||||
@include Option("userChrome.tab.bar_separator") {
|
||||
@import "unselected_tab/bar_separator";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,54 +1,50 @@
|
|||
#tabbrowser-tabs[closebuttons="activetab"]
|
||||
@mixin _closeButtonAtHover() {
|
||||
.tabbrowser-tab {
|
||||
&:not([visuallyselected]) .tab-close-button {
|
||||
visibility: collapse !important;
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover .tab-close-button {
|
||||
visibility: visible !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@include Option("userChrome.tab.close_button_at_hover.with_selected") {
|
||||
&:not([pinned]):not(:hover) .tab-close-button {
|
||||
visibility: collapse !important;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#tabbrowser-tabs[closebuttons="activetab"] {
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab:not([pinned])
|
||||
> .tab-stack
|
||||
> .tab-content
|
||||
> .tab-close-button:not([selected="true"]) {
|
||||
display: -moz-inline-box !important;
|
||||
display: -moz-inline-box !important;
|
||||
}
|
||||
|
||||
@include _closeButtonAtHover;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button {
|
||||
visibility: collapse !important;
|
||||
opacity: 0;
|
||||
}
|
||||
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button {
|
||||
visibility: visible !important;
|
||||
opacity: 1;
|
||||
}
|
||||
@include Option("userChrome.tab.close_button_at_hover.always") {
|
||||
.tabbrowser-tab:not([visuallyselected]) .tab-close-button {
|
||||
visibility: collapse !important;
|
||||
opacity: 0;
|
||||
}
|
||||
.tabbrowser-tab:hover .tab-close-button {
|
||||
visibility: visible !important;
|
||||
opacity: 1;
|
||||
}
|
||||
@include _closeButtonAtHover;
|
||||
}
|
||||
|
||||
/* Animate */
|
||||
@include Animate {
|
||||
/* Fade out */
|
||||
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button {
|
||||
.tabbrowser-tab .tab-close-button {
|
||||
transition: opacity 0.1s var(--animation-easing-function) !important;
|
||||
}
|
||||
|
||||
/* Fade in */
|
||||
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button {
|
||||
.tabbrowser-tab:hover .tab-close-button {
|
||||
transition: opacity 0.25s var(--animation-easing-function) !important;
|
||||
}
|
||||
|
||||
@include Option("userChrome.tab.close_button_at_hover.always") {
|
||||
/* Fade out */
|
||||
.tabbrowser-tab:not([visuallyselected]) .tab-close-button {
|
||||
transition: opacity 0.1s var(--animation-easing-function) !important;
|
||||
}
|
||||
|
||||
/* Fade in */
|
||||
.tabbrowser-tab:hover .tab-close-button {
|
||||
transition: opacity 0.25s var(--animation-easing-function) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Closed Button's icon thicker */
|
||||
|
|
|
|||
|
|
@ -1,35 +1,75 @@
|
|||
#tabs-newtab-button {
|
||||
/* Original:
|
||||
@include Option("userChrome.tab.connect_to_window") {
|
||||
/* Size */
|
||||
-moz-box-align: stretch !important;
|
||||
padding-top: var(--tab-block-margin) !important;
|
||||
}
|
||||
|
||||
@include Option("userChrome.tab.bottom_rounded_corner") {
|
||||
/* Original:
|
||||
margin: 0 0 var(--tabs-navbar-shadow-size) !important
|
||||
=> Can't override style. Therefore, we should approach it by bypass.
|
||||
*/
|
||||
--tabs-navbar-shadow-size: -1px; /* Original: 1px */
|
||||
--tabs-navbar-original-shadow-size: 1px;
|
||||
--tab-corner-rounding: 4px; /* Hardcoded */
|
||||
*/
|
||||
--tabs-navbar-shadow-size: -1px; /* Original: 1px */
|
||||
--uc-tabs-navbar-shadow-size: 0.5px;
|
||||
--uc-tab-corner-rounding: 4px; /* Hardcoded */
|
||||
--uc-newtab-bgcolor: transparent;
|
||||
|
||||
/* Size */
|
||||
-moz-box-align: stretch !important;
|
||||
padding-top: var(--tab-block-margin) !important;
|
||||
/* Corner Rounding Image */
|
||||
--uc-newtab-position: calc((var(--uc-tab-corner-rounding) / 2) * -1);
|
||||
background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-right-side-svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size),
|
||||
right var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size);
|
||||
background-size: var(--uc-tab-corner-rounding);
|
||||
|
||||
/* Corner Rounding Image */
|
||||
--newtab-position: calc((var(--tab-corner-rounding) / 2) * -1);
|
||||
background-image: url("../icons/tab-bottom-corner-left.svg"), url("../icons/tab-bottom-corner-right.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size),
|
||||
right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size);
|
||||
background-size: var(--tab-corner-rounding);
|
||||
/* Corner Rounding Color */
|
||||
fill: var(--uc-newtab-bgcolor) !important;
|
||||
-moz-context-properties: fill !important;
|
||||
|
||||
/* Corner Rounding Color */
|
||||
fill: transparent !important;
|
||||
-moz-context-properties: fill !important;
|
||||
@include Option(
|
||||
"userChrome.tab.bottom_rounded_corner.wave",
|
||||
"userChrome.tab.bottom_rounded_corner.australis",
|
||||
"userChrome.tab.bottom_rounded_corner.chrome_legacy",
|
||||
"userChrome.tab.bottom_rounded_corner.chrome",
|
||||
"userChrome.tab.bottom_rounded_corner.edge"
|
||||
) {
|
||||
--uc-newtab-position: 0px;
|
||||
--uc-newtab-non-corner-bgwidth: 0px;
|
||||
--uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2);
|
||||
--uc-tab-corner-half-height-reverse: calc(var(--uc-tab-corner-half-height) * -1);
|
||||
|
||||
transform: translateX(var(--uc-tab-corner-half-height-reverse));
|
||||
padding-inline: var(--uc-tab-corner-half-height) !important;
|
||||
overflow-clip-margin: var(--uc-tab-corner-half-height) !important;
|
||||
|
||||
background-image: var(--uc-tab-corner-left-side-svg),
|
||||
linear-gradient(to left, var(--uc-newtab-bgcolor), var(--uc-newtab-bgcolor)),
|
||||
var(--uc-tab-corner-right-side-svg);
|
||||
background-position: left var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size),
|
||||
center bottom var(--uc-tabs-navbar-shadow-size),
|
||||
right var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size);
|
||||
background-size: var(--uc-tab-corner-height) var(--uc-tab-corner-height),
|
||||
var(--uc-newtab-non-corner-bgwidth) var(--uc-tab-corner-height),
|
||||
var(--uc-tab-corner-height) var(--uc-tab-corner-height);
|
||||
background-origin: padding-box;
|
||||
|
||||
@include Option(
|
||||
"userChrome.tab.bottom_rounded_corner.chrome",
|
||||
"userChrome.tab.bottom_rounded_corner.edge"
|
||||
) {
|
||||
--uc-newtab-non-corner-bgwidth: calc(2 * var(--toolbarbutton-inner-padding));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Corner Rounding Color */
|
||||
#tabs-newtab-button:hover {
|
||||
fill: var(--toolbarbutton-hover-background) !important;
|
||||
--uc-newtab-bgcolor: var(--toolbarbutton-hover-background);
|
||||
}
|
||||
#tabs-newtab-button:hover:active {
|
||||
fill: var(--toolbarbutton-active-background) !important;
|
||||
--uc-newtab-bgcolor: var(--toolbarbutton-active-background);
|
||||
}
|
||||
@media (-moz-windows-accent-color-in-titlebar) {
|
||||
@include AccentColor {
|
||||
|
|
@ -49,6 +89,29 @@
|
|||
transparent
|
||||
) !important; /* Hardcoded for compatibility */
|
||||
}
|
||||
|
||||
@include Option("userChrome.tab.bottom_rounded_corner") {
|
||||
@include Option(
|
||||
"userChrome.tab.bottom_rounded_corner.wave",
|
||||
"userChrome.tab.bottom_rounded_corner.australis",
|
||||
"userChrome.tab.bottom_rounded_corner.chrome_legacy",
|
||||
"userChrome.tab.bottom_rounded_corner.chrome",
|
||||
"userChrome.tab.bottom_rounded_corner.edge"
|
||||
) {
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover {
|
||||
background-image: var(--uc-tab-corner-left-side-svg),
|
||||
linear-gradient(to left, color-mix(in srgb, $accentTextColor 10%, transparent), color-mix(in srgb, $accentTextColor 10%, transparent)),
|
||||
var(--uc-tab-corner-right-side-svg);
|
||||
}
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active {
|
||||
background-image: var(--uc-tab-corner-left-side-svg),
|
||||
linear-gradient(to left, color-mix(in srgb, $accentTextColor 15%, transparent), color-mix(in srgb, $accentTextColor 15%, transparent)),
|
||||
var(--uc-tab-corner-right-side-svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -57,8 +120,26 @@
|
|||
border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */
|
||||
|
||||
padding: calc(var(--toolbarbutton-inner-padding) - (var(--tab-block-margin) / 4)) var(--toolbarbutton-inner-padding)
|
||||
calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4) + var(--tabs-navbar-original-shadow-size)) !important;
|
||||
calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4) + var(--uc-tabs-navbar-shadow-size)) !important;
|
||||
-moz-context-properties: fill, fill-opacity;
|
||||
fill: var(--toolbarbutton-icon-fill);
|
||||
fill-opacity: var(--toolbarbutton-icon-fill-opacity);
|
||||
|
||||
@include Option(
|
||||
"userChrome.tab.bottom_rounded_corner.wave",
|
||||
"userChrome.tab.bottom_rounded_corner.australis",
|
||||
"userChrome.tab.bottom_rounded_corner.chrome_legacy",
|
||||
"userChrome.tab.bottom_rounded_corner.chrome",
|
||||
"userChrome.tab.bottom_rounded_corner.edge"
|
||||
) {
|
||||
--tab-border-radius: 0px;
|
||||
width: unset !important;
|
||||
padding-inline: 0px !important;
|
||||
margin-inline: calc(var(--uc-tab-corner-half-height) - #{math.div(15.5px, 2)}) !important;
|
||||
|
||||
background-color: transparent !important;
|
||||
// background-size: calc((var(--toolbarbutton-inner-padding) * 2 + 16px) - var(--uc-tab-corner-size)) 100%;
|
||||
// background-repeat: no-repeat;
|
||||
// background-position: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,5 @@
|
|||
margin-left: 1px;
|
||||
|
||||
/* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */
|
||||
--toolbarbutton-inner-padding: 6px;
|
||||
}
|
||||
:root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon {
|
||||
--toolbarbutton-inner-padding: 4px; /* Photon: 6px */
|
||||
}
|
||||
:root[uidensity="touch"] #tabs-newtab-button > .toolbarbutton-icon {
|
||||
--toolbarbutton-inner-padding: 9px; /* Photon: 9px */
|
||||
--toolbarbutton-inner-padding: var(--uc-small-toolbarbutton-inner-padding);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,86 +1,129 @@
|
|||
#tabbrowser-tabs {
|
||||
--tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
|
||||
--tab-corner-padding: 0px;
|
||||
--tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding));
|
||||
#TabsToolbar {
|
||||
--uc-tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
|
||||
--uc-tab-corner-padding: 0px;
|
||||
--uc-tab-corner-position: calc(var(--uc-tab-corner-padding) - var(--uc-tab-corner-rounding));
|
||||
|
||||
--uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left.svg");
|
||||
--uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right.svg");
|
||||
}
|
||||
|
||||
:root:not([customizing="true"]) tab[visuallyselected] > stack::before,
|
||||
:root:not([customizing="true"]) tab[visuallyselected] > stack::after {
|
||||
content: "" !important;
|
||||
:root:not([customizing="true"]) {
|
||||
.tabbrowser-tab {
|
||||
.tab-background {
|
||||
&::before,
|
||||
&::after {
|
||||
/* Box */
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
|
||||
/* Box */
|
||||
display: block !important;
|
||||
position: absolute !important;
|
||||
z-index: 1 !important;
|
||||
/* Shape */
|
||||
width: var(--uc-tab-corner-rounding);
|
||||
height: 100%;
|
||||
|
||||
/* Shape */
|
||||
width: var(--tab-corner-rounding) !important;
|
||||
height: 100% !important;
|
||||
/* Color */
|
||||
fill: transparent;
|
||||
stroke: transparent;
|
||||
-moz-context-properties: fill, stroke;
|
||||
|
||||
/* Color */
|
||||
fill: var(--toolbar-bgcolor) !important;
|
||||
stroke: var(
|
||||
--tab-line-color,
|
||||
var(--tabs-border-color, rgba(128, 128, 142, 0.9))
|
||||
) !important;
|
||||
-moz-context-properties: fill, stroke !important;
|
||||
/* Image */
|
||||
background-size: var(--uc-tab-corner-rounding);
|
||||
background-repeat: no-repeat;
|
||||
background-position-y: bottom;
|
||||
|
||||
/* Image */
|
||||
background-size: var(--tab-corner-rounding);
|
||||
background-repeat: no-repeat;
|
||||
background-position-y: bottom;
|
||||
}
|
||||
:root:not([customizing="true"]):is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
tab[visuallyselected]
|
||||
> stack:-moz-lwtheme::before,
|
||||
:root:not([customizing="true"]):is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
tab[visuallyselected]
|
||||
> stack:-moz-lwtheme::after {
|
||||
/* As Selected Tab - Box Shadow */
|
||||
stroke: var(--toolbar-color) !important;
|
||||
}
|
||||
@include Option("userChrome.tab.bottom_rounded_corner.all") {
|
||||
content: "";
|
||||
}
|
||||
@include NotOption("userChrome.tab.color_like_toolbar") {
|
||||
/* Based on tab background
|
||||
background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none);
|
||||
|
||||
tab[visuallyselected] > stack::before {
|
||||
left: var(--tab-corner-position) !important;
|
||||
background-image: url("../icons/tab-bottom-corner-left.svg");
|
||||
}
|
||||
tab[visuallyselected] > stack::after {
|
||||
left: auto;
|
||||
right: var(--tab-corner-position);
|
||||
background-image: url("../icons/tab-bottom-corner-right.svg");
|
||||
}
|
||||
defaults
|
||||
background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
|
||||
background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage));
|
||||
*/
|
||||
fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include OS($linux) {
|
||||
/* Fill color for GTK */
|
||||
:root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::before,
|
||||
:root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::after {
|
||||
/* As GTK Toolbar's background-color + background-image
|
||||
* --toolbar-non-lwt-bgcolor: -moz-dialog;
|
||||
* --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
|
||||
*/
|
||||
fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
|
||||
stroke: transparent !important;
|
||||
&::before {
|
||||
left: var(--uc-tab-corner-position);
|
||||
background-image: var(--uc-tab-corner-left-side-svg);
|
||||
}
|
||||
&::after {
|
||||
right: var(--uc-tab-corner-position);
|
||||
background-image: var(--uc-tab-corner-right-side-svg);
|
||||
}
|
||||
}
|
||||
|
||||
&[visuallyselected] .tab-background {
|
||||
&::before,
|
||||
&::after {
|
||||
@include NotOption("userChrome.tab.bottom_rounded_corner.all") {
|
||||
content: "";
|
||||
}
|
||||
|
||||
fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
|
||||
stroke: var(
|
||||
--tab-line-color,
|
||||
var(--tabs-border-color, rgba(128, 128, 142, 0.9))
|
||||
);
|
||||
}
|
||||
}
|
||||
&[multiselected] .tab-background {
|
||||
&::before,
|
||||
&::after {
|
||||
fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
|
||||
}
|
||||
}
|
||||
&:hover:not([visuallyselected], [multiselected]) .tab-background {
|
||||
&::before,
|
||||
&::after {
|
||||
fill: color-mix(in srgb, currentColor 11%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
:root:not([customizing="true"]):not([lwtheme="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before,
|
||||
:root:not([customizing="true"]):not([lwtheme="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after {
|
||||
stroke: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include NotOption("userChrome.tab.color_like_toolbar") {
|
||||
:root:not([customizing="true"]) tab[visuallyselected] > stack::before,
|
||||
:root:not([customizing="true"]) tab[visuallyselected] > stack::after {
|
||||
/* Based on tab background
|
||||
background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none);
|
||||
|
||||
defaults
|
||||
background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
|
||||
background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage));
|
||||
*/
|
||||
fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important;
|
||||
@include Option("userChrome.tab.multi_selected") {
|
||||
.tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background {
|
||||
&::before,
|
||||
&::after {
|
||||
fill: color-mix(in srgb, currentColor 65%, transparent);
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
|
||||
#TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background:-moz-lwtheme {
|
||||
&::before,
|
||||
&::after {
|
||||
/* As Selected Tab - Box Shadow */
|
||||
stroke: var(--toolbar-color);
|
||||
}
|
||||
}
|
||||
|
||||
@include OS($linux) {
|
||||
/* Fill color for GTK */
|
||||
&:not([lwtheme="true"]) {
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
|
||||
&::before,
|
||||
&::after {
|
||||
/* As GTK Toolbar's background-color + background-image
|
||||
* --toolbar-non-lwt-bgcolor: -moz-dialog;
|
||||
* --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
|
||||
*/
|
||||
fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog);
|
||||
stroke: transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
#TabsToolbar[brighttext] .tabbrowser-tab[visuallyselected] .tab-background {
|
||||
&::before,
|
||||
&::after {
|
||||
stroke: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
227
src/tab/selected_tab/_bottom_rounded_corner_others.scss
Normal file
227
src/tab/selected_tab/_bottom_rounded_corner_others.scss
Normal file
|
|
@ -0,0 +1,227 @@
|
|||
//-- Mixin ---------------------------------------------------------------------
|
||||
@function _clipPathURL($svg) {
|
||||
@return url($svg + "#svgClipPath");
|
||||
}
|
||||
@mixin _clipPath($svg, $position) {
|
||||
$result: _clipPathURL($svg);
|
||||
|
||||
@if $position == "left" {
|
||||
--uc-tab-corner-left-side-svg: #{ url($svg) };
|
||||
--uc-tab-corner-left-side-clipPath: #{ $result };
|
||||
}
|
||||
@else if $position == "right" {
|
||||
--uc-tab-corner-right-side-svg: #{ url($svg) };
|
||||
--uc-tab-corner-right-side-clipPath: #{ $result };
|
||||
}
|
||||
}
|
||||
@mixin _tabCornerSVG($left, $right) {
|
||||
@include _clipPath($left, "left" );
|
||||
@include _clipPath($right, "right");
|
||||
}
|
||||
|
||||
@mixin _bottomRoundedCornerOtherPadding() {
|
||||
padding-inline: 0 !important;
|
||||
overflow-clip-margin: var(--uc-tab-corner-half-size) !important;
|
||||
|
||||
.tab-background {
|
||||
--tab-border-radius: 0px;
|
||||
margin-inline: var(--uc-tab-corner-half-size) !important;
|
||||
position: relative;
|
||||
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
#TabsToolbar {
|
||||
--uc-tab-corner-height: calc(var(--tab-min-height) + 1px);
|
||||
--uc-tab-corner-size: var(--uc-tab-corner-height);
|
||||
--uc-tab-corner-half-size: calc(var(--uc-tab-corner-size) / 2);
|
||||
--uc-tab-corner-half-size-reverse: calc(var(--uc-tab-corner-half-size) * -1);
|
||||
|
||||
--uc-tab-corner-bgimage: none;
|
||||
|
||||
@include Option("userChrome.tab.bottom_rounded_corner.wave") {
|
||||
@include _tabCornerSVG(
|
||||
"../icons/tab-bottom-corner-left-wave.svg",
|
||||
"../icons/tab-bottom-corner-right-wave.svg"
|
||||
);
|
||||
--uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-wave-clipped.svg");
|
||||
--uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-wave-clipped.svg");
|
||||
}
|
||||
@include Option("userChrome.tab.bottom_rounded_corner.australis") {
|
||||
@include _tabCornerSVG(
|
||||
"../icons/tab-bottom-corner-left-australis.svg",
|
||||
"../icons/tab-bottom-corner-right-australis.svg"
|
||||
);
|
||||
--uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-australis-clipped.svg");
|
||||
--uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-australis-cilpped.svg");
|
||||
}
|
||||
@include Option("userChrome.tab.bottom_rounded_corner.chrome") {
|
||||
@include _tabCornerSVG(
|
||||
"../icons/tab-bottom-corner-left-chrome.svg",
|
||||
"../icons/tab-bottom-corner-right-chrome.svg"
|
||||
);
|
||||
--uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chrome-clipped.svg");
|
||||
--uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chrome-clipped.svg");
|
||||
|
||||
--uc-tab-corner-size: 16px; // 18px;
|
||||
}
|
||||
@include Option("userChrome.tab.bottom_rounded_corner.chrome_legacy") {
|
||||
@include _tabCornerSVG(
|
||||
"../icons/tab-bottom-corner-left-chromeLegacy.svg",
|
||||
"../icons/tab-bottom-corner-right-chromeLegacy.svg"
|
||||
);
|
||||
--uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chromeLegacy-clipped.svg");
|
||||
--uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chromeLegacy-clipped.svg");
|
||||
}
|
||||
@include Option("userChrome.tab.bottom_rounded_corner.edge") {
|
||||
@include _tabCornerSVG(
|
||||
"../icons/tab-bottom-corner-left-edge.svg",
|
||||
"../icons/tab-bottom-corner-right-edge.svg"
|
||||
);
|
||||
--uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-edge-clipped.svg");
|
||||
--uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-edge-clipped.svg");
|
||||
|
||||
--uc-tab-corner-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.tabbrowser-tab {
|
||||
@include Option("userChrome.tab.bottom_rounded_corner.all") {
|
||||
@include _bottomRoundedCornerOtherPadding;
|
||||
}
|
||||
@include NotOption("userChrome.tab.bottom_rounded_corner.all") {
|
||||
&[visuallyselected] {
|
||||
@include _bottomRoundedCornerOtherPadding {
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-background {
|
||||
&::before,
|
||||
&::after {
|
||||
/* Box */
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
bottom: -1px;
|
||||
|
||||
/* Shape */
|
||||
width: var(--uc-tab-corner-size);
|
||||
height: var(--uc-tab-corner-height);
|
||||
|
||||
/* Color */
|
||||
fill: transparent;
|
||||
-moz-context-properties: fill;
|
||||
|
||||
/* Image */
|
||||
// background-size: var(--tab-corner-rounding);
|
||||
background-size: cover, auto auto;
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
background-position: bottom, right top;
|
||||
background-attachment: scroll, fixed;
|
||||
|
||||
@include Option("userChrome.tab.bottom_rounded_corner.all") {
|
||||
content: "";
|
||||
}
|
||||
@include NotOption("userChrome.tab.color_like_toolbar") {
|
||||
/* Based on tab background
|
||||
background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none);
|
||||
|
||||
defaults
|
||||
background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
|
||||
background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage));
|
||||
*/
|
||||
fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important;
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
right: 100%;
|
||||
background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-bgimage);
|
||||
clip-path: var(--uc-tab-corner-left-side-clipPath);
|
||||
}
|
||||
&::after {
|
||||
left: 100%;
|
||||
background-image: var(--uc-tab-corner-right-side-svg), var(--uc-tab-corner-bgimage);
|
||||
clip-path: var(--uc-tab-corner-right-side-clipPath);
|
||||
}
|
||||
}
|
||||
|
||||
&[beforeselected-visible] .tab-background::after {
|
||||
--uc-tab-corner-right-side-svg: var(--uc-tab-corner-right-side-svg-clipped);
|
||||
}
|
||||
&[visuallyselected] + .tabbrowser-tab .tab-background::before {
|
||||
--uc-tab-corner-left-side-svg: var(--uc-tab-corner-left-side-svg-clipped);
|
||||
}
|
||||
// &[positionpinnedtabs] .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before {
|
||||
// background-image: var(--uc-tab-corner-left-side-svg), var(--lwt-header-image, none) !important;
|
||||
// }
|
||||
|
||||
&:is([visuallyselected], [multiselected]) .tab-background {
|
||||
--uc-tab-corner-bgimage: var(--lwt-header-image, none);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
|
||||
}
|
||||
}
|
||||
&:hover:not([visuallyselected], [multiselected]) .tab-background {
|
||||
&::before,
|
||||
&::after {
|
||||
fill: color-mix(in srgb, currentColor 11%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.tab.multi_selected") {
|
||||
.tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background {
|
||||
&::before,
|
||||
&::after {
|
||||
fill: var(--uc-multiselected-tab-bgcolor);
|
||||
}
|
||||
}
|
||||
}
|
||||
#tabbrowser-tabs[movingtab] .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background:-moz-lwtheme {
|
||||
--uc-tab-corner-bgimage: none;
|
||||
}
|
||||
|
||||
@include OS($linux) {
|
||||
/* Fill color for GTK */
|
||||
:root:not([lwtheme="true"]) .tabbrowser-tab {
|
||||
@include Option("userChrome.tab.box_shadow") {
|
||||
--uc-tab-shadow-color: rgba(0,0,0, 0.4);
|
||||
}
|
||||
&[visuallyselected] .tab-background {
|
||||
background-clip: content-box;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
/* As GTK Toolbar's background-color + background-image
|
||||
* --toolbar-non-lwt-bgcolor: -moz-dialog;
|
||||
* --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
|
||||
*/
|
||||
--uc-tab-corner-bgimage: linear-gradient(var(--toolbar-non-lwt-bgcolor), var(--toolbar-non-lwt-bgcolor));
|
||||
fill: rgba(255, 255, 255, .075);
|
||||
@include NotOption("userChrome.tab.color_like_toolbar") {
|
||||
fill: rgba(255, 255, 255, .15);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#tabbrowser-tabs {
|
||||
&[positionpinnedtabs],
|
||||
&:not([overflow]) .tabbrowser-tab[first-visible-tab],
|
||||
&[overflow] .tabbrowser-tab[first-visible-unpinned-tab] {
|
||||
margin-left: var(--uc-tab-corner-half-size) !important;
|
||||
}
|
||||
}
|
||||
.tabbrowser-tab[last-visible-tab] {
|
||||
margin-right: var(--uc-tab-corner-half-size) !important;
|
||||
}
|
||||
|
|
@ -1,36 +1,35 @@
|
|||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab[visuallyselected="true"]:not(:focus)
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
/* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9))
|
||||
Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
|
||||
box-shadow: 0 0 1px var(--toolbar-color) !important;
|
||||
}
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab[multiselected]:not([visuallyselected])
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
box-shadow: 0 0 1px color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important;
|
||||
$ucTabBasicShadow: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
|
||||
$ucTabAdditionalShadow: drop-shadow(0 0 2px rgba(128, 128, 142, 0.5));
|
||||
$ucTabBackgroundShadowSoft: drop-shadow(0 0 1px var(--uc-tab-shadow-color, transparent));
|
||||
$ucTabBackgroundShadowHard: drop-shadow(-1px -0.5px 0px var(--uc-tab-shadow-color, transparent))
|
||||
drop-shadow(1px -1px 0px var(--uc-tab-shadow-color, transparent));
|
||||
|
||||
#TabsToolbar {
|
||||
--uc-tab-shadow-color: var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))));
|
||||
--uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9)));
|
||||
}
|
||||
|
||||
/* Consider 0 0 4px rgba(128,128,142,0.9) -> 0 0 4px rgba(0,0,0,.4) new default */
|
||||
#TabsToolbar:not([brighttext])
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background {
|
||||
box-shadow: 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))),
|
||||
0 0 4px rgba(128, 128, 142, 0.5) !important;
|
||||
#tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
|
||||
box-shadow: unset !important;
|
||||
filter: $ucTabBasicShadow;
|
||||
}
|
||||
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
box-shadow: 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))) !important;
|
||||
:root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
|
||||
#TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab {
|
||||
&:is([selected], [multiselected]) {
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
filter: $ucTabBackgroundShadowSoft;
|
||||
}
|
||||
}
|
||||
|
||||
&[visuallyselected="true"]:not(:focus),
|
||||
&[multiselected]:not([visuallyselected]) {
|
||||
// Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9))
|
||||
// Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
|
||||
// Consider 0 0 4px rgba(128,128,142,0.9) -> 0 0 4px rgba(0,0,0,.4) new default */
|
||||
--uc-tab-shadow-color: var(--toolbar-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border
|
||||
|
|
@ -41,9 +40,9 @@
|
|||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
box-shadow: 0 0 0 1px
|
||||
var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))),
|
||||
0 0 4px rgba(128, 128, 142, 0.5) !important;
|
||||
--uc-tab-shadow-color: var(--uc-tab-shadow-color-bundle);
|
||||
filter: $ucTabBackgroundShadowHard
|
||||
$ucTabAdditionalShadow;
|
||||
}
|
||||
|
||||
:root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
|
||||
|
|
@ -52,6 +51,5 @@
|
|||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
box-shadow: 0 0 0 1px
|
||||
var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))) !important;
|
||||
filter: $ucTabBackgroundShadowHard;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,37 @@
|
|||
#tabbrowser-tabs:not([movingtab])
|
||||
#TabsToolbar {
|
||||
--uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 28%, var(--toolbar-bgcolor, transparent));
|
||||
|
||||
&[brighttext] {
|
||||
--uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent));
|
||||
}
|
||||
}
|
||||
|
||||
#tabbrowser-tabs:not([movingtab])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-background[multiselected]:not([selected]):-moz-lwtheme {
|
||||
background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)),
|
||||
linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
|
||||
}
|
||||
> .tab-background[multiselected]:not([selected]) {
|
||||
/* Original:
|
||||
background-attachment: scroll, scroll, fixed;
|
||||
background-color: transparent;
|
||||
background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)),
|
||||
linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
|
||||
var(--lwt-header-image, none);
|
||||
background-position: 0 0, 0 0, right top;
|
||||
background-repeat: repeat-x, repeat-x, no-repeat;
|
||||
background-size: auto 100%, auto 100%, auto auto;
|
||||
*/
|
||||
// background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)),
|
||||
// linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
|
||||
|
||||
.tab-background[multiselected="true"]:not([selected="true"]) > .tab-loading-burst:not([bursting]) {
|
||||
background: color-mix(in srgb, currentColor 65%, transparent);
|
||||
opacity: 0.3;
|
||||
background-attachment: scroll, fixed !important;
|
||||
background-color: transparent !important;
|
||||
background-image: linear-gradient(var(--uc-multiselected-tab-bgcolor), var(--uc-multiselected-tab-bgcolor)),
|
||||
var(--lwt-header-image, none) !important;
|
||||
background-position: 0 0, right top !important;
|
||||
background-repeat: repeat-x, no-repeat !important;
|
||||
background-size: auto 100%, auto auto !important;
|
||||
}
|
||||
#TabsToolbar[brighttext]
|
||||
.tab-background[multiselected="true"]:not([selected="true"])
|
||||
> .tab-loading-burst:not([bursting]) {
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
|
||||
@include Option("userChrome.tab.connect_to_window") {
|
||||
.tab-background[multiselected=true] {
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
--uc-sound-tab-label-position-x: 4px;
|
||||
}
|
||||
&[labeldirection=rtl],
|
||||
:not([labeldirection]):-moz-locale-dir(rtl) {
|
||||
&:not([labeldirection]):-moz-locale-dir(rtl) {
|
||||
--uc-sound-tab-label-position-x: -4px;
|
||||
}
|
||||
|
||||
|
|
|
|||
55
src/tab/unselected_tab/_bar_separator.scss
Normal file
55
src/tab/unselected_tab/_bar_separator.scss
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
// Using --tab-line-color at photon_line_contextline
|
||||
|
||||
.tab-stack::before {
|
||||
$barWidth: 3px;
|
||||
$barMargin: $barWidth + 2px;
|
||||
|
||||
/* Box Model */
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
||||
/* Position */
|
||||
top: 50%;
|
||||
left: 0%;
|
||||
transform: translateX(calc((var(--inline-tab-padding) - #{ $barMargin }) / 2)) translateY(calc(-50% + var(--tab-block-margin)));
|
||||
z-index: 1;
|
||||
|
||||
/* Bar shape */
|
||||
width: $barWidth;
|
||||
height: 20px;
|
||||
|
||||
/* Bar Color */
|
||||
background-color: var(--uc-bar-separator-color, var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255))));
|
||||
|
||||
@include Animate {
|
||||
transition-property: opacity, background-color;
|
||||
transition-duration: 0.2s;
|
||||
transition-timing-function: var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
|
||||
}
|
||||
}
|
||||
|
||||
:root[sessionrestored] {
|
||||
.tabbrowser-tab[busy] {
|
||||
.tab-stack::before {
|
||||
--uc-bar-separator-color: currentColor;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&[progress] .tab-stack::before {
|
||||
--uc-bar-separator-color: var(--tab-loading-fill);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
#TabsToolbar[brighttext] .tabbrowser-tab[busy] {
|
||||
&[progress]:not([selected=true]) .tab-stack::before {
|
||||
--uc-bar-separator-color: var(--lwt-tab-loading-fill-inactive, #84c1ff);
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.tab.unloaded") {
|
||||
.tabbrowser-tab[pending] .tab-stack::before {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue