lots of shenanigans
This commit is contained in:
Chris Cochrun
parent
7b40c2a507
commit
8c1c70df2b
334 changed files with 5328 additions and 7370 deletions
339
.config/firefox/chrome.bak/ShyFox/shy-navbar.css
Normal file
339
.config/firefox/chrome.bak/ShyFox/shy-navbar.css
Normal file
|
|
@ -0,0 +1,339 @@
|
|||
/*== 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;}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue