655 lines
18 KiB
CSS
655 lines
18 KiB
CSS
/*== ShyFox Global Styles ===========================================================================================================================
|
||
|
||
All sorts of important tweaks that don't belong in any category
|
||
|
||
|
||
--- BROWSER CONTENT ---------------------------------------------------------------------------------------------------------------------------------
|
||
|
||
Area where website is displayed
|
||
|
||
*/
|
||
|
||
/* set background color */
|
||
#appcontent .browserStack, #browser, .browserContainer {background: var(--bg-col)}
|
||
|
||
#browser #tabbrowser-tabbox {
|
||
/* shift website content relative to panels */
|
||
margin-left: var(--left-margin) !important;
|
||
margin-right: var(--right-margin) !important;
|
||
margin-top: var(--top-margin) !important;
|
||
margin-bottom: var(--bottom-margin) !important;
|
||
|
||
/* add smoothness to it */
|
||
transition: var(--transition) !important;
|
||
}
|
||
|
||
/* completely remove the browser interface in fullscreen videos and popups like login with Google or in a floating Bitwarden window */
|
||
#main-window:is(:not([chromehidden=""]), [inDOMFullscreen="true"]){
|
||
#navigator-toolbox {display: none !important;}
|
||
--margin: 0px !important;
|
||
}
|
||
|
||
/* some z-index */
|
||
#navigator-toolbox {z-index: 2 !important;}
|
||
#browser {z-index: 1 !important;}
|
||
|
||
/* if it not fullscreen video or floating window */
|
||
#main-window:not([inDOMFullscreen="true"])[chromehidden=""]{
|
||
|
||
/* if navbar is not hidden in f11 fullscreen or not only navbar is visible in f11 or window is not maximized in clean mode */
|
||
&:not(
|
||
:is(
|
||
:is([titlepreface*=""], [titlepreface*=""][titlepreface*=""])[inFullscreen="true"]),
|
||
[titlepreface*=""]:is([sizemode="maximized"], [inFullscreen="true"], [gtktiledwindow="true"])
|
||
){
|
||
|
||
/* add rounded corners and outline to browser content */
|
||
#tabbrowser-tabbox {
|
||
border-radius: var(--big-rounding) !important;
|
||
border: var(--outline);
|
||
outline: none !important;
|
||
}
|
||
|
||
#tabbrowser-tabpanels::after {
|
||
content: "";
|
||
margin: -1px;
|
||
border: var(--outline);
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: var(--big-rounding);
|
||
box-shadow: 0 0 0 100px var(--bg-col) !important;
|
||
clip-path: inset(0);
|
||
pointer-events: none;
|
||
}
|
||
}
|
||
|
||
/* if in f11 fullscreen sidebar active but navbar not */
|
||
&:not([titlepreface*=""]):not([titlepreface*=""])[titlepreface*=""][inFullscreen="true"]{
|
||
#appcontent browser {border-left: var(--outline);}
|
||
}
|
||
|
||
/* if in f11 fullscreen toolbar active but navbar not */
|
||
&:not([titlepreface*=""]):not([titlepreface*=""])[titlepreface*=""][inFullscreen="true"]{
|
||
#appcontent browser {border-right: var(--outline);}
|
||
}
|
||
|
||
/* if in f11 fullscreen nor toolbar or sidebar active but navbar is */
|
||
&:not([titlepreface*=""])[titlepreface*=""][titlepreface*=""]:not([titlepreface*=""])[inFullscreen="true"]{
|
||
#appcontent browser {border-top: var(--outline);}
|
||
}
|
||
}
|
||
|
||
/* private mode outline */
|
||
#main-window[privatebrowsingmode="temporary"]
|
||
{--outline: 1px solid var(--private-col) !important;}
|
||
|
||
/* drag window using border */
|
||
|
||
/* shared */
|
||
#browser::before,
|
||
#browser::after,
|
||
#navigator-toolbox::before,
|
||
#navigator-toolbox::after
|
||
{
|
||
position: fixed;
|
||
pointer-events: none;
|
||
-moz-window-dragging: drag;
|
||
|
||
content: "";
|
||
background-color: var(--debug-col-2);
|
||
}
|
||
|
||
/* top */
|
||
#browser::after {
|
||
height: calc(var(--top-margin) + 2px);
|
||
top: -1px;
|
||
width: 100vw;
|
||
}
|
||
|
||
/* bottom */
|
||
#browser::before {
|
||
height: calc(var(--bottom-margin) + 2px);
|
||
bottom: -1px;
|
||
width: 100vw;
|
||
}
|
||
|
||
/* left */
|
||
#navigator-toolbox::before{
|
||
width: calc(var(--bottom-margin) + 2px);
|
||
left: -1px;
|
||
height: 100vw;
|
||
}
|
||
|
||
/* right */
|
||
#navigator-toolbox::after{
|
||
width: calc(var(--right-margin) + 2px);
|
||
right: -1px;
|
||
height: 100vw;
|
||
}
|
||
|
||
/* statuspanel (that thing at the bottom of the screen that shows the address of the link you're hovering over) */
|
||
#statuspanel #statuspanel-label {
|
||
padding-inline: 6px !important;
|
||
border-radius: var(--big-rounding) !important;
|
||
|
||
background-color: var(--tb-col) !important;
|
||
color: var(--bt-col) !important;
|
||
|
||
border: var(--outline) !important;
|
||
outline: var(--shadow) !important;
|
||
}
|
||
|
||
/* rounded things */
|
||
richlistitem,
|
||
panel tree,
|
||
menulist,
|
||
button,
|
||
select,
|
||
input:not([type="checkbox"]),
|
||
#urlbar-background,
|
||
#preview-image,
|
||
.ctrlTab-canvas,
|
||
.ctrlTab-canvas *
|
||
|
||
{border-radius: var(--rounding) !important}
|
||
|
||
.ctrlTab-preview .ctrlTab-preview-inner,
|
||
#ctrlTab-showAll,
|
||
richlistbox
|
||
{border-radius: var(--big-rounding) !important;}
|
||
|
||
/* disable pointer events in clean mode */
|
||
#main-window[titlepreface*=""]{
|
||
#nav-bar:not(:has(#urlbar[breakout-extend])),
|
||
#sidebar,
|
||
#TabsToolbar,
|
||
#PersonalToolbar
|
||
{pointer-events: none !important;}
|
||
}
|
||
|
||
/*
|
||
|
||
--- DIALOG ------------------------------------------------------------------------------------------------------------------------------------------
|
||
|
||
Styles for dialogs e.g. "confirm deleting extension"
|
||
|
||
*/
|
||
|
||
|
||
#commonDialogWindow, #commonDialogWindow .titleIcon{
|
||
background-color: transparent !important;
|
||
color: var(--bt-col) !important;
|
||
}
|
||
|
||
.dialogBox {
|
||
border-radius: var(--big-rounding) !important;
|
||
border: var(--outline) !important;
|
||
background-color: var(--tb-col) !important;
|
||
}
|
||
|
||
.dialogTemplate{
|
||
background-color: transparent !important;
|
||
:before{
|
||
content: "";
|
||
position: fixed;
|
||
z-index: -1;
|
||
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
left: 0px;
|
||
top: 0px;
|
||
|
||
background-color: color-mix(in srgb, var(--bg-col) 80%, transparent);
|
||
}
|
||
}
|
||
|
||
#window-modal-dialog {margin-top: var(--margin) !important;} /* shift top-aligned dialogs little bit lower */
|
||
.sizeDetermined #infoBody {min-height: 20px !important;} /* add minimal height to alert text */
|
||
#searchbar-anon-search-settings {margin-inline-end: 7px !important;} /* margin for settings button in searcbar popup */
|
||
#PopupSearchAutoComplete {--panel-border-radius: var(--big-rounding) !important;} /* rounding for this popup */
|
||
|
||
/* print dialog */
|
||
print-preview::before,
|
||
print-preview .previewStack::before,
|
||
.printPreviewNavigation::before
|
||
{display: none !important;}
|
||
|
||
.printDialogBox::before {border-radius: var(--rounding) !important;}
|
||
|
||
.printDialogBox {margin-top: var(--margin) !important;}
|
||
|
||
/*
|
||
|
||
--- SCREENSHOTS -------------------------------------------------------------------------------------------------------------------------------------
|
||
|
||
Ctrl + Shift + S
|
||
|
||
*/
|
||
|
||
#screenshotsPagePanel{
|
||
position: fixed !important;
|
||
transition: var(--transition);
|
||
|
||
bottom: calc(
|
||
var(--bottom-margin)
|
||
+ var(--screenshot-tool-hgt)
|
||
);
|
||
|
||
left: 0;
|
||
|
||
z-index: -1 !important;
|
||
width: var(--sdbr-wdt) !important;
|
||
}
|
||
|
||
/* for smooth transition */
|
||
#screenshotsPagePanel[hidden]{
|
||
display: flex !important;
|
||
opacity: 0;
|
||
pointer-events: none !important;
|
||
bottom: 0px !important;
|
||
}
|
||
|
||
screenshots-buttons{
|
||
background-color: transparent !important;
|
||
transition: var(--transition);
|
||
position: absolute !important;
|
||
display: flex !important;
|
||
height: var(--screenshot-tool-hgt) !important;
|
||
width: var(--sdbr-wdt) !important;
|
||
padding: calc(var(--margin) / 2) !important;
|
||
|
||
top: 0px !important;
|
||
inset-inline-end: 0px !important;
|
||
}
|
||
|
||
.screenshot-button{
|
||
width: calc(
|
||
var(--sdbr-wdt) / 2
|
||
- var(--margin) * 1.5
|
||
)!important;
|
||
|
||
margin: calc(var(--margin) / 2) !important;
|
||
padding-top: 56px !important;
|
||
background-position-y: 10px !important;
|
||
}
|
||
|
||
/* when sidebar hidden */
|
||
#main-window:is([titlepreface*=""], [titlepreface*=""]){
|
||
#screenshotsPagePanel{
|
||
bottom: calc(
|
||
var(--bottom-margin)
|
||
+ var(--margin)
|
||
+ var(--screenshot-tool-hgt)
|
||
);
|
||
|
||
left: calc(
|
||
var(--left-margin)
|
||
+ var(--margin)
|
||
);
|
||
}
|
||
|
||
screenshots-buttons {background-color: var(--bg-col) !important;}
|
||
}
|
||
|
||
|
||
/*
|
||
|
||
--- CONTEXT MENU ------------------------------------------------------------------------------------------------------------------------------------
|
||
|
||
Apply theme colors to context menus and menubar
|
||
|
||
*/
|
||
|
||
/* in page context menu */
|
||
#contentAreaContextMenu[showservicesmenu="true"],
|
||
#contentAreaContextMenu[showservicesmenu="true"] menupopup
|
||
{
|
||
--panel-background: var(--bg-col)!important;
|
||
--panel-border-color: var(--tb-col) !important;
|
||
|
||
--toolbar-field-focus-background-color: var(--bt-col) !important;
|
||
--panel-color: var(--bt-col) !important;
|
||
|
||
menu:where([_moz-menuactive="true"]:not([disabled="true"])), menuitem:where([_moz-menuactive="true"]:not([disabled="true"])) {
|
||
background-color: var(--panel-item-hover-bgcolor) !important;
|
||
color: var(--bt-col) !important;
|
||
}
|
||
}
|
||
|
||
/* toolbar menu */
|
||
#toolbar-menubar menupopup,
|
||
#toolbar-context-menu, #toolbar-context-menu menupopup,
|
||
#unified-extensions-context-menu, #unified-extensions-context-menu menupopup,
|
||
#placesContext, #placesContext menupopup,
|
||
#downloadsContextMenu, #downloadsContextMenu menupopup,
|
||
#sidebarMenu-popup, #PopupSearchAutoComplete,
|
||
:is(#back-button, #forward-button) menupopup,
|
||
#permission-popup-menulist menupopup
|
||
{
|
||
--panel-background: var(--pp-col)!important;
|
||
--panel-border-color: var(--tb-col) !important;
|
||
|
||
--toolbar-field-focus-background-color: var(--bt-col) !important;
|
||
--panel-color: var(--bt-col) !important;
|
||
|
||
menu:where([_moz-menuactive="true"]:not([disabled="true"])), menuitem:where([_moz-menuactive="true"]:not([disabled="true"])) {
|
||
background-color: var(--panel-item-hover-bgcolor) !important;
|
||
color: var(--bt-col) !important;
|
||
}
|
||
}
|
||
|
||
/* dropdown selectors */
|
||
menupopup {--content-select-background-image: none !important;}
|
||
#ContentSelectDropdown .ContentSelectDropdown-item-0:not([_moz-menuactive="true"]) {background-color: transparent !important;;}
|
||
|
||
/*
|
||
|
||
--- CUSTOMIZING PAGE --------------------------------------------------------------------------------------------------------------------------------
|
||
|
||
Right click > Customize toolbar
|
||
|
||
*/
|
||
|
||
#main-window[customizing]{
|
||
#customization-palette-container {padding-top: 100px}
|
||
|
||
#customization-panelWrapper{
|
||
margin-top: 60px;
|
||
margin-right: 50px;
|
||
}
|
||
|
||
.panel-arrowbox {opacity: 0 !important;}
|
||
.panel-arrowcontent{border-radius: var(--big-rounding) !important;}
|
||
toolbarspring {border-radius: var(--rounding) !important;}
|
||
|
||
#customization-footer{
|
||
position: fixed !important;
|
||
|
||
bottom: 10px;
|
||
right: 70px;
|
||
left: 10px;
|
||
|
||
background-color: var(--bg-col) !important;
|
||
border-radius: var(--big-rounding) !important;
|
||
}
|
||
}
|
||
|
||
toolbarpaletteitem#wrapper-search-container[place="palette"] #searchbar {background-color: var(--bg-col) !important;}
|
||
|
||
:root[customizing] .customization-target:not(#widget-overflow-fixed-list) {min-width: 0px !important;}
|
||
|
||
/* red sidebar icon styles */
|
||
#main-window{
|
||
--shyfox-string-sidebar-button-tooltip: "This button is only shown when the sidebar is disabled and is colored red to attract attention";
|
||
&[lang="ru"]{--shyfox-string-sidebar-button-tooltip: "Эта кнопка отображается только тогда, когда боковая панель отключена, и окрашена в красный цвет, чтобы привлечь внимание";}
|
||
}
|
||
|
||
#wrapper-sidebar-button[place="palette"] .toolbarbutton-icon {
|
||
padding: 2px !important;
|
||
width: 20px !important;
|
||
height: 20px !important;
|
||
border-radius: 6px !important;
|
||
}
|
||
|
||
#wrapper-sidebar-button[mousedown]{
|
||
&::after{
|
||
content: var(--shyfox-string-sidebar-button-tooltip) !important;
|
||
text-align: left !important;
|
||
position: absolute;
|
||
color: black !important;
|
||
background-color: white !important;
|
||
border-radius: var(--rounding);
|
||
padding: 5px;
|
||
width: 160px !important;
|
||
margin-left: 40px;
|
||
margin-top: 40px;
|
||
}
|
||
}
|
||
|
||
/*
|
||
|
||
--- NOTIFICATION BAR --------------------------------------------------------------------------------------------------------------------------------
|
||
|
||
Sometimes Firefox shows notifications at the top of the window suggesting, for example, to restore tabs from a previous session
|
||
|
||
*/
|
||
|
||
#tab-notification-deck, .global-notificationbox{
|
||
position: fixed !important;
|
||
transition: var(--transition) !important;
|
||
z-index: 0 !important;
|
||
vbox {background-color: transparent !important;}
|
||
background-color: transparent !important;
|
||
width: auto;
|
||
|
||
max-width: calc(
|
||
100vw
|
||
- var(--margin)
|
||
- var(--right-margin)
|
||
- var(--left-margin)
|
||
);
|
||
|
||
top: calc(
|
||
var(--top-margin)
|
||
+ var(--margin) / 2
|
||
);
|
||
|
||
left: calc(
|
||
var(--left-margin)
|
||
+ var(--margin) / 2
|
||
);
|
||
|
||
notification-message{
|
||
border-radius: var(--big-rounding) !important;
|
||
background-color: var(--tb-col) !important;
|
||
color: var(--bt-col) !important;
|
||
|
||
&::before {display: none !important;}
|
||
}
|
||
|
||
.footer-button {margin: 4px !important;}
|
||
}
|
||
|
||
/* notification close button color */
|
||
button[type~="icon"][type~="ghost"][part="button"][size="small"] {fill: var(--bt-col) !important;}
|
||
|
||
/* icon color */
|
||
:is(.icon, img)[src="chrome://global/skin/icons/info-filled.svg"] {fill: var(--shy-color) !important;}
|
||
|
||
/*
|
||
|
||
--- MENUBAR ----------------------------------------------------------------------------------------------------------------------------------------
|
||
|
||
File Edit View History Bookmarks Tools Help
|
||
|
||
*/
|
||
|
||
@media not (-moz-platform: macos) {
|
||
|
||
#toolbar-menubar {
|
||
|
||
position: fixed;
|
||
overflow: clip;
|
||
visibility: visible !important;
|
||
z-index: 5;
|
||
|
||
width: -fit-content;
|
||
max-height: 0px;
|
||
padding-bottom: 0 !important;
|
||
|
||
transition: var(--transition) !important;
|
||
|
||
top: var(--top-margin);
|
||
left: var(--left-margin);
|
||
|
||
border-radius: var(--rounding);
|
||
background-color: var(--tb-col) !important;
|
||
& > * {opacity: var(--dyn-opct);}
|
||
|
||
/* outline only when visible */
|
||
&:not([inactive="true"]) {
|
||
border: var(--outline) !important;
|
||
outline: var(--shadow) !important;
|
||
}
|
||
}
|
||
|
||
#main-menubar > * {padding-top: 0px !important;}
|
||
}
|
||
|
||
/*
|
||
|
||
--- DEVTOOLS ---------------------------------------------------------------------------------------------------------------------------------------
|
||
|
||
*/
|
||
|
||
.browserSidebarContainer, .responsive-mode {background-color: var(--bg-col) !important;}
|
||
|
||
.devtools-side-splitter, .devtools-horizontal-splitter {
|
||
background-color: transparent !important;
|
||
margin-inline: 0px !important;
|
||
margin: 0px !important;
|
||
}
|
||
|
||
.devtools-side-splitter { min-width: calc(var(--margin) / 1.5) !important;}
|
||
.devtools-horizontal-splitter {min-height: calc(var(--margin) / 1.5) !important;}
|
||
|
||
.rdm-toolbar {
|
||
margin-top: var(--margin) !important;
|
||
width: 95% !important;
|
||
margin-left: 3% !important;
|
||
}
|
||
|
||
.rdm-toolbar, .user-agent {border-radius: var(--rounding) !important;}
|
||
|
||
.user-agent {border: 1px solid grey !important;}
|
||
|
||
/*
|
||
|
||
--- FIXES ------------------------------------------------------------------------------------------------------------------------------------------
|
||
|
||
*/
|
||
|
||
/* fix some items dissapearing */
|
||
#titlebar {
|
||
opacity: 1 !important;
|
||
z-index: 1 !important;
|
||
}
|
||
|
||
:root[tabsintitlebar] #titlebar:-moz-window-inactive {
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
#navigator-toolbox:-moz-window-inactive {
|
||
background-color: initial !important;
|
||
color: initial !important;
|
||
}
|
||
|
||
/* remove annoying line at the top of the window */
|
||
#navigator-toolbox {
|
||
margin-top: -1px !important;
|
||
position: relative;
|
||
z-index: 3;
|
||
}
|
||
|
||
/* weird margin fix */
|
||
#tabbrowser-tabpanels {
|
||
& browser[type="content"] {
|
||
margin: 0 !important;
|
||
}
|
||
}
|
||
|
||
/* z-index fix */
|
||
#tabbrowser-tabbox{z-index: 1 !important;}
|
||
|
||
/* border fix */
|
||
* {
|
||
border: 0px solid transparent;
|
||
outline: 0px solid transparent;
|
||
}
|
||
|
||
/* background color fix */
|
||
#browser:not(.browser-toolbox-background) {
|
||
:root[lwtheme] & {
|
||
background-image: none !important;
|
||
}
|
||
}
|
||
|
||
/*
|
||
|
||
--- ACCENT COLOR ----------------------------------------------------------------------------------------------------------------------------------
|
||
|
||
*/
|
||
|
||
.text-link, a {color: var(--shy-color) !important;}
|
||
|
||
.footer-button {
|
||
&:not([disabled]) {
|
||
&[default], &.primary {
|
||
background-color: var(--shy-accent-color) !important;;
|
||
&:hover {
|
||
background-color: color-mix(in srgb, var(--bt-col, black) 10%,var(--shy-accent-color)) !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
::selection {background: var(--shy-accent-color) !important;}
|
||
|
||
#tracking-protection-icon-box[active]{
|
||
fill: var(--shy-color) !important;
|
||
list-style-image: url(chrome://browser/skin/tracking-protection.svg) !important;
|
||
}
|
||
|
||
.urlbarView-url {
|
||
.urlbarView-row:not([selected]) & {
|
||
color: var(--shy-color) !important;
|
||
}
|
||
}
|
||
|
||
.urlbarView-row[selected] {background-color: var(--shy-accent-color) !important;}
|
||
|
||
.urlbarView-favicon {
|
||
.urlbarView-row[type="tabtosearch"]:not([selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > & {
|
||
color: var(--shy-color) !important;
|
||
}
|
||
}
|
||
|
||
.urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner {
|
||
&:not([selected]) > .urlbarView-no-wrap {
|
||
& > .urlbarView-favicon {
|
||
color: var(--shy-color) !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.ctrlTab-preview:focus > .ctrlTab-preview-inner, #ctrlTab-showAll:focus {border-color: var(--shy-color) !important;}
|
||
|
||
:root, panel, dialog, window{
|
||
--in-content-primary-button-background-active: var(--shy-color) !important;
|
||
--in-content-primary-button-background-hover: var(--shy-color) !important;
|
||
--lwt-toolbarbutton-icon-fill-attention: var(--shy-color) !important;
|
||
--in-content-primary-button-background: var(--shy-color) !important;
|
||
--toolbarbutton-icon-fill-attention: var(--shy-color) !important;
|
||
--fxview-primary-action-background: var(--shy-color) !important;
|
||
--toolbar-field-focus-border-color: var(--shy-color) !important;
|
||
--uei-button-attention-dot-color: var(--shy-color) !important;
|
||
--button-primary-active-bgcolor: var(--shy-color) !important;
|
||
--button-primary-hover-bgcolor: var(--shy-color) !important;
|
||
--uc-checkbox-checked-bgcolor: var(--shy-color) !important;
|
||
--color-accent-primary-active: var(--shy-color) !important;
|
||
--color-accent-primary-hover: var(--shy-color) !important;
|
||
--checkbox-checked-bgcolor: var(--shy-color) !important;
|
||
--in-content-accent-color: var(--shy-color) !important;
|
||
--button-primary-bgcolor: var(--shy-color) !important;
|
||
--in-content-link-color: var(--shy-color) !important;
|
||
--color-accent-primary: var(--shy-color) !important;
|
||
--focus-outline-color: var(--shy-color) !important;
|
||
--input-border-color: var(--shy-color) !important;
|
||
}
|
||
|
||
#historySwipeAnimationPreviousArrow,#historySwipeAnimationNextArrow {
|
||
--swipe-nav-icon-primary-color: color-mix(in srgb, var(--shy-color) 80%, #FFFFFF50) !important;
|
||
--swipe-nav-icon-accent-color: color-mix(in srgb, var(--shy-color) 20%, #00000050) !important;
|
||
}
|