From 5c4f22591864726b5b74a4a8c12e0fddd75e0ca8 Mon Sep 17 00:00:00 2001 From: Penelope Gwen Date: Fri, 10 Oct 2025 16:30:01 -0700 Subject: [PATCH] New backup 2025-10-10 16:30:01 --- .../.librewolf/config/chrome/userChrome.css | 6 +- .../development/chrome/sidebery.css | 198 ++++++++++++++++++ .../development/chrome/userChrome.css | 40 ++++ .../development/chrome/userContent.css | 75 +++++++ .../.librewolf/penelope/chrome/sidebery.css | 198 ++++++++++++++++++ .../.librewolf/penelope/chrome/userChrome.css | 40 ++++ .../penelope/chrome/userContent.css | 75 +++++++ de/home/.librewolf/work/chrome/sidebery.css | 198 ++++++++++++++++++ de/home/.librewolf/work/chrome/userChrome.css | 40 ++++ .../.librewolf/work/chrome/userContent.css | 75 +++++++ 10 files changed, 944 insertions(+), 1 deletion(-) create mode 100644 de/home/.librewolf/development/chrome/sidebery.css create mode 100644 de/home/.librewolf/development/chrome/userChrome.css create mode 100644 de/home/.librewolf/development/chrome/userContent.css create mode 100644 de/home/.librewolf/penelope/chrome/sidebery.css create mode 100644 de/home/.librewolf/penelope/chrome/userChrome.css create mode 100644 de/home/.librewolf/penelope/chrome/userContent.css create mode 100644 de/home/.librewolf/work/chrome/sidebery.css create mode 100644 de/home/.librewolf/work/chrome/userChrome.css create mode 100644 de/home/.librewolf/work/chrome/userContent.css diff --git a/de/home/.librewolf/config/chrome/userChrome.css b/de/home/.librewolf/config/chrome/userChrome.css index b13012d..db0f2fa 100644 --- a/de/home/.librewolf/config/chrome/userChrome.css +++ b/de/home/.librewolf/config/chrome/userChrome.css @@ -1,6 +1,10 @@ #TabsToolbar { display: none !important; } +#navigator-toolbox { + --toolbar-bgcolor: [[[COLORHEX]]] !important; + border-bottom: none !important; +} #sidebar-splitter { display: none !important; } @@ -8,7 +12,7 @@ #sidebar-header { display: none !important; } -:root { --tabpanel-background-color: [[[BACKGROUNDHEX]]] !important; } +/*:root { --tabpanel-background-color: [[[BACKGROUNDHEX]]] !important; }*/ /*:root { --tabpanel-background-color: #11131700 !important; }*/ /*:root { --tabpanel-background-color: rgba(17,19,23,1) !important; }*/ diff --git a/de/home/.librewolf/development/chrome/sidebery.css b/de/home/.librewolf/development/chrome/sidebery.css new file mode 100644 index 0000000..a7cb3b8 --- /dev/null +++ b/de/home/.librewolf/development/chrome/sidebery.css @@ -0,0 +1,198 @@ +/* SPDX-License-Identifier: MPL-2.0 */ +/* SPDX-FileCopyrightText: 2024 awwpotato */ +@-moz-document regexp("^moz-extension://.*?/sidebar/sidebar.html") +{ + :root, + .root, + #root { + --general-border-radius: var(--uc-button-radius) !important; + --tabs-margin: 1.5px !important; + --tabs-pinned-height: 30px !important; + --tabs-pinned-width: 30px !important; + --tabs-height: 30px !important; + --nav-btn-width: 30px !important; + --nav-btn-height: 28px !important; + + @media -moz-pref( "browser.tabs.allow_transparent_browser") and (not (-moz-platform: windows)) { + background-color: #c29ac27f !important; + --frame-bg: transparent !important; + } + } + + @media (max-width: 40px) { + .TabsPanel { + --tabs-indent: 0px !important; + } + .bookmarks-tree { + --bookmarks-indent: 0px !important; + } + .Tab:not([data-active="true"]) .close { + display: none !important; + } + } + + .NavigationBar + .main-items + .nav-item[data-index="-1"]:not([data-active="true"]), + .NavigationBar:not(:has(.nav-item:not([data-index="-1"]))) .static-btns { + display: none !important; + } + @media (max-width: 66px) { + .NavigationBar .static-btns { + display: none !important; + } + } + + .NavigationBar .main-items .nav-item[data-index="-1"] { + opacity: 1 !important; + z-index: 1 !important; + transform: scale(1, 1) !important; + } + + .central-box { + margin-top: var(--tabs-margin) !important; + } + + .TabsPanel .new-tab-btns { + padding: 0 var(--tabs-margin) !important; + } + + #new-tab-btn { + width: 100% !important; + } + + .NavigationBar { + border-radius: 6px !important; + margin: 0.3px !important; + } + + #nav_bar { + background-color: transparent !important; + padding: var(--tabs-margin) !important; + } + + @media not -moz-pref( "uc.tweak.sidebery.top-navbar") { + .top-horizontal-box { + order: 100 !important; + margin-bottom: var(--tabs-margin) !important; + } + + .NavigationBar.-top .hidden-panels-popup { + position: absolute !important; + margin-top: -1000px !important; + top: auto !important; + bottom: 36px !important; + } + .NavigationBar.-top .hidden-panels-popup-layer::before { + display: none !important; + background-color: transparent !important; + } + } @media -moz-pref( "uc.tweak.sidebery.top-navbar") { + .top-horizontal-box { + margin-top: var(--tabs-margin) !important; + } + } + + @media -moz-pref( "uc.tweak.sidebery.big-pinned") { + .PinnedTabsBar { + display: grid !important; + grid-gap: calc(3 * var(--tabs-margin)) !important; + grid-template-rows: 3rem; + grid-auto-rows: 3rem; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 3rem), 1fr)); + } + + .Tab[data-pin="true"] { + width: 100% !important; + height: 100% !important; + &:not([data-active="true"]) .body { + background-color: color-mix( + in oklab, + var(--tabs-activated-bg) 25%, + transparent + ) !important; + } + } + } + + /* tab audio indicator */ + .Tab .audio { + top: 2px !important; + left: 2px !important; + height: 12px !important; + width: 12px !important; + } + .Tab .child-count { + display: none !important; + } + .Tab[data-audible="true"] .t-box .title, + .Tab[data-muted="true"] .t-box .title, + .Tab[data-paused="true"] .t-box .title { + transform: translateX(0px) !important; + } + + /* replace new tab panel and new tab button with plus */ + .NavigationBar #add_tp.nav-item .icon, + .new-tab-btn > svg { + fill: transparent; +/* background-color: var(--nav-btn-fg);*/ + background-color: transparent; + mask: url("chrome://global/skin/icons/plus.svg") !important; + } + + .nav-item .audio, + .nav-item .bookmarks-badge-icon { +/* background-color: var(--frame-bg) !important;*/ + background-color: transparent; + } + + /* new tab button */ + .TabsPanel .new-tab-btns { + height: calc(var(--tabs-height) + var(--tabs-margin)) !important; + width: calc(100% - var(--tabs-margin) * 2) !important; + padding: 0px !important; + padding-bottom: var(--tabs-margin) !important; + margin: 0 var(--tabs-margin); + border-radius: var(--tabs-border-radius); + + position: relative !important; + overflow: clip !important; + + & .new-tab-btn { + width: 100% !important; + height: 100% !important; + + justify-content: flex-start !important; + flex-wrap: nowrap !important; + overflow: clip !important; + min-width: unset !important; + position: relative !important; + + &::after { + content: "New Tab"; + position: relative; + margin-left: calc( + var(--tabs-inner-gap) + var(--tabs-inner-gap) + 2px + 16px + ) !important; + width: calc( + 100% - (var(--tabs-inner-gap) + var(--tabs-inner-gap) + 2px + 16px) + ) !important; + + font: var(--tabs-font); + color: var(--tabs-normal-fg); + white-space: nowrap; + display: block !important; + box-sizing: border-box; + text-align: start; + overflow: hidden; + transition: transform var(--d-fast); + mask: linear-gradient(-90deg, transparent, #000 8px, #000); + margin-right: 2px !important; + } + } + + & svg { + margin: 0 var(--tabs-inner-gap) 0 calc(var(--tabs-inner-gap) + 2px); + } + } +} diff --git a/de/home/.librewolf/development/chrome/userChrome.css b/de/home/.librewolf/development/chrome/userChrome.css new file mode 100644 index 0000000..1a30928 --- /dev/null +++ b/de/home/.librewolf/development/chrome/userChrome.css @@ -0,0 +1,40 @@ +#TabsToolbar { + display: none !important; +} +#navigator-toolbox { + --toolbar-bgcolor: #c29ac27f !important; + border-bottom: none !important; +} +#sidebar-splitter { + display: none !important; +} +/* #sidebar-header is hidden by default, change "none" to "inherit" to restore it. */ +#sidebar-header { + display: none !important; +} +/*:root { --tabpanel-background-color: #11131766 !important; }*/ +/*:root { --tabpanel-background-color: #11131700 !important; }*/ +/*:root { --tabpanel-background-color: rgba(17,19,23,1) !important; }*/ + +/************************************************************************************************************************************************************************************************************************************************************* + +"userChrome.css" is a custom CSS file that can be used to specify CSS style rules for Floorp's interface (NOT internal site) using "chrome" privileges. +For instance, if you want to hide the tab bar, you can use the following CSS rule: + +************************************** +#TabsToolbar { * + display: none !important; * +} * +************************************** + +NOTE: You can use the userChrome.css file without change preferences (about:config) + +Quote: https://userChrome.org | https://github.com/topics/userchrome + +************************************************************************************************************************************************************************************************************************************************************/ + +@charset "UTF-8"; +@-moz-document url(chrome://browser/content/browser.xhtml) { +/* Please write your custom CSS under this line*/ + +} diff --git a/de/home/.librewolf/development/chrome/userContent.css b/de/home/.librewolf/development/chrome/userContent.css new file mode 100644 index 0000000..0cf09c6 --- /dev/null +++ b/de/home/.librewolf/development/chrome/userContent.css @@ -0,0 +1,75 @@ +@import url("sidebery.css"); +/************************************************************************************************************************************************************************************************************************************************************* + +"userContent.css" is a custom CSS file that can be used to specify CSS style rules for Firefox's intenal site using "chrome" privileges. +For instance, if you want to apply CSS at "about:newtab" and "about:home", you can use the following CSS rule: + +*********************************************************************** +@-moz-document url-prefix("about:newtab"), url-prefix("about:home") { * + +background-color: green; + +* +* Write your css * * + * +} * +*********************************************************************** + +NOTE: You can use the userContent.css file without change preferences (about:config) + +************************************************************************************************************************************************************************************************************************************************************/ + +@charset "UTF-8"; +/* Please write your custom CSS under this line*/ +:root { +/* --pogmom-background-color: rgba({{{bg-red}}},{{{bg-green}}},{{{bg-blue}}},{{{bg-alpha}}});*/ + --pogmom-background-color: transparent; + --in-content-page-background: #00000000 !important; + --in-content-box-background: #00000088 !important; + --darkreader-bg--theme-bg-home: var(--pogmom-background-color) !important; + --darkreader-bg--theme-bg-home-custom: var(--pogmom-background-color) !important; + --color-background-plain: var(--pogmom-background-color) !important; + --background-color: var(--pogmom-background-color) !important; + --image-background: none; + --darkreader-bg--bgColor-default: var(--pogmom-background-color) !important; + --darkreader-bg--bgColor-canvas-default: var(--pogmom-background-color) !important; + --darkreader-background-ffffff: var(--pogmom-background-color) !important; + --darkreader-bg--main-bg-color: var(--pogmom-background-color) !important; + html, + body { + --image-background: none; + --darkreader-bg--theme-bg-home-custom: var(--pogmom-background-color) !important; + --darkreader-bg--theme-bg-home: var(--pogmom-background-color) !important; + --color-background-plain: var(--pogmom-background-color) !important; + --darkreader-bg--bgColor-default: var(--pogmom-background-color) !important; + --darkreader-bg--bgColor-canvas-default: var(--pogmom-background-color) !important; + --darkreader-background-ffffff: var(--pogmom-background-color) !important; + --darkreader-bg--main-bg-color: var(--pogmom-background-color) !important; + } + @-moz-document domain(cloud.pogmom.me) { + html, + body { + background-image: none !important; + --image-background: none; + background-color: var(--pogmom-background-color) !important; + } + } + @-moz-document domain(pogmom.me) { + html, + body { + background-image: none !important; + --image-background: none; + background-color: var(--pogmom-background-color) !important; + } + } + @-moz-document domain(*.*) { + html, + body { + background-image: none !important; + background-color: var(--pogmom-background-color) !important; + * { + background: var(--pogmom-background-color) !important; + } + } + } +} diff --git a/de/home/.librewolf/penelope/chrome/sidebery.css b/de/home/.librewolf/penelope/chrome/sidebery.css new file mode 100644 index 0000000..1f0339f --- /dev/null +++ b/de/home/.librewolf/penelope/chrome/sidebery.css @@ -0,0 +1,198 @@ +/* SPDX-License-Identifier: MPL-2.0 */ +/* SPDX-FileCopyrightText: 2024 awwpotato */ +@-moz-document regexp("^moz-extension://.*?/sidebar/sidebar.html") +{ + :root, + .root, + #root { + --general-border-radius: var(--uc-button-radius) !important; + --tabs-margin: 1.5px !important; + --tabs-pinned-height: 30px !important; + --tabs-pinned-width: 30px !important; + --tabs-height: 30px !important; + --nav-btn-width: 30px !important; + --nav-btn-height: 28px !important; + + @media -moz-pref( "browser.tabs.allow_transparent_browser") and (not (-moz-platform: windows)) { + background-color: #d6aeae33 !important; + --frame-bg: transparent !important; + } + } + + @media (max-width: 40px) { + .TabsPanel { + --tabs-indent: 0px !important; + } + .bookmarks-tree { + --bookmarks-indent: 0px !important; + } + .Tab:not([data-active="true"]) .close { + display: none !important; + } + } + + .NavigationBar + .main-items + .nav-item[data-index="-1"]:not([data-active="true"]), + .NavigationBar:not(:has(.nav-item:not([data-index="-1"]))) .static-btns { + display: none !important; + } + @media (max-width: 66px) { + .NavigationBar .static-btns { + display: none !important; + } + } + + .NavigationBar .main-items .nav-item[data-index="-1"] { + opacity: 1 !important; + z-index: 1 !important; + transform: scale(1, 1) !important; + } + + .central-box { + margin-top: var(--tabs-margin) !important; + } + + .TabsPanel .new-tab-btns { + padding: 0 var(--tabs-margin) !important; + } + + #new-tab-btn { + width: 100% !important; + } + + .NavigationBar { + border-radius: 6px !important; + margin: 0.3px !important; + } + + #nav_bar { + background-color: transparent !important; + padding: var(--tabs-margin) !important; + } + + @media not -moz-pref( "uc.tweak.sidebery.top-navbar") { + .top-horizontal-box { + order: 100 !important; + margin-bottom: var(--tabs-margin) !important; + } + + .NavigationBar.-top .hidden-panels-popup { + position: absolute !important; + margin-top: -1000px !important; + top: auto !important; + bottom: 36px !important; + } + .NavigationBar.-top .hidden-panels-popup-layer::before { + display: none !important; + background-color: transparent !important; + } + } @media -moz-pref( "uc.tweak.sidebery.top-navbar") { + .top-horizontal-box { + margin-top: var(--tabs-margin) !important; + } + } + + @media -moz-pref( "uc.tweak.sidebery.big-pinned") { + .PinnedTabsBar { + display: grid !important; + grid-gap: calc(3 * var(--tabs-margin)) !important; + grid-template-rows: 3rem; + grid-auto-rows: 3rem; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 3rem), 1fr)); + } + + .Tab[data-pin="true"] { + width: 100% !important; + height: 100% !important; + &:not([data-active="true"]) .body { + background-color: color-mix( + in oklab, + var(--tabs-activated-bg) 25%, + transparent + ) !important; + } + } + } + + /* tab audio indicator */ + .Tab .audio { + top: 2px !important; + left: 2px !important; + height: 12px !important; + width: 12px !important; + } + .Tab .child-count { + display: none !important; + } + .Tab[data-audible="true"] .t-box .title, + .Tab[data-muted="true"] .t-box .title, + .Tab[data-paused="true"] .t-box .title { + transform: translateX(0px) !important; + } + + /* replace new tab panel and new tab button with plus */ + .NavigationBar #add_tp.nav-item .icon, + .new-tab-btn > svg { + fill: transparent; +/* background-color: var(--nav-btn-fg);*/ + background-color: transparent; + mask: url("chrome://global/skin/icons/plus.svg") !important; + } + + .nav-item .audio, + .nav-item .bookmarks-badge-icon { +/* background-color: var(--frame-bg) !important;*/ + background-color: transparent; + } + + /* new tab button */ + .TabsPanel .new-tab-btns { + height: calc(var(--tabs-height) + var(--tabs-margin)) !important; + width: calc(100% - var(--tabs-margin) * 2) !important; + padding: 0px !important; + padding-bottom: var(--tabs-margin) !important; + margin: 0 var(--tabs-margin); + border-radius: var(--tabs-border-radius); + + position: relative !important; + overflow: clip !important; + + & .new-tab-btn { + width: 100% !important; + height: 100% !important; + + justify-content: flex-start !important; + flex-wrap: nowrap !important; + overflow: clip !important; + min-width: unset !important; + position: relative !important; + + &::after { + content: "New Tab"; + position: relative; + margin-left: calc( + var(--tabs-inner-gap) + var(--tabs-inner-gap) + 2px + 16px + ) !important; + width: calc( + 100% - (var(--tabs-inner-gap) + var(--tabs-inner-gap) + 2px + 16px) + ) !important; + + font: var(--tabs-font); + color: var(--tabs-normal-fg); + white-space: nowrap; + display: block !important; + box-sizing: border-box; + text-align: start; + overflow: hidden; + transition: transform var(--d-fast); + mask: linear-gradient(-90deg, transparent, #000 8px, #000); + margin-right: 2px !important; + } + } + + & svg { + margin: 0 var(--tabs-inner-gap) 0 calc(var(--tabs-inner-gap) + 2px); + } + } +} diff --git a/de/home/.librewolf/penelope/chrome/userChrome.css b/de/home/.librewolf/penelope/chrome/userChrome.css new file mode 100644 index 0000000..92ee375 --- /dev/null +++ b/de/home/.librewolf/penelope/chrome/userChrome.css @@ -0,0 +1,40 @@ +#TabsToolbar { + display: none !important; +} +#navigator-toolbox { + --toolbar-bgcolor: #d6aeae33 !important; + border-bottom: none !important; +} +#sidebar-splitter { + display: none !important; +} +/* #sidebar-header is hidden by default, change "none" to "inherit" to restore it. */ +#sidebar-header { + display: none !important; +} +/*:root { --tabpanel-background-color: #11131766 !important; }*/ +/*:root { --tabpanel-background-color: #11131700 !important; }*/ +/*:root { --tabpanel-background-color: rgba(17,19,23,1) !important; }*/ + +/************************************************************************************************************************************************************************************************************************************************************* + +"userChrome.css" is a custom CSS file that can be used to specify CSS style rules for Floorp's interface (NOT internal site) using "chrome" privileges. +For instance, if you want to hide the tab bar, you can use the following CSS rule: + +************************************** +#TabsToolbar { * + display: none !important; * +} * +************************************** + +NOTE: You can use the userChrome.css file without change preferences (about:config) + +Quote: https://userChrome.org | https://github.com/topics/userchrome + +************************************************************************************************************************************************************************************************************************************************************/ + +@charset "UTF-8"; +@-moz-document url(chrome://browser/content/browser.xhtml) { +/* Please write your custom CSS under this line*/ + +} diff --git a/de/home/.librewolf/penelope/chrome/userContent.css b/de/home/.librewolf/penelope/chrome/userContent.css new file mode 100644 index 0000000..0cf09c6 --- /dev/null +++ b/de/home/.librewolf/penelope/chrome/userContent.css @@ -0,0 +1,75 @@ +@import url("sidebery.css"); +/************************************************************************************************************************************************************************************************************************************************************* + +"userContent.css" is a custom CSS file that can be used to specify CSS style rules for Firefox's intenal site using "chrome" privileges. +For instance, if you want to apply CSS at "about:newtab" and "about:home", you can use the following CSS rule: + +*********************************************************************** +@-moz-document url-prefix("about:newtab"), url-prefix("about:home") { * + +background-color: green; + +* +* Write your css * * + * +} * +*********************************************************************** + +NOTE: You can use the userContent.css file without change preferences (about:config) + +************************************************************************************************************************************************************************************************************************************************************/ + +@charset "UTF-8"; +/* Please write your custom CSS under this line*/ +:root { +/* --pogmom-background-color: rgba({{{bg-red}}},{{{bg-green}}},{{{bg-blue}}},{{{bg-alpha}}});*/ + --pogmom-background-color: transparent; + --in-content-page-background: #00000000 !important; + --in-content-box-background: #00000088 !important; + --darkreader-bg--theme-bg-home: var(--pogmom-background-color) !important; + --darkreader-bg--theme-bg-home-custom: var(--pogmom-background-color) !important; + --color-background-plain: var(--pogmom-background-color) !important; + --background-color: var(--pogmom-background-color) !important; + --image-background: none; + --darkreader-bg--bgColor-default: var(--pogmom-background-color) !important; + --darkreader-bg--bgColor-canvas-default: var(--pogmom-background-color) !important; + --darkreader-background-ffffff: var(--pogmom-background-color) !important; + --darkreader-bg--main-bg-color: var(--pogmom-background-color) !important; + html, + body { + --image-background: none; + --darkreader-bg--theme-bg-home-custom: var(--pogmom-background-color) !important; + --darkreader-bg--theme-bg-home: var(--pogmom-background-color) !important; + --color-background-plain: var(--pogmom-background-color) !important; + --darkreader-bg--bgColor-default: var(--pogmom-background-color) !important; + --darkreader-bg--bgColor-canvas-default: var(--pogmom-background-color) !important; + --darkreader-background-ffffff: var(--pogmom-background-color) !important; + --darkreader-bg--main-bg-color: var(--pogmom-background-color) !important; + } + @-moz-document domain(cloud.pogmom.me) { + html, + body { + background-image: none !important; + --image-background: none; + background-color: var(--pogmom-background-color) !important; + } + } + @-moz-document domain(pogmom.me) { + html, + body { + background-image: none !important; + --image-background: none; + background-color: var(--pogmom-background-color) !important; + } + } + @-moz-document domain(*.*) { + html, + body { + background-image: none !important; + background-color: var(--pogmom-background-color) !important; + * { + background: var(--pogmom-background-color) !important; + } + } + } +} diff --git a/de/home/.librewolf/work/chrome/sidebery.css b/de/home/.librewolf/work/chrome/sidebery.css new file mode 100644 index 0000000..8c7fbe7 --- /dev/null +++ b/de/home/.librewolf/work/chrome/sidebery.css @@ -0,0 +1,198 @@ +/* SPDX-License-Identifier: MPL-2.0 */ +/* SPDX-FileCopyrightText: 2024 awwpotato */ +@-moz-document regexp("^moz-extension://.*?/sidebar/sidebar.html") +{ + :root, + .root, + #root { + --general-border-radius: var(--uc-button-radius) !important; + --tabs-margin: 1.5px !important; + --tabs-pinned-height: 30px !important; + --tabs-pinned-width: 30px !important; + --tabs-height: 30px !important; + --nav-btn-width: 30px !important; + --nav-btn-height: 28px !important; + + @media -moz-pref( "browser.tabs.allow_transparent_browser") and (not (-moz-platform: windows)) { + background-color: #4a5f767f !important; + --frame-bg: transparent !important; + } + } + + @media (max-width: 40px) { + .TabsPanel { + --tabs-indent: 0px !important; + } + .bookmarks-tree { + --bookmarks-indent: 0px !important; + } + .Tab:not([data-active="true"]) .close { + display: none !important; + } + } + + .NavigationBar + .main-items + .nav-item[data-index="-1"]:not([data-active="true"]), + .NavigationBar:not(:has(.nav-item:not([data-index="-1"]))) .static-btns { + display: none !important; + } + @media (max-width: 66px) { + .NavigationBar .static-btns { + display: none !important; + } + } + + .NavigationBar .main-items .nav-item[data-index="-1"] { + opacity: 1 !important; + z-index: 1 !important; + transform: scale(1, 1) !important; + } + + .central-box { + margin-top: var(--tabs-margin) !important; + } + + .TabsPanel .new-tab-btns { + padding: 0 var(--tabs-margin) !important; + } + + #new-tab-btn { + width: 100% !important; + } + + .NavigationBar { + border-radius: 6px !important; + margin: 0.3px !important; + } + + #nav_bar { + background-color: transparent !important; + padding: var(--tabs-margin) !important; + } + + @media not -moz-pref( "uc.tweak.sidebery.top-navbar") { + .top-horizontal-box { + order: 100 !important; + margin-bottom: var(--tabs-margin) !important; + } + + .NavigationBar.-top .hidden-panels-popup { + position: absolute !important; + margin-top: -1000px !important; + top: auto !important; + bottom: 36px !important; + } + .NavigationBar.-top .hidden-panels-popup-layer::before { + display: none !important; + background-color: transparent !important; + } + } @media -moz-pref( "uc.tweak.sidebery.top-navbar") { + .top-horizontal-box { + margin-top: var(--tabs-margin) !important; + } + } + + @media -moz-pref( "uc.tweak.sidebery.big-pinned") { + .PinnedTabsBar { + display: grid !important; + grid-gap: calc(3 * var(--tabs-margin)) !important; + grid-template-rows: 3rem; + grid-auto-rows: 3rem; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 3rem), 1fr)); + } + + .Tab[data-pin="true"] { + width: 100% !important; + height: 100% !important; + &:not([data-active="true"]) .body { + background-color: color-mix( + in oklab, + var(--tabs-activated-bg) 25%, + transparent + ) !important; + } + } + } + + /* tab audio indicator */ + .Tab .audio { + top: 2px !important; + left: 2px !important; + height: 12px !important; + width: 12px !important; + } + .Tab .child-count { + display: none !important; + } + .Tab[data-audible="true"] .t-box .title, + .Tab[data-muted="true"] .t-box .title, + .Tab[data-paused="true"] .t-box .title { + transform: translateX(0px) !important; + } + + /* replace new tab panel and new tab button with plus */ + .NavigationBar #add_tp.nav-item .icon, + .new-tab-btn > svg { + fill: transparent; +/* background-color: var(--nav-btn-fg);*/ + background-color: transparent; + mask: url("chrome://global/skin/icons/plus.svg") !important; + } + + .nav-item .audio, + .nav-item .bookmarks-badge-icon { +/* background-color: var(--frame-bg) !important;*/ + background-color: transparent; + } + + /* new tab button */ + .TabsPanel .new-tab-btns { + height: calc(var(--tabs-height) + var(--tabs-margin)) !important; + width: calc(100% - var(--tabs-margin) * 2) !important; + padding: 0px !important; + padding-bottom: var(--tabs-margin) !important; + margin: 0 var(--tabs-margin); + border-radius: var(--tabs-border-radius); + + position: relative !important; + overflow: clip !important; + + & .new-tab-btn { + width: 100% !important; + height: 100% !important; + + justify-content: flex-start !important; + flex-wrap: nowrap !important; + overflow: clip !important; + min-width: unset !important; + position: relative !important; + + &::after { + content: "New Tab"; + position: relative; + margin-left: calc( + var(--tabs-inner-gap) + var(--tabs-inner-gap) + 2px + 16px + ) !important; + width: calc( + 100% - (var(--tabs-inner-gap) + var(--tabs-inner-gap) + 2px + 16px) + ) !important; + + font: var(--tabs-font); + color: var(--tabs-normal-fg); + white-space: nowrap; + display: block !important; + box-sizing: border-box; + text-align: start; + overflow: hidden; + transition: transform var(--d-fast); + mask: linear-gradient(-90deg, transparent, #000 8px, #000); + margin-right: 2px !important; + } + } + + & svg { + margin: 0 var(--tabs-inner-gap) 0 calc(var(--tabs-inner-gap) + 2px); + } + } +} diff --git a/de/home/.librewolf/work/chrome/userChrome.css b/de/home/.librewolf/work/chrome/userChrome.css new file mode 100644 index 0000000..6939f57 --- /dev/null +++ b/de/home/.librewolf/work/chrome/userChrome.css @@ -0,0 +1,40 @@ +#TabsToolbar { + display: none !important; +} +#navigator-toolbox { + --toolbar-bgcolor: #4a5f767f !important; + border-bottom: none !important; +} +#sidebar-splitter { + display: none !important; +} +/* #sidebar-header is hidden by default, change "none" to "inherit" to restore it. */ +#sidebar-header { + display: none !important; +} +/*:root { --tabpanel-background-color: #111317cc !important; }*/ +/*:root { --tabpanel-background-color: #11131700 !important; }*/ +/*:root { --tabpanel-background-color: rgba(17,19,23,1) !important; }*/ + +/************************************************************************************************************************************************************************************************************************************************************* + +"userChrome.css" is a custom CSS file that can be used to specify CSS style rules for Floorp's interface (NOT internal site) using "chrome" privileges. +For instance, if you want to hide the tab bar, you can use the following CSS rule: + +************************************** +#TabsToolbar { * + display: none !important; * +} * +************************************** + +NOTE: You can use the userChrome.css file without change preferences (about:config) + +Quote: https://userChrome.org | https://github.com/topics/userchrome + +************************************************************************************************************************************************************************************************************************************************************/ + +@charset "UTF-8"; +@-moz-document url(chrome://browser/content/browser.xhtml) { +/* Please write your custom CSS under this line*/ + +} diff --git a/de/home/.librewolf/work/chrome/userContent.css b/de/home/.librewolf/work/chrome/userContent.css new file mode 100644 index 0000000..0cf09c6 --- /dev/null +++ b/de/home/.librewolf/work/chrome/userContent.css @@ -0,0 +1,75 @@ +@import url("sidebery.css"); +/************************************************************************************************************************************************************************************************************************************************************* + +"userContent.css" is a custom CSS file that can be used to specify CSS style rules for Firefox's intenal site using "chrome" privileges. +For instance, if you want to apply CSS at "about:newtab" and "about:home", you can use the following CSS rule: + +*********************************************************************** +@-moz-document url-prefix("about:newtab"), url-prefix("about:home") { * + +background-color: green; + +* +* Write your css * * + * +} * +*********************************************************************** + +NOTE: You can use the userContent.css file without change preferences (about:config) + +************************************************************************************************************************************************************************************************************************************************************/ + +@charset "UTF-8"; +/* Please write your custom CSS under this line*/ +:root { +/* --pogmom-background-color: rgba({{{bg-red}}},{{{bg-green}}},{{{bg-blue}}},{{{bg-alpha}}});*/ + --pogmom-background-color: transparent; + --in-content-page-background: #00000000 !important; + --in-content-box-background: #00000088 !important; + --darkreader-bg--theme-bg-home: var(--pogmom-background-color) !important; + --darkreader-bg--theme-bg-home-custom: var(--pogmom-background-color) !important; + --color-background-plain: var(--pogmom-background-color) !important; + --background-color: var(--pogmom-background-color) !important; + --image-background: none; + --darkreader-bg--bgColor-default: var(--pogmom-background-color) !important; + --darkreader-bg--bgColor-canvas-default: var(--pogmom-background-color) !important; + --darkreader-background-ffffff: var(--pogmom-background-color) !important; + --darkreader-bg--main-bg-color: var(--pogmom-background-color) !important; + html, + body { + --image-background: none; + --darkreader-bg--theme-bg-home-custom: var(--pogmom-background-color) !important; + --darkreader-bg--theme-bg-home: var(--pogmom-background-color) !important; + --color-background-plain: var(--pogmom-background-color) !important; + --darkreader-bg--bgColor-default: var(--pogmom-background-color) !important; + --darkreader-bg--bgColor-canvas-default: var(--pogmom-background-color) !important; + --darkreader-background-ffffff: var(--pogmom-background-color) !important; + --darkreader-bg--main-bg-color: var(--pogmom-background-color) !important; + } + @-moz-document domain(cloud.pogmom.me) { + html, + body { + background-image: none !important; + --image-background: none; + background-color: var(--pogmom-background-color) !important; + } + } + @-moz-document domain(pogmom.me) { + html, + body { + background-image: none !important; + --image-background: none; + background-color: var(--pogmom-background-color) !important; + } + } + @-moz-document domain(*.*) { + html, + body { + background-image: none !important; + background-color: var(--pogmom-background-color) !important; + * { + background: var(--pogmom-background-color) !important; + } + } + } +}