346 lines
9.4 KiB
CSS
346 lines
9.4 KiB
CSS
/*== 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-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;
|
||
}
|
||
}
|
||
|
||
/* omit margin */
|
||
& > .toolbaritem-combined-buttons {margin-inline: 0 !important;}
|
||
}
|
||
|
||
/* space for window controls */
|
||
#main-window:not([titlepreface*=""]){
|
||
#TabsToolbar,
|
||
#PanelUI-menu-button,
|
||
#unified-extensions-button
|
||
{
|
||
margin-top: var(--buttonbox-right-hgt) !important;
|
||
}
|
||
}
|
||
|
||
@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]){
|
||
|
||
/* 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;}
|
||
}
|
||
}
|