New backup 2025-10-10 16:30:01
This commit is contained in:
Penelope Gwen
parent
2955da5880
commit
5c4f225918
10 changed files with 944 additions and 1 deletions
|
|
@ -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; }*/
|
||||
|
||||
|
|
|
|||
198
de/home/.librewolf/development/chrome/sidebery.css
Normal file
198
de/home/.librewolf/development/chrome/sidebery.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
40
de/home/.librewolf/development/chrome/userChrome.css
Normal file
40
de/home/.librewolf/development/chrome/userChrome.css
Normal file
|
|
@ -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*/
|
||||
|
||||
}
|
||||
75
de/home/.librewolf/development/chrome/userContent.css
Normal file
75
de/home/.librewolf/development/chrome/userContent.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
198
de/home/.librewolf/penelope/chrome/sidebery.css
Normal file
198
de/home/.librewolf/penelope/chrome/sidebery.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
40
de/home/.librewolf/penelope/chrome/userChrome.css
Normal file
40
de/home/.librewolf/penelope/chrome/userChrome.css
Normal file
|
|
@ -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*/
|
||||
|
||||
}
|
||||
75
de/home/.librewolf/penelope/chrome/userContent.css
Normal file
75
de/home/.librewolf/penelope/chrome/userContent.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
198
de/home/.librewolf/work/chrome/sidebery.css
Normal file
198
de/home/.librewolf/work/chrome/sidebery.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
40
de/home/.librewolf/work/chrome/userChrome.css
Normal file
40
de/home/.librewolf/work/chrome/userChrome.css
Normal file
|
|
@ -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*/
|
||||
|
||||
}
|
||||
75
de/home/.librewolf/work/chrome/userContent.css
Normal file
75
de/home/.librewolf/work/chrome/userContent.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue