lots of shenanigans
This commit is contained in:
Chris Cochrun
parent
7b40c2a507
commit
8c1c70df2b
334 changed files with 5328 additions and 7370 deletions
|
|
@ -9,7 +9,7 @@ Cool floating search panel
|
|||
@media not (-moz-bool-pref: "shyfox.disable.floating.search") {
|
||||
|
||||
/* styles for urlbar */
|
||||
#urlbar[breakout-extend]{
|
||||
#urlbar[breakout]{
|
||||
|
||||
#urlbar-input {font-size: 23.5px !important;}
|
||||
#urlbar-input-container, .urlbar-input-container {height: 50px !important;}
|
||||
|
|
@ -33,7 +33,7 @@ Cool floating search panel
|
|||
width: 64vw !important;
|
||||
|
||||
/* cool translucent background */
|
||||
&::backdrop{
|
||||
&:before{
|
||||
content: "";
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -194,8 +194,8 @@ Styles for dialogs e.g. "confirm deleting extension"
|
|||
position: fixed;
|
||||
z-index: -1;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
|
|
@ -568,13 +568,6 @@ File Edit View History Bookmarks Tools Help
|
|||
outline: 0px solid transparent;
|
||||
}
|
||||
|
||||
/* background color fix */
|
||||
#browser:not(.browser-toolbox-background) {
|
||||
:root[lwtheme] & {
|
||||
background-image: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
--- ACCENT COLOR ----------------------------------------------------------------------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -49,17 +49,12 @@ Navigation bar on top of the window
|
|||
border-top: 0px solid transparent !important;
|
||||
|
||||
top: 0px;
|
||||
left: var(--left-margin) !important;
|
||||
right: auto !important;
|
||||
|
||||
& > * {opacity: var(--dyn-opct);}
|
||||
}
|
||||
|
||||
@media not (-moz-bool-pref: "sidebar.revamp") {
|
||||
#nav-bar {
|
||||
left: var(--left-margin) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* centered navbar text */
|
||||
#urlbar:not(:is(
|
||||
[breakout][breakout-extend],
|
||||
|
|
|
|||
|
|
@ -1,101 +0,0 @@
|
|||
@media (-moz-bool-pref: "sidebar.revamp") {
|
||||
|
||||
@media not (-moz-bool-pref: "sidebar.verticalTabs") {
|
||||
#browser #tabbrowser-tabbox {
|
||||
margin-left: var(--margin) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "sidebar.verticalTabs") {
|
||||
#browser #tabbrowser-tabbox {
|
||||
margin-right: var(--toolbar-button-wdt) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#browser #tabbrowser-tabbox[sidebar-shown] {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
#browser #sidebar-box {
|
||||
padding-block-end: 0 !important;
|
||||
top: 0 !important;
|
||||
height: unset !important;
|
||||
margin-top: var(--top-margin) !important;
|
||||
margin-bottom: var(--bottom-margin) !important;
|
||||
transition: var(--transition) !important;
|
||||
|
||||
#sidebar {
|
||||
border-radius: var(--big-rounding) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#browser #sidebar-main {
|
||||
margin-top: var(--buttonbox-right-hgt) !important;
|
||||
}
|
||||
|
||||
#browser #sidebar-main {
|
||||
&:not(:has([expanded])) {
|
||||
width: var(--toolbar-button-wdt) !important;
|
||||
}
|
||||
|
||||
&:has([expanded]) {
|
||||
margin-inline-end: var(--space-small) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#browser #sidebar-box browser#sidebar {
|
||||
margin: unset !important;
|
||||
}
|
||||
|
||||
moz-button[view*="view"], moz-button[extension] {
|
||||
--button-outer-padding-inline-start: var(--toolbarbutton-outer-padding) !important;
|
||||
--button-outer-padding-inline-end: var(--toolbarbutton-outer-padding) !important;
|
||||
--button-size-icon: calc(var(--size-item-small) + (36px - 16px)) !important;
|
||||
--button-padding-icon: calc((var(--tab-min-height) - 16px) / 2) !important;
|
||||
--button-outer-padding-block-start: 0 !important;
|
||||
--button-outer-padding-block-end: 0 !important;
|
||||
--button-border-radius: var(--rounding) !important;
|
||||
margin-inline: var(--toolbarbutton-outer-padding) !important;
|
||||
margin-block: 3px !important;
|
||||
}
|
||||
|
||||
moz-button[view="viewCustomizeSidebar"] {
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
|
||||
/* Native vertical tabs */
|
||||
@media (-moz-bool-pref: "sidebar.verticalTabs") {
|
||||
#vertical-tabs {
|
||||
.tab-background {
|
||||
margin-inline-start: var(--toolbar-start-end-padding) !important;
|
||||
margin-inline-end: var(--toolbarbutton-outer-padding) !important;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding-inline: calc(var(--tab-inline-padding) - var(--tab-inner-inline-margin) + var(--toolbar-start-end-padding)) !important;
|
||||
}
|
||||
|
||||
#tabs-newtab-button {
|
||||
margin-inline-start: var(--toolbar-start-end-padding) !important;
|
||||
margin-inline-end: var(--toolbarbutton-outer-padding) !important;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs[expanded] {
|
||||
.tabbrowser-tab {
|
||||
padding-block: 1px 2px !important;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-block: 3px 2px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* When in Clean mode*/
|
||||
#main-window[titlepreface*=""]{
|
||||
#sidebar-main, #sidebar-launcher-splitter, #sidebar-box, #sidebar-splitter {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -118,149 +118,144 @@ Styles for sidebar
|
|||
|
||||
*/
|
||||
|
||||
@media not (-moz-bool-pref: "sidebar.revamp") {
|
||||
/* activate style when sidebar hidden or clean mode enabled (and not in customizing page) */
|
||||
#main-window:is([titlepreface*=""], [titlepreface*=""]):not([customizing]){
|
||||
|
||||
/* styles for both sidebar and bookmaarks toolbar */
|
||||
#sidebar-box,
|
||||
#sidebar-main,
|
||||
#PersonalToolbar
|
||||
{
|
||||
z-index: 99 !important;
|
||||
width: var(--sdbr-wdt) !important;
|
||||
/* activate style when sidebar hidden or clean mode enabled (and not in customizing page) */
|
||||
#main-window:is([titlepreface*=""], [titlepreface*=""]):not([customizing]){
|
||||
|
||||
/* styles for both sidebar and bookmaarks toolbar */
|
||||
#sidebar-box,
|
||||
#PersonalToolbar
|
||||
{
|
||||
z-index: 2 !important;
|
||||
width: var(--sdbr-wdt) !important;
|
||||
|
||||
left: calc(
|
||||
var(--left-margin)
|
||||
+ var(--panel-hide-ldg)
|
||||
- var(--sdbr-wdt)
|
||||
) !important;
|
||||
|
||||
border-radius: var(--big-rounding) !important;
|
||||
|
||||
/* hover target (invisible box between window edge and panel) */
|
||||
&::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -999;
|
||||
background-color: var(--debug-col);
|
||||
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
/* make all panel content invisible (it will visible when hover) */
|
||||
& > * {
|
||||
transition: var(--transition) !important;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* styles for sidebar */
|
||||
#sidebar-box{
|
||||
height: calc(
|
||||
100vh
|
||||
- var(--bookmarks-hgt)
|
||||
- var(--little-gap)
|
||||
- var(--top-margin)
|
||||
- var(--bottom-margin)
|
||||
- var(--margin) * 2
|
||||
) !important;
|
||||
|
||||
top: calc(
|
||||
var(--top-margin)
|
||||
+ var(--margin)
|
||||
+ var(--bookmarks-hgt) + var(--little-gap)
|
||||
);
|
||||
|
||||
/* indication bar (line on window edge) */
|
||||
&::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
transition: var(--transition);
|
||||
|
||||
left: calc(
|
||||
var(--left-margin)
|
||||
+ var(--panel-hide-ldg)
|
||||
- var(--sdbr-wdt)
|
||||
) !important;
|
||||
|
||||
border-radius: var(--big-rounding) !important;
|
||||
|
||||
/* hover target (invisible box between window edge and panel) */
|
||||
&::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -999;
|
||||
background-color: var(--debug-col);
|
||||
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
/* make all panel content invisible (it will visible when hover) */
|
||||
& > * {
|
||||
transition: var(--transition) !important;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* styles for sidebar */
|
||||
#sidebar-box, #sidebar-main{
|
||||
height: calc(
|
||||
100vh
|
||||
- var(--bookmarks-hgt)
|
||||
- var(--little-gap)
|
||||
- var(--top-margin)
|
||||
- var(--bottom-margin)
|
||||
- var(--margin) * 2
|
||||
) !important;
|
||||
|
||||
top: calc(
|
||||
var(--top-margin)
|
||||
+ var(--margin)
|
||||
+ var(--bookmarks-hgt) + var(--little-gap)
|
||||
100%
|
||||
- var(--panel-hide-ldg)
|
||||
- var(--margin)
|
||||
+ var(--hide-bar-padding)
|
||||
);
|
||||
|
||||
/* indication bar (line on window edge) */
|
||||
&::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
transition: var(--transition);
|
||||
|
||||
left: calc(
|
||||
100%
|
||||
- var(--panel-hide-ldg)
|
||||
- var(--margin)
|
||||
+ var(--hide-bar-padding)
|
||||
);
|
||||
|
||||
width: calc(var(--margin) - var(--hide-bar-padding) * 2 );
|
||||
height: calc(
|
||||
100%
|
||||
- var(--hide-bar-wdt-pad)
|
||||
+ var(--bookmarks-hgt)
|
||||
+ var(--little-gap)
|
||||
);
|
||||
|
||||
bottom: calc(var(--hide-bar-wdt-pad) / 2);
|
||||
border-radius: var(--rounding);
|
||||
background-color: var(--bt-col);
|
||||
opacity: var(--hide-bar-opct);
|
||||
}
|
||||
|
||||
width: calc(var(--margin) - var(--hide-bar-padding) * 2 );
|
||||
height: calc(
|
||||
100%
|
||||
- var(--hide-bar-wdt-pad)
|
||||
+ var(--bookmarks-hgt)
|
||||
+ var(--little-gap)
|
||||
);
|
||||
|
||||
bottom: calc(var(--hide-bar-wdt-pad) / 2);
|
||||
border-radius: var(--rounding);
|
||||
background-color: var(--bt-col);
|
||||
opacity: var(--hide-bar-opct);
|
||||
}
|
||||
}
|
||||
|
||||
/* add rounded corners to sidebar content */
|
||||
#sidebar {border-radius: var(--big-rounding) !important;}
|
||||
|
||||
/* styles for bookmarks */
|
||||
#PersonalToolbar{
|
||||
top: calc(var(--top-margin) + var(--margin));
|
||||
margin-left: 0px !important;
|
||||
overflow: visible !important;
|
||||
|
||||
/* add rounded corners to sidebar content */
|
||||
#sidebar{border-radius: var(--big-rounding) !important;}
|
||||
|
||||
/* styles for bookmarks */
|
||||
#PersonalToolbar{
|
||||
top: calc(var(--top-margin) + var(--margin));
|
||||
margin-left: 0px !important;
|
||||
overflow: visible !important;
|
||||
|
||||
padding-inline: 2px !important;
|
||||
|
||||
/* hover target between sidebar and bookmarks toolbar */
|
||||
&::after{
|
||||
content: "";
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
|
||||
background-color: var(--debug-col);
|
||||
opacity: 1 !important;
|
||||
|
||||
height: calc(var(--little-gap) + 4px);
|
||||
bottom: calc(-2px - var(--little-gap));
|
||||
|
||||
width: 150%;
|
||||
|
||||
right: 0px;
|
||||
}
|
||||
padding-inline: 2px !important;
|
||||
|
||||
/* hover target between sidebar and bookmarks toolbar */
|
||||
&::after{
|
||||
content: "";
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
|
||||
background-color: var(--debug-col);
|
||||
opacity: 1 !important;
|
||||
|
||||
height: calc(var(--little-gap) + 4px);
|
||||
bottom: calc(-2px - var(--little-gap));
|
||||
|
||||
width: 150%;
|
||||
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/* show sidebar on hover or focus (if not in clean mode) */
|
||||
&:not([titlepreface*=""]):has(
|
||||
/* show sidebar on hover or focus (if not in clean mode) */
|
||||
&:not([titlepreface*=""]):has(
|
||||
#sidebar-box:hover,
|
||||
#sidebar-box:focus-within,
|
||||
#sidebar-main:hover,
|
||||
#sidebar-main:focus-within,
|
||||
#PersonalToolbar:hover,
|
||||
#PersonalToolbar *:not(#firefox-view-button)[open],
|
||||
#sidebar-switcher-target[aria-expanded="true"]
|
||||
) {
|
||||
#sidebar-box,
|
||||
#sidebar-main,
|
||||
#PersonalToolbar
|
||||
{
|
||||
opacity: 1 !important;
|
||||
left: calc(var(--left-margin) + var(--margin)) !important;
|
||||
|
||||
background-color: var(--bg-col) !important;
|
||||
|
||||
border: var(--outline) !important;
|
||||
outline: var(--shadow) !important;
|
||||
|
||||
&::after{opacity: 0}
|
||||
|
||||
& > * {opacity: var(--dyn-opct);}
|
||||
}
|
||||
) {
|
||||
#sidebar-box,
|
||||
#PersonalToolbar
|
||||
{
|
||||
opacity: 1 !important;
|
||||
left: calc(var(--left-margin) + var(--margin)) !important;
|
||||
|
||||
background-color: var(--bg-col) !important;
|
||||
|
||||
border: var(--outline) !important;
|
||||
outline: var(--shadow) !important;
|
||||
|
||||
&::after{opacity: 0}
|
||||
|
||||
& > * {opacity: var(--dyn-opct);}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
--- CUSTOMIZING PAGE --------------------------------------------------------------------------------------------------------------------------------
|
||||
|
|
@ -291,53 +286,50 @@ Styles when Sidebery is not opened
|
|||
|
||||
*/
|
||||
|
||||
@media not (-moz-bool-pref: "sidebar.revamp") {
|
||||
/* hide sidebar header when Sidebery opened */
|
||||
#main-window:not([customizing]):has(
|
||||
#sidebar-box:not([hidden])[sidebarcommand*="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]
|
||||
) {
|
||||
#sidebar-header {display: none}
|
||||
/* hide sidebar header when Sidebery opened */
|
||||
#main-window:not([customizing]):has(
|
||||
#sidebar-box:not([hidden])[sidebarcommand*="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]
|
||||
) {
|
||||
#sidebar-header {display: none}
|
||||
}
|
||||
|
||||
/* hide sidebar button on toolbar when sidebar opened */
|
||||
#main-window:not([customizing]):has(
|
||||
#sidebar-box:not([hidden])
|
||||
) {
|
||||
#sidebar-button {display: none}
|
||||
}
|
||||
|
||||
/* color the sidebar button red */
|
||||
#sidebar-button .toolbarbutton-icon {
|
||||
background-color: red !important;
|
||||
fill: white !important;
|
||||
}
|
||||
|
||||
/* notification when sidebar is not opened */
|
||||
#main-window[chromehidden=""]:has(
|
||||
#sidebar-box[hidden="true"]
|
||||
) {
|
||||
--shyfox-string-open-sidebar: "Open sidebar!";
|
||||
&[lang="ru"]{--shyfox-string-open-sidebar: "Откройте боковую панель!";}
|
||||
|
||||
&::before{
|
||||
content: var(--shyfox-string-open-sidebar);
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
|
||||
font-weight: bold;
|
||||
|
||||
top: calc(var(--margin) + var(--toolbar-item-hgt));
|
||||
left: calc(var(--margin) * 2);
|
||||
|
||||
background-color: var(--tb-col);
|
||||
color: var(--bt-col);
|
||||
outline: 3px solid red;
|
||||
|
||||
border-radius: var(--big-rounding);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* hide sidebar button on toolbar when sidebar opened */
|
||||
#main-window:not([customizing]):has(
|
||||
#sidebar-box:not([hidden])
|
||||
) {
|
||||
#sidebar-button {display: none}
|
||||
}
|
||||
|
||||
/* color the sidebar button red */
|
||||
#sidebar-button .toolbarbutton-icon {
|
||||
background-color: red !important;
|
||||
fill: white !important;
|
||||
}
|
||||
|
||||
/* notification when sidebar is not opened */
|
||||
#main-window[chromehidden=""]:has(
|
||||
#sidebar-box[hidden="true"]
|
||||
) {
|
||||
--shyfox-string-open-sidebar: "Open sidebar!";
|
||||
&[lang="ru"]{--shyfox-string-open-sidebar: "Откройте боковую панель!";}
|
||||
|
||||
&::before{
|
||||
content: var(--shyfox-string-open-sidebar);
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
|
||||
font-weight: bold;
|
||||
|
||||
top: calc(var(--margin) + var(--toolbar-item-hgt));
|
||||
left: calc(var(--margin) * 2);
|
||||
|
||||
background-color: var(--tb-col);
|
||||
color: var(--bt-col);
|
||||
outline: 3px solid red;
|
||||
|
||||
border-radius: var(--big-rounding);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* styles when Sidebery is not opened but sidebar is */
|
||||
|
|
@ -348,11 +340,9 @@ Styles when Sidebery is not opened
|
|||
--shyfox-string-to-manage-tabs-open-sidebery: "To manage tabs, open Sidebery in this menu";
|
||||
&[lang="ru"]{--shyfox-string-to-manage-tabs-open-sidebery: "Для работы с вкладками откройте Sidebery";}
|
||||
|
||||
@media not (-moz-bool-pref: "sidebar.revamp") {
|
||||
#sidebar {
|
||||
border: var(--outline) !important;
|
||||
margin: 0 calc(var(--margin) / 1.5) !important;
|
||||
}
|
||||
#sidebar {
|
||||
border: var(--outline) !important;
|
||||
margin: 0 calc(var(--margin) / 1.5) !important;
|
||||
}
|
||||
|
||||
&[titlepreface*=""] {#sidebar {margin-bottom: calc(var(--margin) / 1.5) !important;}}
|
||||
|
|
@ -389,78 +379,76 @@ Styles when Sidebery is not opened
|
|||
}
|
||||
}
|
||||
|
||||
@media not (-moz-bool-pref: "sidebar.revamp") {
|
||||
/* assign the button to move the sidebar left and right to enable and disable native tabs for emergencies */
|
||||
/* assign the button to move the sidebar left and right to enable and disable native tabs for emergencies */
|
||||
|
||||
/* if Sidebery is not opened but sidebar is */
|
||||
#main-window:has(
|
||||
#sidebar-box:not([hidden]):not([sidebarcommand*="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"])
|
||||
) {
|
||||
|
||||
--shyfox-string-enable-native-tabs: "Enable native tabs";
|
||||
&[lang="ru"]{--shyfox-string-enable-native-tabs: "Включить нативные вкладки";}
|
||||
|
||||
#sidebarMenu-popup #sidebar-reverse-position{
|
||||
/* remove original text from this button */
|
||||
.menu-text {display: none !important;}
|
||||
|
||||
&::after{
|
||||
content: var(--shyfox-string-enable-native-tabs) !important;
|
||||
padding-inline: 5px;
|
||||
/* if Sidebery is not opened but sidebar is */
|
||||
#main-window:has(
|
||||
#sidebar-box:not([hidden]):not([sidebarcommand*="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"])
|
||||
) {
|
||||
|
||||
--shyfox-string-enable-native-tabs: "Enable native tabs";
|
||||
&[lang="ru"]{--shyfox-string-enable-native-tabs: "Включить нативные вкладки";}
|
||||
|
||||
#sidebarMenu-popup #sidebar-reverse-position{
|
||||
/* remove original text from this button */
|
||||
.menu-text {display: none !important;}
|
||||
|
||||
&::after{
|
||||
content: var(--shyfox-string-enable-native-tabs) !important;
|
||||
padding-inline: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* add rounded corners to sidebar content */
|
||||
#sidebar {border-radius: var(--big-rounding) !important;}
|
||||
|
||||
/* sidebar on left (native tabs disabled, default) */
|
||||
&:has(#sidebar-box[style*="order: 2"]){
|
||||
/* there is no styles */
|
||||
}
|
||||
|
||||
/* sidebar on right (native tabs enabled) */
|
||||
&:has(#sidebar-box[style*="order: 4"]){
|
||||
|
||||
/* add checkmark to button to indicate state */
|
||||
#sidebarMenu-popup #sidebar-reverse-position {background-image: url("../icons/menu-check.svg") !important;}
|
||||
|
||||
/* native tabs styling */
|
||||
#tabbrowser-tabs{
|
||||
--tabsbar-wdt: calc(
|
||||
(
|
||||
100vw
|
||||
- var(--margin) * 2
|
||||
- var(--left-margin)
|
||||
- var(--right-margin)
|
||||
) / 1.5
|
||||
);
|
||||
|
||||
display: flex !important;
|
||||
position: fixed !important;
|
||||
|
||||
width: var(--tabsbar-wdt) !important;
|
||||
height: 45px !important;
|
||||
padding: 0 !important;
|
||||
|
||||
left: calc(var(--left-margin) + var(--margin)) !important;
|
||||
top: calc(var(--top-margin) + var(--margin)) !important;
|
||||
|
||||
background-color: var(--tb-col) !important;
|
||||
border-radius: var(--big-rounding) !important;
|
||||
border: var(--outline) !important;
|
||||
outline: var(--shadow) !important;
|
||||
transition: var(--transition) !important;
|
||||
|
||||
.tabbrowser-tab:not([pinned]){
|
||||
min-width: 150px !important;
|
||||
.tab-close-button{display: flex !important;}
|
||||
}
|
||||
}
|
||||
|
||||
/* add rounded corners to sidebar content */
|
||||
#sidebar {border-radius: var(--big-rounding) !important;}
|
||||
|
||||
/* sidebar on left (native tabs disabled, default) */
|
||||
&:has(#sidebar-box[style*="order: 2"]){
|
||||
/* there is no styles */
|
||||
}
|
||||
|
||||
/* sidebar on right (native tabs enabled) */
|
||||
&:has(#sidebar-box[style*="order: 4"]){
|
||||
|
||||
/* add checkmark to button to indicate state */
|
||||
#sidebarMenu-popup #sidebar-reverse-position {background-image: url("../icons/menu-check.svg") !important;}
|
||||
|
||||
/* native tabs styling */
|
||||
#tabbrowser-tabs{
|
||||
--tabsbar-wdt: calc(
|
||||
(
|
||||
100vw
|
||||
- var(--margin) * 2
|
||||
- var(--left-margin)
|
||||
- var(--right-margin)
|
||||
) / 1.5
|
||||
);
|
||||
|
||||
display: flex !important;
|
||||
position: fixed !important;
|
||||
|
||||
width: var(--tabsbar-wdt) !important;
|
||||
height: 45px !important;
|
||||
padding: 0 !important;
|
||||
|
||||
left: calc(var(--left-margin) + var(--margin)) !important;
|
||||
top: calc(var(--top-margin) + var(--margin)) !important;
|
||||
|
||||
background-color: var(--tb-col) !important;
|
||||
border-radius: var(--big-rounding) !important;
|
||||
border: var(--outline) !important;
|
||||
outline: var(--shadow) !important;
|
||||
transition: var(--transition) !important;
|
||||
|
||||
.tabbrowser-tab:not([pinned]){
|
||||
min-width: 150px !important;
|
||||
.tab-close-button{display: flex !important;}
|
||||
}
|
||||
|
||||
/* pinned tabs */
|
||||
.tabbrowser-tab[pinned]{
|
||||
position: initial !important;
|
||||
margin-inline: 0px !important;
|
||||
}
|
||||
|
||||
/* pinned tabs */
|
||||
.tabbrowser-tab[pinned]{
|
||||
position: initial !important;
|
||||
margin-inline: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ Tab bar has been transformed into vertical toolbar on the right side of the wind
|
|||
/* hide some things */
|
||||
#tabbrowser-tabs, /* native tabs */
|
||||
#alltabs-button, /* all tabs button */
|
||||
.private-browsing-indicator-with-label,
|
||||
#private-browsing-indicator-with-label, /* private mode indicator */
|
||||
.titlebar-spacer
|
||||
|
||||
|
|
@ -130,9 +129,6 @@ Tab bar has been transformed into vertical toolbar on the right side of the wind
|
|||
cursor: vertical-text !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* omit margin */
|
||||
& > .toolbaritem-combined-buttons {margin-inline: 0 !important;}
|
||||
}
|
||||
|
||||
/* space for window controls */
|
||||
|
|
@ -145,167 +141,155 @@ Tab bar has been transformed into vertical toolbar on the right side of the wind
|
|||
}
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "sidebar.verticalTabs") {
|
||||
#TabsToolbar,
|
||||
#PanelUI-menu-button,
|
||||
#unified-extensions-button
|
||||
{
|
||||
margin-top: var(--buttonbox-right-hgt) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
--- TOOLBAR HIDDEN ----------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
*/
|
||||
|
||||
@media not (-moz-bool-pref: "sidebar.verticalTabs") {
|
||||
/* activate style when toolbar hidden or clean mode enabled (and not in customizing page) */
|
||||
#main-window:is([titlepreface*=""], [titlepreface*=""]):not([customizing]){
|
||||
/* activate style when toolbar hidden or clean mode enabled (and not in customizing page) */
|
||||
#main-window:is([titlepreface*=""], [titlepreface*=""]):not([customizing]){
|
||||
|
||||
/* styles for tabs toolbar and buttons */
|
||||
#TabsToolbar,
|
||||
#PanelUI-menu-button,
|
||||
#unified-extensions-button
|
||||
{
|
||||
top: calc(
|
||||
var(--margin)
|
||||
+ var(--top-margin)
|
||||
);
|
||||
|
||||
right: calc(
|
||||
var(--right-margin)
|
||||
+ var(--panel-hide-ldg)
|
||||
- var(--toolbar-button-wdt)
|
||||
);
|
||||
|
||||
bottom: auto;
|
||||
z-index: 3 !important;
|
||||
}
|
||||
|
||||
/* styles for tabs toolbar */
|
||||
#TabsToolbar{
|
||||
top: calc(
|
||||
var(--margin)
|
||||
+ var(--top-margin)
|
||||
- 3px
|
||||
);
|
||||
|
||||
/* styles for tabs toolbar and buttons */
|
||||
border-radius: var(--big-rounding);
|
||||
|
||||
/* hover target (invisible box between window edge and panel) */
|
||||
&::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -999;
|
||||
background-color: var(--debug-col);
|
||||
|
||||
width: 500%;
|
||||
height: 100%;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
/* indication bar (line on window edge) */
|
||||
&::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
transition: var(--transition);
|
||||
|
||||
right: calc(
|
||||
100%
|
||||
- var(--panel-hide-ldg)
|
||||
- var(--margin)
|
||||
+ var(--hide-bar-padding)
|
||||
);
|
||||
width: calc(var(--margin) - var(--hide-bar-padding) * 2);
|
||||
height: calc(100% - var(--hide-bar-wdt-pad));
|
||||
top: calc(var(--hide-bar-wdt-pad) / 2);
|
||||
|
||||
border-radius: var(--rounding);
|
||||
background-color: var(--bt-col);
|
||||
opacity: var(--hide-bar-opct);
|
||||
}
|
||||
}
|
||||
|
||||
/* make all panel content invisible (it will visible when hover) */
|
||||
:is(#PanelUI-menu-button, #unified-extensions-button) > *,
|
||||
#TabsToolbar-customization-target > *:not(#tabbrowser-tabs) {
|
||||
transition: var(--transition) !important;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#TabsToolbar-customization-target{
|
||||
/* make the toolbar height dynamic */
|
||||
position: relative !important;
|
||||
top: 0px !important;
|
||||
padding-bottom: 3px !important;
|
||||
|
||||
/* styled spacer */
|
||||
toolbarspring{
|
||||
background-color: color-mix(in srgb, var(--bt-col) 15%, var(--debug-col-2)) !important;
|
||||
border-radius: var(--rounding) !important;
|
||||
max-height: 1px !important;
|
||||
padding: 1px !important;
|
||||
scale: 0.75;
|
||||
}
|
||||
|
||||
/* limit toolbar items width */
|
||||
& > toolbarbutton {margin-left: 1px !important;}
|
||||
& > *:not(#tabbrowser-tabs) {max-width: var(--toolbar-button-wdt) !important;}
|
||||
}
|
||||
|
||||
/* styles for extensions button */
|
||||
#unified-extensions-button {margin-top: var(--toolbar-item-hgt) !important;}
|
||||
|
||||
/* show toolbar on hover or focus (if not in clean mode) */
|
||||
&:not([titlepreface*=""]):has(
|
||||
#TabsToolbar:hover
|
||||
.titlebar-buttonbox-container:not(:hover),
|
||||
#TabsToolbar-customization-target *:not(#firefox-view-button, tab)[open],
|
||||
#TabsToolbar-customization-target #searchbar:focus-within,
|
||||
#PanelUI-menu-button[open],
|
||||
#PanelUI-menu-button:hover,
|
||||
#unified-extensions-button[open],
|
||||
#unified-extensions-button:hover
|
||||
) {
|
||||
#TabsToolbar,
|
||||
#PanelUI-menu-button,
|
||||
#unified-extensions-button
|
||||
{
|
||||
top: calc(
|
||||
var(--margin)
|
||||
+ var(--top-margin)
|
||||
);
|
||||
|
||||
right: calc(
|
||||
var(--right-margin)
|
||||
+ var(--panel-hide-ldg)
|
||||
- var(--toolbar-button-wdt)
|
||||
);
|
||||
|
||||
bottom: auto;
|
||||
z-index: 3 !important;
|
||||
right: calc(var(--right-margin) + var(--margin));
|
||||
|
||||
& > *:not(.titlebar-buttonbox-container), #TabsToolbar-customization-target > * {opacity: 1 !important;}
|
||||
}
|
||||
|
||||
/* styles for tabs toolbar */
|
||||
#TabsToolbar{
|
||||
top: calc(
|
||||
var(--margin)
|
||||
+ var(--top-margin)
|
||||
- 3px
|
||||
);
|
||||
|
||||
border-radius: var(--big-rounding);
|
||||
|
||||
/* hover target (invisible box between window edge and panel) */
|
||||
&::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -999;
|
||||
background-color: var(--debug-col);
|
||||
|
||||
width: 500%;
|
||||
height: 100%;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
/* indication bar (line on window edge) */
|
||||
&::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
transition: var(--transition);
|
||||
|
||||
right: calc(
|
||||
100%
|
||||
- var(--panel-hide-ldg)
|
||||
- var(--margin)
|
||||
+ var(--hide-bar-padding)
|
||||
);
|
||||
width: calc(var(--margin) - var(--hide-bar-padding) * 2);
|
||||
height: calc(100% - var(--hide-bar-wdt-pad));
|
||||
top: calc(var(--hide-bar-wdt-pad) / 2);
|
||||
|
||||
border-radius: var(--rounding);
|
||||
background-color: var(--bt-col);
|
||||
opacity: var(--hide-bar-opct);
|
||||
}
|
||||
width: calc(var(--toolbar-button-wdt) + 4px) !important;
|
||||
padding-right: 0px !important;
|
||||
|
||||
background-color: var(--tb-col) !important;
|
||||
|
||||
border: var(--outline) !important;
|
||||
outline: var(--shadow) !important;
|
||||
|
||||
&::after{opacity: 0}
|
||||
}
|
||||
|
||||
/* make all panel content invisible (it will visible when hover) */
|
||||
:is(#PanelUI-menu-button, #unified-extensions-button) > *,
|
||||
#TabsToolbar-customization-target > *:not(#tabbrowser-tabs) {
|
||||
transition: var(--transition) !important;
|
||||
opacity: 0;
|
||||
|
||||
#PanelUI-menu-button,
|
||||
#unified-extensions-button{
|
||||
margin-right: 2px !important;
|
||||
}
|
||||
|
||||
#TabsToolbar-customization-target{
|
||||
/* make the toolbar height dynamic */
|
||||
position: relative !important;
|
||||
top: 0px !important;
|
||||
padding-bottom: 3px !important;
|
||||
|
||||
/* styled spacer */
|
||||
toolbarspring{
|
||||
background-color: color-mix(in srgb, var(--bt-col) 15%, var(--debug-col-2)) !important;
|
||||
border-radius: var(--rounding) !important;
|
||||
max-height: 1px !important;
|
||||
padding: 1px !important;
|
||||
scale: 0.75;
|
||||
}
|
||||
|
||||
/* limit toolbar items width */
|
||||
& > toolbarbutton {margin-left: 1px !important;}
|
||||
& > *:not(#tabbrowser-tabs) {max-width: var(--toolbar-button-wdt) !important;}
|
||||
|
||||
}
|
||||
|
||||
/* styles for extensions button */
|
||||
#unified-extensions-button {margin-top: var(--toolbar-item-hgt) !important;}
|
||||
|
||||
/* show toolbar on hover or focus (if not in clean mode) */
|
||||
&:not([titlepreface*=""]):has(
|
||||
#TabsToolbar:hover
|
||||
.titlebar-buttonbox-container:not(:hover),
|
||||
#TabsToolbar-customization-target *:not(#firefox-view-button, tab)[open],
|
||||
#TabsToolbar-customization-target #searchbar:focus-within,
|
||||
#PanelUI-menu-button[open],
|
||||
#PanelUI-menu-button:hover,
|
||||
#unified-extensions-button[open],
|
||||
#unified-extensions-button:hover
|
||||
) {
|
||||
#TabsToolbar,
|
||||
#PanelUI-menu-button,
|
||||
#unified-extensions-button
|
||||
{
|
||||
right: calc(var(--right-margin) + var(--margin));
|
||||
|
||||
& > *:not(.titlebar-buttonbox-container), #TabsToolbar-customization-target > * {opacity: 1 !important;}
|
||||
}
|
||||
#TabsToolbar{
|
||||
width: calc(var(--toolbar-button-wdt) + 4px) !important;
|
||||
padding-right: 0px !important;
|
||||
|
||||
background-color: var(--tb-col) !important;
|
||||
|
||||
border: var(--outline) !important;
|
||||
outline: var(--shadow) !important;
|
||||
|
||||
&::after{opacity: 0}
|
||||
}
|
||||
|
||||
#PanelUI-menu-button,
|
||||
#unified-extensions-button{
|
||||
margin-right: 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* downloads progress indicator bar */
|
||||
&:has(#downloads-button[progress="true"]){
|
||||
#TabsToolbar::after{
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
var(--shy-color) 0 var(--shy-download-pcent),
|
||||
var(--bt-col) var(--shy-download-pcent) 100%
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* downloads progress indicator bar */
|
||||
&:has(#downloads-button[progress="true"]){
|
||||
#TabsToolbar::after{
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
var(--shy-color) 0 var(--shy-download-pcent),
|
||||
var(--bt-col) var(--shy-download-pcent) 100%
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue