339 lines
9.3 KiB
CSS
339 lines
9.3 KiB
CSS
/*== ShyFox Navbar ==================================================================================================================================
|
||
|
||
Navigation bar on top of the window
|
||
|
||
|
||
--- JUST IMPORTANT THINGS ---------------------------------------------------------------------------------------------------------------------------
|
||
|
||
*/
|
||
|
||
/* local variables */
|
||
:root{
|
||
--navbar-real-wdt: var(--navbar-wdt);
|
||
}
|
||
|
||
/* if navbar is not hidden, this window is not floating popup and not in fullscreen video */
|
||
#main-window:not(:is([titlepreface*=""], [titlepreface*=""]))[chromehidden=""]:not([inDOMFullscreen="true"]){
|
||
/* set top margin to navbar height */
|
||
--top-margin: calc(var(--toolbar-item-hgt)) !important;
|
||
}
|
||
|
||
/* padding tweak */
|
||
.toolbaritem-combined-buttons:not([widget-type="button-and-view"], [widget-type="custom"]), .toolbaritem-menu-buttons {
|
||
margin-inline-end: var(--toolbar-start-end-padding) !important;
|
||
}
|
||
#nav-bar-overflow-button {margin-inline-end: calc(var(--toolbar-start-end-padding) / 2) !important;}
|
||
|
||
/* limit items height */
|
||
#nav-bar-customization-target > * {max-height: var(--toolbar-item-hgt) !important;}
|
||
#nav-bar-customization-target {height: var(--toolbar-item-hgt) !important;}
|
||
|
||
#downloadsFooterButtons toolbarseparator {
|
||
margin-top: 6px !important;
|
||
padding-bottom: 2px !important;
|
||
}
|
||
|
||
/*
|
||
|
||
--- NAVBAR SHOWN ------------------------------------------------------------------------------------------------------------------------------------
|
||
|
||
*/
|
||
|
||
#nav-bar{
|
||
position: fixed !important;
|
||
z-index: 3 !important;
|
||
|
||
transition: var(--transition) !important;
|
||
|
||
background-color: transparent !important;
|
||
border-top: 0px solid transparent !important;
|
||
|
||
top: 0px;
|
||
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],
|
||
:focus-within
|
||
) ) {
|
||
#urlbar-input {text-align: center !important}
|
||
}
|
||
|
||
/* tab loading progress in urlbar background */
|
||
#main-window:not([customizing]):not([titlepreface*=""]):has(.tabbrowser-tab[selected][busy]) #urlbar:not([breakout-extend]) #urlbar-background{
|
||
background: linear-gradient(
|
||
to right,
|
||
color-mix(in srgb, var(--shy-color) 10%, transparent) 0 var(--shy-tab-load-pcent),
|
||
color-mix(in srgb, var(--bt-col) 10%, transparent) var(--shy-tab-load-pcent) 100%
|
||
) !important;
|
||
}
|
||
|
||
/* space for window controls and magic width calculations (это пиздец) */
|
||
#main-window:not([customizing])[titlepreface*=""]:not(:is([titlepreface*=""], [titlepreface*=""])){
|
||
#nav-bar{
|
||
margin-right: calc(var(--buttonbox-right-wdt) - var(--nav-rgt-btnbx-margin));
|
||
width: calc(
|
||
100vw
|
||
- var(--left-margin)
|
||
- var(--right-margin)
|
||
- var(--buttonbox-right-wdt)
|
||
+ var(--nav-rgt-btnbx-margin)
|
||
) !important;
|
||
}
|
||
}
|
||
|
||
#main-window:not([customizing]):not([titlepreface*=""]):not(:is([titlepreface*=""], [titlepreface*=""])){
|
||
#nav-bar{
|
||
margin-right: calc(var(--buttonbox-right-wdt) - var(--nav-rgt-btnbx-button));
|
||
width: calc(
|
||
100vw
|
||
- var(--left-margin)
|
||
- var(--right-margin)
|
||
- var(--buttonbox-right-wdt)
|
||
+ var(--nav-rgt-btnbx-button)
|
||
) !important;
|
||
}
|
||
}
|
||
|
||
#main-window:not([customizing])[titlepreface*=""]:not(:is([titlepreface*=""], [titlepreface*=""])){
|
||
#nav-bar{
|
||
margin-left: calc(var(--buttonbox-left-wdt) - var(--nav-lft-btnbx-margin));
|
||
width: calc(
|
||
100vw
|
||
- var(--left-margin)
|
||
- var(--right-margin)
|
||
- var(--buttonbox-left-wdt)
|
||
+ var(--nav-lft-btnbx-margin)
|
||
- var(--buttonbox-right-wdt)
|
||
+ var(--nav-rgt-btnbx-button)
|
||
) !important;
|
||
}
|
||
}
|
||
|
||
#main-window:not([customizing])[titlepreface*=""][titlepreface*=""]:not(:is([titlepreface*=""], [titlepreface*=""])){
|
||
#nav-bar{
|
||
width: calc(
|
||
100vw
|
||
- var(--left-margin)
|
||
- var(--right-margin)
|
||
- var(--buttonbox-left-wdt)
|
||
+ var(--nav-lft-btnbx-margin)
|
||
- var(--buttonbox-right-wdt)
|
||
+ var(--nav-rgt-btnbx-margin)
|
||
) !important;
|
||
}
|
||
}
|
||
|
||
/*
|
||
|
||
--- NAVBAR HIDDEN -----------------------------------------------------------------------------------------------------------------------------------
|
||
|
||
*/
|
||
|
||
|
||
/* activate style when navbar hidden or clean mode enabled (and not in customizing page) */
|
||
#main-window:is([titlepreface*=""], [titlepreface*=""]):not([customizing]){
|
||
|
||
#nav-bar{
|
||
overflow: visible !important;
|
||
z-index: 4 !important;
|
||
|
||
border-radius: var(--big-rounding);
|
||
|
||
width: var(--navbar-real-wdt) !important;
|
||
max-width: calc(
|
||
100vw
|
||
- var(--left-margin)
|
||
- var(--right-margin)
|
||
);
|
||
|
||
top: calc(
|
||
var(--margin)
|
||
+ var(--panel-hide-ldg)
|
||
- var(--toolbar-item-hgt)
|
||
);
|
||
|
||
left: calc(
|
||
(
|
||
100vw
|
||
- var(--navbar-real-wdt)
|
||
+ var(--left-margin)
|
||
- var(--right-margin)
|
||
) / 2
|
||
) !important;
|
||
|
||
/* make all panel content invisible (it will visible when hover) */
|
||
#nav-bar-customization-target > *:not(#unified-extensions-button),
|
||
#nav-bar-overflow-button
|
||
{
|
||
transition: var(--transition) !important;
|
||
opacity: 0 !important;
|
||
}
|
||
|
||
/* hover target (invisible box between window edge and panel) */
|
||
#nav-bar-customization-target::before{
|
||
content: "";
|
||
position: absolute;
|
||
z-index: -999;
|
||
background-color: var(--debug-col);
|
||
height: 500%;
|
||
width: 100%;
|
||
bottom: 0px;
|
||
}
|
||
|
||
/* indication bar (line on window edge) */
|
||
&::before{
|
||
content: "";
|
||
position: absolute;
|
||
transition: var(--transition);
|
||
|
||
top: calc(
|
||
100%
|
||
- var(--panel-hide-ldg)
|
||
- var(--margin)
|
||
+ var(--hide-bar-padding)
|
||
);
|
||
|
||
height: calc(var(--margin) - var(--hide-bar-padding) * 2);
|
||
width: calc(100% - var(--hide-bar-wdt-pad));
|
||
left: calc(var(--hide-bar-wdt-pad) / 2);
|
||
|
||
border-radius: var(--rounding);
|
||
background-color: var(--bt-col);
|
||
opacity: var(--hide-bar-opct);
|
||
}
|
||
}
|
||
|
||
/* tab loading progress bar */
|
||
&:has(.tabbrowser-tab[selected][busy]) #nav-bar::before{
|
||
background: linear-gradient(
|
||
to right,
|
||
var(--shy-color) 0 var(--shy-tab-load-pcent),
|
||
var(--bt-col) var(--shy-tab-load-pcent) 100%
|
||
) !important;
|
||
}
|
||
|
||
/* tab loading progress on whole panel */
|
||
&:has(.tabbrowser-tab[selected][busy]) #nav-bar::after{
|
||
content: "";
|
||
position: absolute;
|
||
pointer-events: none;
|
||
z-index: -999;
|
||
width: 100%;
|
||
height: 100%;
|
||
bottom: 0px;
|
||
border-radius: var(--big-rounding);
|
||
opacity: 0;
|
||
background: linear-gradient(
|
||
to right,
|
||
var(--shy-color) 0 var(--shy-tab-load-pcent),
|
||
transparent var(--shy-tab-load-pcent) 100%
|
||
);
|
||
}
|
||
|
||
/* hotfix */
|
||
#urlbar{
|
||
visibility: collapse;
|
||
}
|
||
|
||
#urlbar-container::before {
|
||
content: "";
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: var(--rounding);
|
||
background-color: var(--toolbar-field-background-color);
|
||
}
|
||
|
||
|
||
/* show navbar on hover or focus */
|
||
&:has(
|
||
#nav-bar-customization-target:hover #unified-extensions-button:not(:hover),
|
||
#nav-bar-customization-target *:not(:is(#unified-extensions-button, #firefox-view-button))[open],
|
||
#nav-bar-customization-target #searchbar:focus-within,
|
||
#urlbar:focus-within,
|
||
#urlbar[breakout][breakout-extend],
|
||
#nav-bar-overflow-button[open],
|
||
#nav-bar-overflow-button:hover
|
||
) {
|
||
#nav-bar{
|
||
|
||
/* hotfix */
|
||
#urlbar{
|
||
visibility: visible !important;
|
||
transition: visibility 0s linear var(--trans-dur);
|
||
min-width: var(--urlbar-width) !important;
|
||
}
|
||
|
||
|
||
top: calc(var(--top-margin) + var(--margin));
|
||
|
||
background-color: var(--tb-col) !important;
|
||
|
||
/* corners, shadow */
|
||
border: var(--outline) !important;
|
||
outline: var(--shadow) !important;
|
||
|
||
#nav-bar-customization-target > *:not([disabled="true"]),
|
||
#nav-bar-overflow-button {opacity: 1 !important;}
|
||
#nav-bar-customization-target > *[disabled="true"] {opacity: 0.5 !important;}
|
||
|
||
&::before {opacity: 0;}
|
||
&::after {opacity: 0.1;} /* opacity of tab load progress indicator */
|
||
}
|
||
}
|
||
|
||
/* hide all */
|
||
&[titlepreface*=""]{
|
||
#nav-bar-customization-target > *:not(#urlbar-container, #unified-extensions-button) {display: none !important;}
|
||
}
|
||
|
||
/* adaptive navbar width */
|
||
@media (max-width: 1000px) {
|
||
#nav-bar{
|
||
--navbar-real-wdt: calc(
|
||
100vw
|
||
- var(--margin) * 2
|
||
- var(--right-margin)
|
||
- var(--buttonbox-left-wdt)
|
||
- var(--buttonbox-right-wdt)
|
||
) !important;
|
||
|
||
max-width: none !important;
|
||
left: calc(
|
||
var(--margin)
|
||
+ var(--buttonbox-left-wdt)
|
||
) !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
/*
|
||
|
||
--- CUSTOMIZING PAGE --------------------------------------------------------------------------------------------------------------------------------
|
||
|
||
*/
|
||
|
||
#main-window[customizing]{
|
||
#nav-bar{
|
||
left: 140px !important;
|
||
right: 140px !important;
|
||
|
||
width: calc(100vw - 280px) !important;
|
||
|
||
top: var(--margin) !important;
|
||
border-radius: var(--big-rounding) !important;
|
||
|
||
background-color: var(--bg-col) !important;
|
||
}
|
||
|
||
#urlbar-background, #searchbar {background-color: var(--tb-col) !important;}
|
||
} |