From 9fd24e9c8bb4c5d977e3f96c02da28faae9ba9bf Mon Sep 17 00:00:00 2001 From: Penelope Gwen Date: Mon, 23 Mar 2026 10:55:54 -0700 Subject: [PATCH] update librewolf configs --- .../librewolf/config/chrome/userContent.css | 310 +++++++++++++----- .../librewolf/development/chrome/sidebery.css | 201 ------------ .../development/chrome/userContent.css | 310 +++++++++++++----- .../librewolf/housing/chrome/userChrome.css | 73 +++++ .../chrome/userContent.css} | 118 +++++-- .../librewolf/penelope/chrome/sidebery.css | 201 ------------ .../librewolf/penelope/chrome/userContent.css | 310 +++++++++++++----- graphical/librewolf/profiles.ini | 12 +- .../librewolf/school/chrome/sidebery.css | 201 ------------ .../librewolf/school/chrome/userContent.css | 310 +++++++++++++----- graphical/librewolf/work/chrome/sidebery.css | 201 ------------ .../librewolf/work/chrome/userContent.css | 310 +++++++++++++----- 12 files changed, 1341 insertions(+), 1216 deletions(-) delete mode 100644 graphical/librewolf/development/chrome/sidebery.css create mode 100644 graphical/librewolf/housing/chrome/userChrome.css rename graphical/librewolf/{config/chrome/sidebery.css => housing/chrome/userContent.css} (60%) delete mode 100644 graphical/librewolf/penelope/chrome/sidebery.css delete mode 100644 graphical/librewolf/school/chrome/sidebery.css delete mode 100644 graphical/librewolf/work/chrome/sidebery.css diff --git a/graphical/librewolf/config/chrome/userContent.css b/graphical/librewolf/config/chrome/userContent.css index 89416c9..0cf5b4f 100644 --- a/graphical/librewolf/config/chrome/userContent.css +++ b/graphical/librewolf/config/chrome/userContent.css @@ -1,4 +1,4 @@ -@import url("sidebery.css"); +/*@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. @@ -20,90 +20,248 @@ NOTE: You can use the userContent.css file without change preferences (about:con ************************************************************************************************************************************************************************************************************************************************************/ @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; -/* --darkreader-background-ffffff: var(--pogmom-background-color) !important; - --darkreader-bg--color-main-background-blur: var(--pogmom-background-color) !important;*/ -/* html,body { - [class*="header"],[class*="wrap"] { - background-color: 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-neutral-background: var(--pogmom-background-color) !important; - --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; - --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;*/ - /*background-color: transparent !important;*/ -/* }*/ -/* --background-color: var(--pogmom-background-color) !important; - --image-background: none; - --darkreader-bg--bgColor-default: var(--pogmom-background-color) !important; - --darkreader-neutral-background: var(--pogmom-background-color) !important; - --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; - --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;*/ -/* background-color: transparent !important;*/ - } +} -/* html, - body { - --darkreader-background-ffffff: var(--pogmom-background-color) !important; - background-color: var(--pogmom-background-color) !important; - }*/ -/* html, +@-moz-document domain(cloud.pogmom.me) { + + html, body { + background-image: none !important; --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; - } + 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(pogmom.me) { + + html, + body { + background-image: none !important; + --image-background: none; + background-color: var(--pogmom-background-color) !important; } - @-moz-document url-prefix("about"){ +} + +@-moz-document url-prefix("about") { + * { + background-color: var(--pogmom-background-color) !important; + } +} + +@-moz-document domain(*.*) { + + html, + body { + background-image: none !important; + background-color: var(--pogmom-background-color) !important; + * { - 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; - } + background: var(--pogmom-background-color) !important; } } } + + +/* 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; + --active-el-bg: [[[COLORHEX]]] !important; + --tabs-border-radius: 8px !important; + + @media -moz-pref("browser.tabs.allow_transparent_browser") and (not (-moz-platform: windows)) { + background-color: transparent !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: transparent; + mask: url("chrome://global/skin/icons/plus.svg") !important; + } + + .nav-item .audio, + .nav-item .bookmarks-badge-icon { + 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); + } + } +} \ No newline at end of file diff --git a/graphical/librewolf/development/chrome/sidebery.css b/graphical/librewolf/development/chrome/sidebery.css deleted file mode 100644 index a06d7d3..0000000 --- a/graphical/librewolf/development/chrome/sidebery.css +++ /dev/null @@ -1,201 +0,0 @@ -/* 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; - --active-el-bg: #795f7c7f !important; - --tabs-border-radius: 8px !important; - - @media -moz-pref( "browser.tabs.allow_transparent_browser") and (not (-moz-platform: windows)) { -/* background-color: #795f7c7f !important;*/ - background-color: transparent !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/graphical/librewolf/development/chrome/userContent.css b/graphical/librewolf/development/chrome/userContent.css index 89416c9..68aed6b 100644 --- a/graphical/librewolf/development/chrome/userContent.css +++ b/graphical/librewolf/development/chrome/userContent.css @@ -1,4 +1,4 @@ -@import url("sidebery.css"); +/*@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. @@ -20,90 +20,248 @@ NOTE: You can use the userContent.css file without change preferences (about:con ************************************************************************************************************************************************************************************************************************************************************/ @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; -/* --darkreader-background-ffffff: var(--pogmom-background-color) !important; - --darkreader-bg--color-main-background-blur: var(--pogmom-background-color) !important;*/ -/* html,body { - [class*="header"],[class*="wrap"] { - background-color: 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-neutral-background: var(--pogmom-background-color) !important; - --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; - --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;*/ - /*background-color: transparent !important;*/ -/* }*/ -/* --background-color: var(--pogmom-background-color) !important; - --image-background: none; - --darkreader-bg--bgColor-default: var(--pogmom-background-color) !important; - --darkreader-neutral-background: var(--pogmom-background-color) !important; - --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; - --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;*/ -/* background-color: transparent !important;*/ - } +} -/* html, - body { - --darkreader-background-ffffff: var(--pogmom-background-color) !important; - background-color: var(--pogmom-background-color) !important; - }*/ -/* html, +@-moz-document domain(cloud.pogmom.me) { + + html, body { + background-image: none !important; --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; - } + 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(pogmom.me) { + + html, + body { + background-image: none !important; + --image-background: none; + background-color: var(--pogmom-background-color) !important; } - @-moz-document url-prefix("about"){ +} + +@-moz-document url-prefix("about") { + * { + background-color: var(--pogmom-background-color) !important; + } +} + +@-moz-document domain(*.*) { + + html, + body { + background-image: none !important; + background-color: var(--pogmom-background-color) !important; + * { - 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; - } + background: var(--pogmom-background-color) !important; } } } + + +/* 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; + --active-el-bg: #795f7c7f !important; + --tabs-border-radius: 8px !important; + + @media -moz-pref("browser.tabs.allow_transparent_browser") and (not (-moz-platform: windows)) { + background-color: transparent !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: transparent; + mask: url("chrome://global/skin/icons/plus.svg") !important; + } + + .nav-item .audio, + .nav-item .bookmarks-badge-icon { + 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); + } + } +} \ No newline at end of file diff --git a/graphical/librewolf/housing/chrome/userChrome.css b/graphical/librewolf/housing/chrome/userChrome.css new file mode 100644 index 0000000..7004511 --- /dev/null +++ b/graphical/librewolf/housing/chrome/userChrome.css @@ -0,0 +1,73 @@ +#TabsToolbar { + display: none !important; +} +#navigator-toolbox { + 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; + --toolbar-bgcolor: #d7af8733 !important; + --toolbar-field-background-color: transparent !important; + --urlbar-box-bgcolor: transparent !important; +} +/*#tabbrowser-tabpanels { + display: flex; + align-items: center; + flex-grow: 0; +}*/ +/*.browserStack > browser {*/ +/*.deck-selected { + border: 5px solid red; +}*/ +.urlbar-input-container { + text-align: center !important; +} +#tabbrowser-tabpanels { + margin: 10px !important; + margin-left: 10px !important; + border-radius: 12px !important; + * { border-radius: 12px !important; } +} +#urlbar-searchmode-switcher { + display: none !important; +} +#sidebar-box { + background-color: transparent !important; +/* background-color: #11131766 !important;*/ + margin: 10px !important; + margin-right: 0px !important; + border-radius: 10px !important; + * { border-radius: 10px !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/graphical/librewolf/config/chrome/sidebery.css b/graphical/librewolf/housing/chrome/userContent.css similarity index 60% rename from graphical/librewolf/config/chrome/sidebery.css rename to graphical/librewolf/housing/chrome/userContent.css index 47bcb38..b4fb61a 100644 --- a/graphical/librewolf/config/chrome/sidebery.css +++ b/graphical/librewolf/housing/chrome/userContent.css @@ -1,7 +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: transparent; +} + +@-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 url-prefix("about") { + * { + 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; + } + } +} + + /* SPDX-License-Identifier: MPL-2.0 */ /* SPDX-FileCopyrightText: 2024 awwpotato */ -@-moz-document regexp("^moz-extension://.*?/sidebar/sidebar.html") -{ +@-moz-document regexp("^moz-extension://.*?/sidebar/sidebar.html") { + :root, .root, #root { @@ -12,11 +80,10 @@ --tabs-height: 30px !important; --nav-btn-width: 30px !important; --nav-btn-height: 28px !important; - --active-el-bg: [[[COLORHEX]]] !important; + --active-el-bg: #d7af8733 !important; --tabs-border-radius: 8px !important; - @media -moz-pref( "browser.tabs.allow_transparent_browser") and (not (-moz-platform: windows)) { -/* background-color: [[[COLORHEX]]] !important;*/ + @media -moz-pref("browser.tabs.allow_transparent_browser") and (not (-moz-platform: windows)) { background-color: transparent !important; --frame-bg: transparent !important; } @@ -26,20 +93,21 @@ .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 .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; @@ -74,7 +142,7 @@ padding: var(--tabs-margin) !important; } - @media not -moz-pref( "uc.tweak.sidebery.top-navbar") { + @media not -moz-pref("uc.tweak.sidebery.top-navbar") { .top-horizontal-box { order: 100 !important; margin-bottom: var(--tabs-margin) !important; @@ -86,17 +154,20 @@ 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") { + } + + @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") { + @media -moz-pref("uc.tweak.sidebery.big-pinned") { .PinnedTabsBar { display: grid !important; grid-gap: calc(3 * var(--tabs-margin)) !important; @@ -108,12 +179,11 @@ .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; + background-color: color-mix(in oklab, + var(--tabs-activated-bg) 25%, + transparent) !important; } } } @@ -125,9 +195,11 @@ 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 { @@ -136,16 +208,14 @@ /* replace new tab panel and new tab button with plus */ .NavigationBar #add_tp.nav-item .icon, - .new-tab-btn > svg { + .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; } @@ -174,12 +244,8 @@ &::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; + 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); @@ -198,4 +264,4 @@ margin: 0 var(--tabs-inner-gap) 0 calc(var(--tabs-inner-gap) + 2px); } } -} +} \ No newline at end of file diff --git a/graphical/librewolf/penelope/chrome/sidebery.css b/graphical/librewolf/penelope/chrome/sidebery.css deleted file mode 100644 index 666b17f..0000000 --- a/graphical/librewolf/penelope/chrome/sidebery.css +++ /dev/null @@ -1,201 +0,0 @@ -/* 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; - --active-el-bg: #746163a5 !important; - --tabs-border-radius: 8px !important; - - @media -moz-pref( "browser.tabs.allow_transparent_browser") and (not (-moz-platform: windows)) { -/* background-color: #746163a5 !important;*/ - background-color: transparent !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/graphical/librewolf/penelope/chrome/userContent.css b/graphical/librewolf/penelope/chrome/userContent.css index 89416c9..1581d12 100644 --- a/graphical/librewolf/penelope/chrome/userContent.css +++ b/graphical/librewolf/penelope/chrome/userContent.css @@ -1,4 +1,4 @@ -@import url("sidebery.css"); +/*@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. @@ -20,90 +20,248 @@ NOTE: You can use the userContent.css file without change preferences (about:con ************************************************************************************************************************************************************************************************************************************************************/ @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; -/* --darkreader-background-ffffff: var(--pogmom-background-color) !important; - --darkreader-bg--color-main-background-blur: var(--pogmom-background-color) !important;*/ -/* html,body { - [class*="header"],[class*="wrap"] { - background-color: 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-neutral-background: var(--pogmom-background-color) !important; - --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; - --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;*/ - /*background-color: transparent !important;*/ -/* }*/ -/* --background-color: var(--pogmom-background-color) !important; - --image-background: none; - --darkreader-bg--bgColor-default: var(--pogmom-background-color) !important; - --darkreader-neutral-background: var(--pogmom-background-color) !important; - --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; - --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;*/ -/* background-color: transparent !important;*/ - } +} -/* html, - body { - --darkreader-background-ffffff: var(--pogmom-background-color) !important; - background-color: var(--pogmom-background-color) !important; - }*/ -/* html, +@-moz-document domain(cloud.pogmom.me) { + + html, body { + background-image: none !important; --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; - } + 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(pogmom.me) { + + html, + body { + background-image: none !important; + --image-background: none; + background-color: var(--pogmom-background-color) !important; } - @-moz-document url-prefix("about"){ +} + +@-moz-document url-prefix("about") { + * { + background-color: var(--pogmom-background-color) !important; + } +} + +@-moz-document domain(*.*) { + + html, + body { + background-image: none !important; + background-color: var(--pogmom-background-color) !important; + * { - 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; - } + background: var(--pogmom-background-color) !important; } } } + + +/* 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; + --active-el-bg: #746163a5 !important; + --tabs-border-radius: 8px !important; + + @media -moz-pref("browser.tabs.allow_transparent_browser") and (not (-moz-platform: windows)) { + background-color: transparent !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: transparent; + mask: url("chrome://global/skin/icons/plus.svg") !important; + } + + .nav-item .audio, + .nav-item .bookmarks-badge-icon { + 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); + } + } +} \ No newline at end of file diff --git a/graphical/librewolf/profiles.ini b/graphical/librewolf/profiles.ini index 2747148..461ef74 100644 --- a/graphical/librewolf/profiles.ini +++ b/graphical/librewolf/profiles.ini @@ -19,13 +19,18 @@ Name=Penelope IsRelative=1 Path=penelope Default=1 -StoreID=bf331188 +StoreID=a61d59be ShowSelector=0 [General] StartWithLastProfile=1 Version=2 +[Profile4] +Name=testing +IsRelative=1 +Path=4z689ygf.testing + [Install6C4726F70D182CF7] Default=penelope Locked=1 @@ -35,8 +40,3 @@ Name=School IsRelative=1 Path=school -[Profile4] -Name=testing -IsRelative=1 -Path=4z689ygf.testing - diff --git a/graphical/librewolf/school/chrome/sidebery.css b/graphical/librewolf/school/chrome/sidebery.css deleted file mode 100644 index 0dc57b0..0000000 --- a/graphical/librewolf/school/chrome/sidebery.css +++ /dev/null @@ -1,201 +0,0 @@ -/* 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; - --active-el-bg: #d8af5f33 !important; - --tabs-border-radius: 8px !important; - - @media -moz-pref( "browser.tabs.allow_transparent_browser") and (not (-moz-platform: windows)) { -/* background-color: #d8af5f33 !important;*/ - background-color: transparent !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/graphical/librewolf/school/chrome/userContent.css b/graphical/librewolf/school/chrome/userContent.css index 89416c9..f2aeb0e 100644 --- a/graphical/librewolf/school/chrome/userContent.css +++ b/graphical/librewolf/school/chrome/userContent.css @@ -1,4 +1,4 @@ -@import url("sidebery.css"); +/*@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. @@ -20,90 +20,248 @@ NOTE: You can use the userContent.css file without change preferences (about:con ************************************************************************************************************************************************************************************************************************************************************/ @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; -/* --darkreader-background-ffffff: var(--pogmom-background-color) !important; - --darkreader-bg--color-main-background-blur: var(--pogmom-background-color) !important;*/ -/* html,body { - [class*="header"],[class*="wrap"] { - background-color: 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-neutral-background: var(--pogmom-background-color) !important; - --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; - --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;*/ - /*background-color: transparent !important;*/ -/* }*/ -/* --background-color: var(--pogmom-background-color) !important; - --image-background: none; - --darkreader-bg--bgColor-default: var(--pogmom-background-color) !important; - --darkreader-neutral-background: var(--pogmom-background-color) !important; - --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; - --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;*/ -/* background-color: transparent !important;*/ - } +} -/* html, - body { - --darkreader-background-ffffff: var(--pogmom-background-color) !important; - background-color: var(--pogmom-background-color) !important; - }*/ -/* html, +@-moz-document domain(cloud.pogmom.me) { + + html, body { + background-image: none !important; --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; - } + 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(pogmom.me) { + + html, + body { + background-image: none !important; + --image-background: none; + background-color: var(--pogmom-background-color) !important; } - @-moz-document url-prefix("about"){ +} + +@-moz-document url-prefix("about") { + * { + background-color: var(--pogmom-background-color) !important; + } +} + +@-moz-document domain(*.*) { + + html, + body { + background-image: none !important; + background-color: var(--pogmom-background-color) !important; + * { - 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; - } + background: var(--pogmom-background-color) !important; } } } + + +/* 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; + --active-el-bg: #d8af5f33 !important; + --tabs-border-radius: 8px !important; + + @media -moz-pref("browser.tabs.allow_transparent_browser") and (not (-moz-platform: windows)) { + background-color: transparent !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: transparent; + mask: url("chrome://global/skin/icons/plus.svg") !important; + } + + .nav-item .audio, + .nav-item .bookmarks-badge-icon { + 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); + } + } +} \ No newline at end of file diff --git a/graphical/librewolf/work/chrome/sidebery.css b/graphical/librewolf/work/chrome/sidebery.css deleted file mode 100644 index 89e7870..0000000 --- a/graphical/librewolf/work/chrome/sidebery.css +++ /dev/null @@ -1,201 +0,0 @@ -/* 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; - --active-el-bg: #4a5f768c !important; - --tabs-border-radius: 8px !important; - - @media -moz-pref( "browser.tabs.allow_transparent_browser") and (not (-moz-platform: windows)) { -/* background-color: #4a5f768c !important;*/ - background-color: transparent !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/graphical/librewolf/work/chrome/userContent.css b/graphical/librewolf/work/chrome/userContent.css index 89416c9..df1ca91 100644 --- a/graphical/librewolf/work/chrome/userContent.css +++ b/graphical/librewolf/work/chrome/userContent.css @@ -1,4 +1,4 @@ -@import url("sidebery.css"); +/*@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. @@ -20,90 +20,248 @@ NOTE: You can use the userContent.css file without change preferences (about:con ************************************************************************************************************************************************************************************************************************************************************/ @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; -/* --darkreader-background-ffffff: var(--pogmom-background-color) !important; - --darkreader-bg--color-main-background-blur: var(--pogmom-background-color) !important;*/ -/* html,body { - [class*="header"],[class*="wrap"] { - background-color: 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-neutral-background: var(--pogmom-background-color) !important; - --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; - --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;*/ - /*background-color: transparent !important;*/ -/* }*/ -/* --background-color: var(--pogmom-background-color) !important; - --image-background: none; - --darkreader-bg--bgColor-default: var(--pogmom-background-color) !important; - --darkreader-neutral-background: var(--pogmom-background-color) !important; - --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; - --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;*/ -/* background-color: transparent !important;*/ - } +} -/* html, - body { - --darkreader-background-ffffff: var(--pogmom-background-color) !important; - background-color: var(--pogmom-background-color) !important; - }*/ -/* html, +@-moz-document domain(cloud.pogmom.me) { + + html, body { + background-image: none !important; --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; - } + 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(pogmom.me) { + + html, + body { + background-image: none !important; + --image-background: none; + background-color: var(--pogmom-background-color) !important; } - @-moz-document url-prefix("about"){ +} + +@-moz-document url-prefix("about") { + * { + background-color: var(--pogmom-background-color) !important; + } +} + +@-moz-document domain(*.*) { + + html, + body { + background-image: none !important; + background-color: var(--pogmom-background-color) !important; + * { - 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; - } + background: var(--pogmom-background-color) !important; } } } + + +/* 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; + --active-el-bg: #4a5f768c !important; + --tabs-border-radius: 8px !important; + + @media -moz-pref("browser.tabs.allow_transparent_browser") and (not (-moz-platform: windows)) { + background-color: transparent !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: transparent; + mask: url("chrome://global/skin/icons/plus.svg") !important; + } + + .nav-item .audio, + .nav-item .bookmarks-badge-icon { + 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); + } + } +} \ No newline at end of file