gah I forgot to stage all my new files
This commit is contained in:
Chris Cochrun
parent
bd5a4b0c0e
commit
9f4c905c03
319 changed files with 12157 additions and 14 deletions
329
.config/firefox/chrome/ShyFox/shy-toolbar.css
Normal file
329
.config/firefox/chrome/ShyFox/shy-toolbar.css
Normal file
|
|
@ -0,0 +1,329 @@
|
|||
/*== ShyFox Toolbar =================================================================================================================================
|
||||
|
||||
Tab bar has been transformed into vertical toolbar on the right side of the window
|
||||
|
||||
|
||||
--- JUST IMPORTANT THINGS ---------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
*/
|
||||
|
||||
/* if toolbar 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 right margin to toolbar width */
|
||||
--right-margin: var(--toolbar-button-wdt);
|
||||
}
|
||||
|
||||
/* hide some things */
|
||||
#tabbrowser-tabs, /* native tabs */
|
||||
#alltabs-button, /* all tabs button */
|
||||
#private-browsing-indicator-with-label, /* private mode indicator */
|
||||
.titlebar-spacer
|
||||
|
||||
{display: none}
|
||||
|
||||
/*
|
||||
|
||||
--- TOOLBAR SHOWN -----------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
*/
|
||||
|
||||
/* styles for tabs toolbar and buttons */
|
||||
#TabsToolbar,
|
||||
#PanelUI-menu-button,
|
||||
#unified-extensions-button
|
||||
{
|
||||
position: fixed;
|
||||
z-index: 1 !important;
|
||||
|
||||
width: var(--toolbar-button-wdt);
|
||||
right: 0px;
|
||||
|
||||
transition: var(--transition) !important;
|
||||
}
|
||||
|
||||
/* styles for menu button */
|
||||
#PanelUI-menu-button{
|
||||
top: 2px;
|
||||
|
||||
padding-right: 3px !important;
|
||||
min-height: var(--toolbar-item-hgt) !important;
|
||||
min-width: var(--toolbar-button-wdt) !important;
|
||||
|
||||
/* fit button size to other buttons in toolbar */
|
||||
.toolbarbutton-badge-stack{
|
||||
padding: calc((var(--tab-min-height) - 16px) / 2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* styles for extensions button */
|
||||
#unified-extensions-button{
|
||||
top: var(--toolbar-item-hgt);
|
||||
opacity: 1 !important;
|
||||
|
||||
/* fit button size to other buttons in toolbar */
|
||||
& > .toolbarbutton-icon {
|
||||
width: var(--toolbar-button-wdt) !important;
|
||||
height: var(--toolbar-item-hgt) !important;
|
||||
scale: 0.88;
|
||||
padding: 10.5px !important;
|
||||
border-radius: calc(var(--rounding) * 1.136363636) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* styles for tabs toolbar */
|
||||
#TabsToolbar{
|
||||
bottom: 2px;
|
||||
top: 2px;
|
||||
background-color: transparent !important;
|
||||
padding-top: calc(var(--toolbar-item-hgt) * 2 + 3px) !important;
|
||||
}
|
||||
|
||||
/* vertical tabs toolbar orientation */
|
||||
#TabsToolbar-customization-target{
|
||||
position: absolute;
|
||||
|
||||
opacity: var(--dyn-opct);
|
||||
|
||||
right: 0;
|
||||
top: calc(var(--toolbar-item-hgt) * 2) !important;
|
||||
bottom: 0;
|
||||
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
align-content: center !important;
|
||||
width: var(--toolbar-button-wdt) !important;
|
||||
|
||||
& > * {padding: 3px !important;}
|
||||
|
||||
/* bookmarks inside toolbar */
|
||||
#PlacesToolbar {width: 40px !important;}
|
||||
|
||||
/* searchbar inside toolbar */
|
||||
--searchbar-hgt: 170px;
|
||||
#search-container{
|
||||
margin-inline: 0px !important;
|
||||
margin-block: 2px !important;
|
||||
padding: 5px !important;
|
||||
padding-block: 0px !important;
|
||||
|
||||
min-width: var(--toolbar-button-wdt) !important;
|
||||
width: var(--toolbar-button-wdt) !important;
|
||||
min-height: var(--toolbar-item-hgt) !important;
|
||||
max-height: var(--searchbar-hgt) !important;
|
||||
|
||||
#searchbar {height: var(--searchbar-hgt) !important;}
|
||||
|
||||
.searchbar-search-button, .search-go-container {position: absolute}
|
||||
.searchbar-search-button {margin-top: 5px !important;}
|
||||
.search-go-container {
|
||||
margin-top: calc(var(--searchbar-hgt) - 33px ) !important;
|
||||
margin-left: 1.48px !important;
|
||||
}
|
||||
|
||||
.searchbar-textbox{
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
padding-inline-start: 25px !important;
|
||||
padding-inline-end: 35px !important;
|
||||
cursor: vertical-text !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* space for window controls */
|
||||
#main-window:not([titlepreface*=""]){
|
||||
#TabsToolbar,
|
||||
#PanelUI-menu-button,
|
||||
#unified-extensions-button
|
||||
{
|
||||
margin-top: var(--buttonbox-right-hgt) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
--- TOOLBAR HIDDEN ----------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
*/
|
||||
|
||||
/* 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
|
||||
);
|
||||
|
||||
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
|
||||
{
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
--- CUSTOMIZING PAGE --------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
*/
|
||||
|
||||
#main-window[customizing]{
|
||||
#TabsToolbar{
|
||||
min-width: 0px !important;
|
||||
top: 50px !important;
|
||||
bottom: 10px !important;
|
||||
right: 10px !important;
|
||||
|
||||
border-radius: var(--big-rounding) !important;
|
||||
|
||||
background-color: var(--bg-col) !important;
|
||||
}
|
||||
|
||||
#PanelUI-menu-button{
|
||||
top: 50px !important;
|
||||
right: 10px !important;
|
||||
}
|
||||
|
||||
#TabsToolbar-customization-target toolbarpaletteitem {width: 46px !important;}
|
||||
#wrapper-search-container {max-height: var(--searchbar-hgt) !important;}
|
||||
#wrapper-unified-extensions-button {opacity: 1 !important;}
|
||||
|
||||
#unified-extensions-button{
|
||||
top: 90px !important;
|
||||
right: 10px !important;
|
||||
.toolbarbutton-icon {opacity: 0.5 !important;}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue