update librewolf configs
This commit is contained in:
Penelope Gwen
parent
d8f76ef84e
commit
9fd24e9c8b
12 changed files with 1341 additions and 1216 deletions
|
|
@ -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.
|
"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";
|
@charset "UTF-8";
|
||||||
|
|
||||||
/* Please write your custom CSS under this line*/
|
/* Please write your custom CSS under this line*/
|
||||||
:root {
|
:root {
|
||||||
/* --pogmom-background-color: rgba({{{bg-red}}},{{{bg-green}}},{{{bg-blue}}},{{{bg-alpha}}});*/
|
|
||||||
/* */
|
|
||||||
--pogmom-background-color: transparent;
|
--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 {
|
@-moz-document domain(cloud.pogmom.me) {
|
||||||
[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,
|
|
||||||
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,
|
html,
|
||||||
body {
|
body {
|
||||||
background-image: none !important;
|
background-image: none !important;
|
||||||
--image-background: none;
|
--image-background: none;
|
||||||
background-color: var(--pogmom-background-color) !important;
|
background-color: var(--pogmom-background-color) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@-moz-document domain(pogmom.me) {
|
|
||||||
|
@-moz-document domain(pogmom.me) {
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
background-image: none !important;
|
background-image: none !important;
|
||||||
--image-background: none;
|
--image-background: none;
|
||||||
background-color: var(--pogmom-background-color) !important;
|
background-color: var(--pogmom-background-color) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@-moz-document url-prefix("about"){
|
|
||||||
|
@-moz-document url-prefix("about") {
|
||||||
* {
|
* {
|
||||||
background-color: var(--pogmom-background-color) !important;
|
background-color: var(--pogmom-background-color) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@-moz-document domain(*.*) {
|
|
||||||
|
@-moz-document domain(*.*) {
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
background-image: none !important;
|
background-image: none !important;
|
||||||
background-color: var(--pogmom-background-color) !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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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.
|
"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";
|
@charset "UTF-8";
|
||||||
|
|
||||||
/* Please write your custom CSS under this line*/
|
/* Please write your custom CSS under this line*/
|
||||||
:root {
|
:root {
|
||||||
/* --pogmom-background-color: rgba({{{bg-red}}},{{{bg-green}}},{{{bg-blue}}},{{{bg-alpha}}});*/
|
|
||||||
/* */
|
|
||||||
--pogmom-background-color: transparent;
|
--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 {
|
@-moz-document domain(cloud.pogmom.me) {
|
||||||
[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,
|
|
||||||
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,
|
html,
|
||||||
body {
|
body {
|
||||||
background-image: none !important;
|
background-image: none !important;
|
||||||
--image-background: none;
|
--image-background: none;
|
||||||
background-color: var(--pogmom-background-color) !important;
|
background-color: var(--pogmom-background-color) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@-moz-document domain(pogmom.me) {
|
|
||||||
|
@-moz-document domain(pogmom.me) {
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
background-image: none !important;
|
background-image: none !important;
|
||||||
--image-background: none;
|
--image-background: none;
|
||||||
background-color: var(--pogmom-background-color) !important;
|
background-color: var(--pogmom-background-color) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@-moz-document url-prefix("about"){
|
|
||||||
|
@-moz-document url-prefix("about") {
|
||||||
* {
|
* {
|
||||||
background-color: var(--pogmom-background-color) !important;
|
background-color: var(--pogmom-background-color) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@-moz-document domain(*.*) {
|
|
||||||
|
@-moz-document domain(*.*) {
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
background-image: none !important;
|
background-image: none !important;
|
||||||
background-color: var(--pogmom-background-color) !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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
73
graphical/librewolf/housing/chrome/userChrome.css
Normal file
73
graphical/librewolf/housing/chrome/userChrome.css
Normal file
|
|
@ -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*/
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -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-License-Identifier: MPL-2.0 */
|
||||||
/* SPDX-FileCopyrightText: 2024 awwpotato */
|
/* SPDX-FileCopyrightText: 2024 awwpotato */
|
||||||
@-moz-document regexp("^moz-extension://.*?/sidebar/sidebar.html")
|
@-moz-document regexp("^moz-extension://.*?/sidebar/sidebar.html") {
|
||||||
{
|
|
||||||
:root,
|
:root,
|
||||||
.root,
|
.root,
|
||||||
#root {
|
#root {
|
||||||
|
|
@ -12,11 +80,10 @@
|
||||||
--tabs-height: 30px !important;
|
--tabs-height: 30px !important;
|
||||||
--nav-btn-width: 30px !important;
|
--nav-btn-width: 30px !important;
|
||||||
--nav-btn-height: 28px !important;
|
--nav-btn-height: 28px !important;
|
||||||
--active-el-bg: [[[COLORHEX]]] !important;
|
--active-el-bg: #d7af8733 !important;
|
||||||
--tabs-border-radius: 8px !important;
|
--tabs-border-radius: 8px !important;
|
||||||
|
|
||||||
@media -moz-pref( "browser.tabs.allow_transparent_browser") and (not (-moz-platform: windows)) {
|
@media -moz-pref("browser.tabs.allow_transparent_browser") and (not (-moz-platform: windows)) {
|
||||||
/* background-color: [[[COLORHEX]]] !important;*/
|
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
--frame-bg: transparent !important;
|
--frame-bg: transparent !important;
|
||||||
}
|
}
|
||||||
|
|
@ -26,20 +93,21 @@
|
||||||
.TabsPanel {
|
.TabsPanel {
|
||||||
--tabs-indent: 0px !important;
|
--tabs-indent: 0px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bookmarks-tree {
|
.bookmarks-tree {
|
||||||
--bookmarks-indent: 0px !important;
|
--bookmarks-indent: 0px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Tab:not([data-active="true"]) .close {
|
.Tab:not([data-active="true"]) .close {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.NavigationBar
|
.NavigationBar .main-items .nav-item[data-index="-1"]:not([data-active="true"]),
|
||||||
.main-items
|
|
||||||
.nav-item[data-index="-1"]:not([data-active="true"]),
|
|
||||||
.NavigationBar:not(:has(.nav-item:not([data-index="-1"]))) .static-btns {
|
.NavigationBar:not(:has(.nav-item:not([data-index="-1"]))) .static-btns {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 66px) {
|
@media (max-width: 66px) {
|
||||||
.NavigationBar .static-btns {
|
.NavigationBar .static-btns {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
|
|
@ -74,7 +142,7 @@
|
||||||
padding: var(--tabs-margin) !important;
|
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 {
|
.top-horizontal-box {
|
||||||
order: 100 !important;
|
order: 100 !important;
|
||||||
margin-bottom: var(--tabs-margin) !important;
|
margin-bottom: var(--tabs-margin) !important;
|
||||||
|
|
@ -86,17 +154,20 @@
|
||||||
top: auto !important;
|
top: auto !important;
|
||||||
bottom: 36px !important;
|
bottom: 36px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.NavigationBar.-top .hidden-panels-popup-layer::before {
|
.NavigationBar.-top .hidden-panels-popup-layer::before {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
}
|
}
|
||||||
} @media -moz-pref( "uc.tweak.sidebery.top-navbar") {
|
}
|
||||||
|
|
||||||
|
@media -moz-pref("uc.tweak.sidebery.top-navbar") {
|
||||||
.top-horizontal-box {
|
.top-horizontal-box {
|
||||||
margin-top: var(--tabs-margin) !important;
|
margin-top: var(--tabs-margin) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media -moz-pref( "uc.tweak.sidebery.big-pinned") {
|
@media -moz-pref("uc.tweak.sidebery.big-pinned") {
|
||||||
.PinnedTabsBar {
|
.PinnedTabsBar {
|
||||||
display: grid !important;
|
display: grid !important;
|
||||||
grid-gap: calc(3 * var(--tabs-margin)) !important;
|
grid-gap: calc(3 * var(--tabs-margin)) !important;
|
||||||
|
|
@ -108,12 +179,11 @@
|
||||||
.Tab[data-pin="true"] {
|
.Tab[data-pin="true"] {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
height: 100% !important;
|
height: 100% !important;
|
||||||
|
|
||||||
&:not([data-active="true"]) .body {
|
&:not([data-active="true"]) .body {
|
||||||
background-color: color-mix(
|
background-color: color-mix(in oklab,
|
||||||
in oklab,
|
|
||||||
var(--tabs-activated-bg) 25%,
|
var(--tabs-activated-bg) 25%,
|
||||||
transparent
|
transparent) !important;
|
||||||
) !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -125,9 +195,11 @@
|
||||||
height: 12px !important;
|
height: 12px !important;
|
||||||
width: 12px !important;
|
width: 12px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Tab .child-count {
|
.Tab .child-count {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Tab[data-audible="true"] .t-box .title,
|
.Tab[data-audible="true"] .t-box .title,
|
||||||
.Tab[data-muted="true"] .t-box .title,
|
.Tab[data-muted="true"] .t-box .title,
|
||||||
.Tab[data-paused="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 */
|
/* replace new tab panel and new tab button with plus */
|
||||||
.NavigationBar #add_tp.nav-item .icon,
|
.NavigationBar #add_tp.nav-item .icon,
|
||||||
.new-tab-btn > svg {
|
.new-tab-btn>svg {
|
||||||
fill: transparent;
|
fill: transparent;
|
||||||
/* background-color: var(--nav-btn-fg);*/
|
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
mask: url("chrome://global/skin/icons/plus.svg") !important;
|
mask: url("chrome://global/skin/icons/plus.svg") !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item .audio,
|
.nav-item .audio,
|
||||||
.nav-item .bookmarks-badge-icon {
|
.nav-item .bookmarks-badge-icon {
|
||||||
/* background-color: var(--frame-bg) !important;*/
|
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -174,12 +244,8 @@
|
||||||
&::after {
|
&::after {
|
||||||
content: "New Tab";
|
content: "New Tab";
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-left: calc(
|
margin-left: calc(var(--tabs-inner-gap) + var(--tabs-inner-gap) + 2px + 16px) !important;
|
||||||
var(--tabs-inner-gap) + var(--tabs-inner-gap) + 2px + 16px
|
width: calc(100% - (var(--tabs-inner-gap) + var(--tabs-inner-gap) + 2px + 16px)) !important;
|
||||||
) !important;
|
|
||||||
width: calc(
|
|
||||||
100% - (var(--tabs-inner-gap) + var(--tabs-inner-gap) + 2px + 16px)
|
|
||||||
) !important;
|
|
||||||
|
|
||||||
font: var(--tabs-font);
|
font: var(--tabs-font);
|
||||||
color: var(--tabs-normal-fg);
|
color: var(--tabs-normal-fg);
|
||||||
|
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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.
|
"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";
|
@charset "UTF-8";
|
||||||
|
|
||||||
/* Please write your custom CSS under this line*/
|
/* Please write your custom CSS under this line*/
|
||||||
:root {
|
:root {
|
||||||
/* --pogmom-background-color: rgba({{{bg-red}}},{{{bg-green}}},{{{bg-blue}}},{{{bg-alpha}}});*/
|
|
||||||
/* */
|
|
||||||
--pogmom-background-color: transparent;
|
--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 {
|
@-moz-document domain(cloud.pogmom.me) {
|
||||||
[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,
|
|
||||||
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,
|
html,
|
||||||
body {
|
body {
|
||||||
background-image: none !important;
|
background-image: none !important;
|
||||||
--image-background: none;
|
--image-background: none;
|
||||||
background-color: var(--pogmom-background-color) !important;
|
background-color: var(--pogmom-background-color) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@-moz-document domain(pogmom.me) {
|
|
||||||
|
@-moz-document domain(pogmom.me) {
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
background-image: none !important;
|
background-image: none !important;
|
||||||
--image-background: none;
|
--image-background: none;
|
||||||
background-color: var(--pogmom-background-color) !important;
|
background-color: var(--pogmom-background-color) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@-moz-document url-prefix("about"){
|
|
||||||
|
@-moz-document url-prefix("about") {
|
||||||
* {
|
* {
|
||||||
background-color: var(--pogmom-background-color) !important;
|
background-color: var(--pogmom-background-color) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@-moz-document domain(*.*) {
|
|
||||||
|
@-moz-document domain(*.*) {
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
background-image: none !important;
|
background-image: none !important;
|
||||||
background-color: var(--pogmom-background-color) !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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -19,13 +19,18 @@ Name=Penelope
|
||||||
IsRelative=1
|
IsRelative=1
|
||||||
Path=penelope
|
Path=penelope
|
||||||
Default=1
|
Default=1
|
||||||
StoreID=bf331188
|
StoreID=a61d59be
|
||||||
ShowSelector=0
|
ShowSelector=0
|
||||||
|
|
||||||
[General]
|
[General]
|
||||||
StartWithLastProfile=1
|
StartWithLastProfile=1
|
||||||
Version=2
|
Version=2
|
||||||
|
|
||||||
|
[Profile4]
|
||||||
|
Name=testing
|
||||||
|
IsRelative=1
|
||||||
|
Path=4z689ygf.testing
|
||||||
|
|
||||||
[Install6C4726F70D182CF7]
|
[Install6C4726F70D182CF7]
|
||||||
Default=penelope
|
Default=penelope
|
||||||
Locked=1
|
Locked=1
|
||||||
|
|
@ -35,8 +40,3 @@ Name=School
|
||||||
IsRelative=1
|
IsRelative=1
|
||||||
Path=school
|
Path=school
|
||||||
|
|
||||||
[Profile4]
|
|
||||||
Name=testing
|
|
||||||
IsRelative=1
|
|
||||||
Path=4z689ygf.testing
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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.
|
"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";
|
@charset "UTF-8";
|
||||||
|
|
||||||
/* Please write your custom CSS under this line*/
|
/* Please write your custom CSS under this line*/
|
||||||
:root {
|
:root {
|
||||||
/* --pogmom-background-color: rgba({{{bg-red}}},{{{bg-green}}},{{{bg-blue}}},{{{bg-alpha}}});*/
|
|
||||||
/* */
|
|
||||||
--pogmom-background-color: transparent;
|
--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 {
|
@-moz-document domain(cloud.pogmom.me) {
|
||||||
[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,
|
|
||||||
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,
|
html,
|
||||||
body {
|
body {
|
||||||
background-image: none !important;
|
background-image: none !important;
|
||||||
--image-background: none;
|
--image-background: none;
|
||||||
background-color: var(--pogmom-background-color) !important;
|
background-color: var(--pogmom-background-color) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@-moz-document domain(pogmom.me) {
|
|
||||||
|
@-moz-document domain(pogmom.me) {
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
background-image: none !important;
|
background-image: none !important;
|
||||||
--image-background: none;
|
--image-background: none;
|
||||||
background-color: var(--pogmom-background-color) !important;
|
background-color: var(--pogmom-background-color) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@-moz-document url-prefix("about"){
|
|
||||||
|
@-moz-document url-prefix("about") {
|
||||||
* {
|
* {
|
||||||
background-color: var(--pogmom-background-color) !important;
|
background-color: var(--pogmom-background-color) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@-moz-document domain(*.*) {
|
|
||||||
|
@-moz-document domain(*.*) {
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
background-image: none !important;
|
background-image: none !important;
|
||||||
background-color: var(--pogmom-background-color) !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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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.
|
"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";
|
@charset "UTF-8";
|
||||||
|
|
||||||
/* Please write your custom CSS under this line*/
|
/* Please write your custom CSS under this line*/
|
||||||
:root {
|
:root {
|
||||||
/* --pogmom-background-color: rgba({{{bg-red}}},{{{bg-green}}},{{{bg-blue}}},{{{bg-alpha}}});*/
|
|
||||||
/* */
|
|
||||||
--pogmom-background-color: transparent;
|
--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 {
|
@-moz-document domain(cloud.pogmom.me) {
|
||||||
[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,
|
|
||||||
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,
|
html,
|
||||||
body {
|
body {
|
||||||
background-image: none !important;
|
background-image: none !important;
|
||||||
--image-background: none;
|
--image-background: none;
|
||||||
background-color: var(--pogmom-background-color) !important;
|
background-color: var(--pogmom-background-color) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@-moz-document domain(pogmom.me) {
|
|
||||||
|
@-moz-document domain(pogmom.me) {
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
background-image: none !important;
|
background-image: none !important;
|
||||||
--image-background: none;
|
--image-background: none;
|
||||||
background-color: var(--pogmom-background-color) !important;
|
background-color: var(--pogmom-background-color) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@-moz-document url-prefix("about"){
|
|
||||||
|
@-moz-document url-prefix("about") {
|
||||||
* {
|
* {
|
||||||
background-color: var(--pogmom-background-color) !important;
|
background-color: var(--pogmom-background-color) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@-moz-document domain(*.*) {
|
|
||||||
|
@-moz-document domain(*.*) {
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
background-image: none !important;
|
background-image: none !important;
|
||||||
background-color: var(--pogmom-background-color) !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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Loading…
Add table
Reference in a new issue