468 lines
12 KiB
CSS
468 lines
12 KiB
CSS
/*== ShyFox Sidebar =================================================================================================================================
|
||
|
||
Styles for sidebar
|
||
|
||
|
||
--- JUST IMPORTANT THINGS ---------------------------------------------------------------------------------------------------------------------------
|
||
|
||
*/
|
||
|
||
/* reserve space for bookmarks toolbar */
|
||
:root{
|
||
--little-gap: calc(var(--margin) / 1.5);
|
||
--bookmarks-hgt: var(--toolbar-item-hgt);
|
||
}
|
||
|
||
/* remove space reserved for bookmarks toolbar if it hidden */
|
||
#main-window:has(#PersonalToolbar[collapsed="true"]) {
|
||
--little-gap: 0px;
|
||
--bookmarks-hgt: 0px;
|
||
}
|
||
|
||
/* if sidebar is not hidden or clean mode not enabled, this window is not floating popup and not in fullscreen video */
|
||
#main-window:not(:is([titlepreface*=""], [titlepreface*=""]))[chromehidden=""]:not([inDOMFullscreen="true"]){
|
||
/* set left margin to sidebar width */
|
||
--left-margin: var(--sdbr-wdt) !important;
|
||
}
|
||
|
||
/* hide sidebar splitter */
|
||
#sidebar-splitter {display: none}
|
||
|
||
/*
|
||
|
||
--- SIDEBAR SHOWN -----------------------------------------------------------------------------------------------------------------------------------
|
||
|
||
*/
|
||
|
||
/* styles for both sidebar and bookmarks toolbar */
|
||
#sidebar-box,
|
||
#PersonalToolbar
|
||
{
|
||
position: fixed;
|
||
overflow: visible;
|
||
z-index: 2 !important;
|
||
|
||
min-width: 0px !important;
|
||
max-width: 100vw !important;
|
||
|
||
left: 0px;
|
||
|
||
transition: var(--transition) !important;
|
||
background-color: transparent !important;
|
||
|
||
padding-top: 0 !important;
|
||
|
||
& > * {
|
||
opacity: var(--dyn-opct);
|
||
transition: var(--transition) !important;
|
||
}
|
||
}
|
||
|
||
/* styles for sidebar */
|
||
#sidebar-box{
|
||
|
||
top: calc(
|
||
var(--margin) / 2
|
||
+ var(--bookmarks-hgt)
|
||
);
|
||
|
||
height: calc(
|
||
100vh
|
||
- var(--margin) * 2
|
||
+ var(--margin) / 2
|
||
- var(--bookmarks-hgt)
|
||
)!important;
|
||
|
||
width: var(--sdbr-wdt) !important;
|
||
}
|
||
|
||
/* drag window by empty space in bookmarks toolbar */
|
||
#PersonalToolbar > *, #PlacesToolbarItems .bookmark-item[style="visibility: hidden;"]{
|
||
-moz-window-dragging: drag !important;
|
||
background-color: var(--debug-col-2) !important;
|
||
}
|
||
|
||
/* styles for bookmarks toolbar */
|
||
#PersonalToolbar{
|
||
visibility: visible !important;
|
||
height: var(--toolbar-item-hgt) !important;
|
||
top: 0px;
|
||
border-radius: var(--rounding);
|
||
margin-left: var(--buttonbox-left-wdt);
|
||
|
||
width: calc(
|
||
var(--sdbr-wdt)
|
||
- var(--buttonbox-left-wdt)
|
||
) !important;
|
||
|
||
padding-top: 2px !important;
|
||
padding-bottom: 2px !important;
|
||
|
||
&[collapsed="true"] {display: none}
|
||
}
|
||
|
||
/* padding for screenshot control buttons */
|
||
#main-window:not([titlepreface*=""]):has(#screenshotsPagePanel:not([hidden])){
|
||
#sidebar-box{
|
||
padding-bottom: calc(
|
||
var(--screenshot-tool-hgt)
|
||
- var(--margin)
|
||
+ var(--bottom-margin)
|
||
) !important;
|
||
}
|
||
}
|
||
|
||
/*
|
||
|
||
--- SIDEBAR HIDDEN ----------------------------------------------------------------------------------------------------------------------------------
|
||
|
||
*/
|
||
|
||
@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;
|
||
|
||
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)
|
||
);
|
||
|
||
/* 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);
|
||
}
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
}
|
||
|
||
/* 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);}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
/*
|
||
|
||
--- CUSTOMIZING PAGE --------------------------------------------------------------------------------------------------------------------------------
|
||
|
||
*/
|
||
|
||
#main-window[customizing]{
|
||
#PersonalToolbar{
|
||
top: 65px !important;
|
||
left: 20px !important;
|
||
margin-left: 0px !important;
|
||
|
||
border-radius: var(--big-rounding) !important;
|
||
|
||
background-color: var(--bg-col) !important;
|
||
}
|
||
|
||
/* remove text from bookmarks toolbar elements placeholder */
|
||
#bookmarks-toolbar-placeholder .toolbarbutton-text {display: none !important;}
|
||
}
|
||
|
||
|
||
/*
|
||
|
||
--- NOT SIDEBERY -----------------------------------------------------------------------------------------------------------------------------------
|
||
|
||
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 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 */
|
||
#main-window[chromehidden=""]:has(
|
||
#sidebar-box:not([hidden]):not([sidebarcommand*="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"])
|
||
) {
|
||
|
||
--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;
|
||
}
|
||
}
|
||
|
||
&[titlepreface*=""] {#sidebar {margin-bottom: calc(var(--margin) / 1.5) !important;}}
|
||
|
||
#sidebar-header{
|
||
#sidebar-close {display: none}
|
||
|
||
padding-bottom: 30px !important;
|
||
border: none !important;
|
||
|
||
/* info text */
|
||
&::before{
|
||
content: "";
|
||
width: 20px;
|
||
height: 20px;
|
||
position: absolute;
|
||
|
||
mask-image: url("chrome://global/skin/icons/info-filled.svg");
|
||
background-color: var(--shy-color);
|
||
mask-repeat: no-repeat;
|
||
|
||
top: 44px;
|
||
left: 10px;
|
||
}
|
||
|
||
&::after{
|
||
content: var(--shyfox-string-to-manage-tabs-open-sidebery);
|
||
position: absolute;
|
||
top: 45px;
|
||
font-size: 11.8px;
|
||
|
||
padding-left: 22px;
|
||
}
|
||
}
|
||
}
|
||
|
||
@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 */
|
||
|
||
/* 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;}
|
||
}
|
||
|
||
/* pinned tabs */
|
||
.tabbrowser-tab[pinned]{
|
||
position: initial !important;
|
||
margin-inline: 0px !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|