Add SICK Firefox theme that makes Firefox like Arc Browser.
This commit is contained in:
206
themes/firefox/chrome/global/browser.css
Normal file
206
themes/firefox/chrome/global/browser.css
Normal file
@ -0,0 +1,206 @@
|
||||
/* Edge-Frfox - browser.css
|
||||
* https://github.com/bmFtZQ/edge-frfox */
|
||||
|
||||
/* Windows has 1px missing space on top of window, but not when accent colour is
|
||||
* applied to the title bar. */
|
||||
@media (-moz-platform: windows) and (not (-moz-windows-accent-color-in-titlebar)) {
|
||||
:root[sizemode="normal"][tabsintitlebar]:not([inFullscreen]) #navigator-toolbox {
|
||||
padding-top: 1px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Add a shadow when the toolbars move over content, eg. in macOS hovering over
|
||||
* the menu bar in fullscreen mode. */
|
||||
#navigator-toolbox[style*="transform"] {
|
||||
box-shadow: 0 -3px 5px 3px light-dark(rgb(0 0 0 / .3), rgb(0 0 0 / .6)) !important;
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Rounded corners (Rc)
|
||||
*/
|
||||
@media (-moz-bool-pref: "uc.tweak.rounded-corners") {
|
||||
/* Since Firefox 120, when the bookmarks bar is set to only open on new tabs,
|
||||
* the bookmarks bar overlaps the #browser element. */
|
||||
|
||||
/* Change the element that shifts the browser content to the correct position. */
|
||||
#main-window[BookmarksToolbarOverlapsBrowser] .newTabBrowserPanel,
|
||||
#main-window[BookmarksToolbarOverlapsBrowser] #sidebar-box {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
#main-window[BookmarksToolbarOverlapsBrowser] #browser {
|
||||
margin-top: var(--bookmarks-toolbar-overlapping-browser-height);
|
||||
}
|
||||
|
||||
/* Make sure that the toolbars are not positioned in-front of the browser
|
||||
* element. */
|
||||
#main-window[BookmarksToolbarOverlapsBrowser] #navigator-toolbox:not([style*="z-index"]) {
|
||||
z-index: auto !important;
|
||||
}
|
||||
|
||||
/* Move the browser element in-front of the toolbars when on the new tab page. */
|
||||
#main-window:not([BookmarksToolbarOverlapsBrowser]) #browser {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Rc Variables
|
||||
*/
|
||||
#main-window:not([chromehidden~="toolbar"]) {
|
||||
--uc-tweak-rounded-corners-padding: 4px;
|
||||
--uc-tweak-rounded-corners-radius: 8px;
|
||||
--uc-tweak-rounded-corners-shadow:
|
||||
0 -.8px 0 0 rgb(0 0 0 / 0.02),
|
||||
0 0.5px 1px 1px rgb(0 0 0 / 0.06),
|
||||
0 1px 1px rgb(0 0 0 / 0.1);
|
||||
--browser-frame-bgcolor: var(--toolbar-bgcolor, var(--lwt-accent-color));
|
||||
|
||||
/* Different shadow for higher resolution displays. */
|
||||
@media (resolution > 1.8dppx) {
|
||||
--uc-tweak-rounded-corners-shadow:
|
||||
0 0 0.5px 0.5px rgb(0 0 0 / 0.06),
|
||||
0 0.5px 1.5px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "uc.tweak.floating-tabs") {
|
||||
--browser-frame-bgcolor: var(--lwt-accent-color);
|
||||
|
||||
&:-moz-window-inactive {
|
||||
--browser-frame-bgcolor: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide border below titlebar on macOS, as its titlebar already has a border. */
|
||||
@media (-moz-platform: macos) {
|
||||
:root[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] {
|
||||
border-top: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Remove separator between toolbars and the browser window. */
|
||||
#navigator-toolbox {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
/* Disable rounded corners in fullscreen, only if the toolbar is hidden. */
|
||||
:root[inFullscreen] #navigator-toolbox[style*="margin-top"] + #browser,
|
||||
:root[inDOMFullscreen] #browser {
|
||||
--uc-tweak-rounded-corners-padding: 0;
|
||||
--uc-tweak-rounded-corners-radius: 0;
|
||||
--uc-tweak-rounded-corners-shadow: unset;
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Rc Browser
|
||||
*/
|
||||
#appcontent .browserStack {
|
||||
margin-inline: var(--uc-tweak-rounded-corners-padding) !important;
|
||||
margin-block-end: var(--uc-tweak-rounded-corners-padding) !important;
|
||||
border-radius: var(--uc-tweak-rounded-corners-radius) !important;
|
||||
box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;
|
||||
background-color: var(--tabpanel-background-color) !important;
|
||||
position: relative !important;
|
||||
|
||||
/* Use pseudo element overlay to simulate rounded corners, similar to the
|
||||
* tab corners, fixes bug with backdrop-filter. */
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
/* Draw toolbar background on the negative corner space, then draw the
|
||||
* same shadow from the browser window on top. */
|
||||
box-shadow:
|
||||
var(--uc-tweak-rounded-corners-shadow, 0 0 transparent),
|
||||
0 0 0 16px var(--browser-frame-bgcolor) !important;
|
||||
clip-path: inset(0);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Prevent status panel corners and shadow from appearing outside the browser. */
|
||||
#statuspanel {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Rc Sidebar
|
||||
*/
|
||||
#sidebar-box {
|
||||
margin-inline-start: var(--uc-tweak-rounded-corners-padding) !important;
|
||||
margin-block-end: var(--uc-tweak-rounded-corners-padding) !important;
|
||||
border-radius: var(--uc-tweak-rounded-corners-radius) !important;
|
||||
overflow: hidden !important;
|
||||
box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;
|
||||
|
||||
&[positionend] {
|
||||
margin-inline-start: 0 !important;
|
||||
margin-inline-end: var(--uc-tweak-rounded-corners-padding) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Rc Devtools
|
||||
*/
|
||||
|
||||
/* Devtools window when docked to the left or right. */
|
||||
.devtools-toolbox-side-iframe {
|
||||
margin-block-end: var(--uc-tweak-rounded-corners-padding) !important;
|
||||
border-radius: var(--uc-tweak-rounded-corners-radius) !important;
|
||||
overflow: hidden !important;
|
||||
box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;
|
||||
|
||||
/* Devtools window when docked to the left. */
|
||||
&:first-child {
|
||||
margin-inline-start: var(--uc-tweak-rounded-corners-padding) !important;
|
||||
}
|
||||
|
||||
/* Devtools window when docked to the right. */
|
||||
&:last-child {
|
||||
margin-inline-end: var(--uc-tweak-rounded-corners-padding) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Devtools window when docked to the bottom. */
|
||||
.devtools-toolbox-bottom-iframe {
|
||||
margin: var(--uc-tweak-rounded-corners-padding) !important;
|
||||
margin-block-start: 0 !important;
|
||||
border-radius: var(--uc-tweak-rounded-corners-radius) !important;
|
||||
overflow: hidden !important;
|
||||
box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;
|
||||
}
|
||||
|
||||
/* Hide devtools splitter. */
|
||||
.devtools-side-splitter,
|
||||
.devtools-horizontal-splitter {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Responsive design mode. */
|
||||
.browserContainer.responsive-mode {
|
||||
background-color: transparent !important;
|
||||
|
||||
& .rdm-toolbar {
|
||||
margin-inline: var(--uc-tweak-rounded-corners-padding) !important;
|
||||
border-top-left-radius: var(--uc-tweak-rounded-corners-radius) !important;
|
||||
border-top-right-radius: var(--uc-tweak-rounded-corners-radius) !important;
|
||||
width: calc(100% - var(--uc-tweak-rounded-corners-padding) * 2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Remove sidebar border when not in full screen. */
|
||||
:not(:root[inFullscreen] #navigator-toolbox[style*="margin-top"]) + #browser #sidebar-splitter {
|
||||
border-inline-width: 0 !important;
|
||||
}
|
||||
|
||||
/* Apply colour to the frame around the browser window. */
|
||||
#browser {
|
||||
background-color: var(--browser-frame-bgcolor);
|
||||
}
|
||||
|
||||
/* Change colour of page when loading */
|
||||
#tabbrowser-tabpanels {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
366
themes/firefox/chrome/global/colors.css
Normal file
366
themes/firefox/chrome/global/colors.css
Normal file
@ -0,0 +1,366 @@
|
||||
/* Edge-Frfox - colors.css
|
||||
* https://github.com/bmFtZQ/edge-frfox */
|
||||
|
||||
/*
|
||||
MARK: Default colours
|
||||
*/
|
||||
:root:not([lwtheme]),
|
||||
/* `--newtab-background-color-secondary used` to differentiate between a dark
|
||||
* private window and private window with the 'Dark' theme enabled.
|
||||
* May not be the most reliable method, but works for now up to FF 123. */
|
||||
:root[privatebrowsingmode="temporary"]:where([style*="--lwt-accent-color: rgb(28, 27, 34)"]:not([style*="--newtab-background-color-secondary: rgb(66, 65, 77)"])) {
|
||||
/* Toolbars */
|
||||
--lwt-accent-color: light-dark(#cecece, #1C1C1C) !important;
|
||||
--lwt-accent-color-inactive: light-dark(#e8e8e8, #2e2e2e) !important;
|
||||
--lwt-text-color: light-dark(#000, #FFF) !important;
|
||||
--lwt-text-color-inactive: light-dark(#3A3A3A, #CBCBCB) !important;
|
||||
--tab-selected-textcolor: light-dark(#000, #fff) !important;
|
||||
--tab-selected-textcolor-inactive: light-dark(#3E3E3E, #CBCBCB) !important;
|
||||
--tab-selected-bgcolor: var(--toolbar-bgcolor) !important;
|
||||
--tab-attention-icon-color: light-dark(#0078D4, #93d0ff) !important;
|
||||
--toolbar-bgcolor: light-dark(#f7f7f7, #3B3B3B) !important;
|
||||
--toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor) !important;
|
||||
--toolbar-color: light-dark(#000, #fff) !important;
|
||||
--toolbarbutton-icon-fill: var(--toolbar-color) !important;
|
||||
--toolbarbutton-icon-fill-attention: light-dark(#0078D4, #4C98D1) !important;
|
||||
--toolbarseparator-color: color-mix(in srgb, currentColor 25%, transparent) !important;
|
||||
--chrome-content-separator-color: light-dark(#bfbfbf, #686868) !important;
|
||||
--newtab-background-color: light-dark(#f7f7f7, #252525) !important;
|
||||
--tabpanel-background-color: var(--newtab-background-color, var(--toolbar-bgcolor, transparent)) !important;
|
||||
/* Toolbar button overlays */
|
||||
--toolbarbutton-hover-background: color-mix(in srgb, currentColor 8%, transparent) !important;
|
||||
--toolbarbutton-active-background: color-mix(in srgb, currentColor 13.5%, transparent) !important;
|
||||
/* Tab audio indicator overlay icon */
|
||||
--tab-icon-overlay-fill: var(--toolbar-color) !important;
|
||||
--tab-icon-overlay-stroke: var(--toolbar-bgcolor) !important;
|
||||
/* URL bar */
|
||||
--toolbar-field-background-color: light-dark(#fff, #2B2B2B) !important;
|
||||
--toolbar-field-color: light-dark(#000, #fff) !important;
|
||||
--toolbar-field-border-color: transparent !important;
|
||||
--toolbar-field-focus-background-color: var(--toolbar-field-background-color) !important;
|
||||
--toolbar-field-focus-color: var(--toolbar-field-color) !important;
|
||||
--toolbar-field-focus-border-color: light-dark(#0055D780, #63ADE5) !important;
|
||||
--urlbar-icon-fill-opacity: 0.58 !important;
|
||||
--urlbar-box-bgcolor: light-dark(rgb(0 0 0 / .09), rgb(255 255 255 / .11)) !important;
|
||||
--urlbar-box-hover-bgcolor: light-dark(rgb(0 0 0 / .09), rgb(255 255 255 / .11)) !important;
|
||||
--urlbar-box-active-bgcolor: light-dark(rgb(0 0 0 / .22), rgb(255 255 255 / .28)) !important;
|
||||
--urlbar-box-focus-bgcolor: var(--urlbar-box-hover-bgcolor) !important;
|
||||
/* URL bar suggestions */
|
||||
--link-color: light-dark(#0078D4, #75B6E8) !important;
|
||||
--uc-urlbarView-accent-color: light-dark(#1A6397, #75B6E8) !important;
|
||||
--urlbarView-highlight-background: light-dark(#F2F2F2, #383838) !important;
|
||||
--urlbarView-highlight-color: light-dark(#000, #fff) !important;
|
||||
--urlbarView-hover-background: light-dark(#e5e5e5, #444444) !important;
|
||||
--urlbarView-separator-color: light-dark(#EFEFEF, #5F5F5F) !important;
|
||||
/* Menus/panels */
|
||||
--arrowpanel-background: light-dark(#fff, #4A4A4A) !important;
|
||||
--arrowpanel-color: light-dark(#1c1c1c, #fff) !important;
|
||||
--arrowpanel-border-color: light-dark(#fff, #636363) !important;
|
||||
--arrowpanel-dimmed: light-dark(#565656, #565656) !important;
|
||||
--arrowpanel-dimmed-further: light-dark(#707070, #707070) !important;
|
||||
--panel-separator-color: light-dark(#dadada, #636363) !important;
|
||||
--panel-description-color: light-dark(#000a, #fffb) !important;
|
||||
--panel-disabled-color: light-dark(#9E9E9E, #B9B9B9) !important;
|
||||
--panel-item-hover-bgcolor: light-dark(#eee, #646464) !important;
|
||||
--panel-item-active-bgcolor: light-dark(#ddd, #747474) !important;
|
||||
--panel-banner-item-update-supported-bgcolor: light-dark(#188038, #81C995) !important;
|
||||
/* Primary button */
|
||||
--button-primary-bgcolor: light-dark(#0078D4, #006CBE) !important;
|
||||
--button-primary-color: light-dark(#fff, #fff) !important;
|
||||
--button-primary-hover-bgcolor: light-dark(#006BBD, #1C7CC5) !important;
|
||||
--button-primary-active-bgcolor: light-dark(#0060AA, #3289CB) !important;
|
||||
/* Secondary button */
|
||||
--button-bgcolor: light-dark(#EFEFEF, #5C5C5C) !important;
|
||||
--button-color: light-dark(#000, #fff) !important;
|
||||
--button-hover-bgcolor: light-dark(#D5D5D5, #6E6E6E) !important;
|
||||
--button-active-bgcolor: light-dark(#C0C0C0, #7C7C7C) !important;
|
||||
/* Text input field, e.g. bookmarks editor */
|
||||
--focus-outline-color: light-dark(#0055D780, #63ADE5) !important;
|
||||
--input-bgcolor: light-dark(#fff, #4A4A4A) !important;
|
||||
--input-color: light-dark(#2b2b2b, #fff) !important;
|
||||
--input-border-color: light-dark(#bebebe, #808080) !important;
|
||||
--error-text-color: light-dark(#FF9AA2, #FF9AA2) !important;
|
||||
--input-error-border-color: light-dark(#FF848A, #FF848A) !important;
|
||||
/* Side bar colours. */
|
||||
--sidebar-background-color: light-dark(#f7f7f7, #3b3b3b) !important;
|
||||
--sidebar-text-color: light-dark(#000, #fff) !important;
|
||||
--sidebar-border-color: light-dark(#bfbfbf, #686868) !important;
|
||||
|
||||
/* ::::: Dialog theme ::::: */
|
||||
& #window-modal-dialog::backdrop {
|
||||
/* Overlay when dialog is shown. */
|
||||
background-color: rgb(20 20 20 / .2) !important;
|
||||
}
|
||||
|
||||
&[dialogroot] {
|
||||
/* Dialog */
|
||||
--in-content-page-background: var(--arrowpanel-background) !important;
|
||||
--in-content-page-color: var(--arrowpanel-color) !important;
|
||||
/* Primary button */
|
||||
--in-content-primary-button-text-color: var(--button-primary-color) !important;
|
||||
--in-content-primary-button-background: var(--button-primary-bgcolor) !important;
|
||||
--in-content-primary-button-background-hover: var(--button-primary-hover-bgcolor) !important;
|
||||
--in-content-primary-button-background-active: var(--button-primary-active-bgcolor) !important;
|
||||
/* Secondary button */
|
||||
--in-content-button-text-color: var(--button-color) !important;
|
||||
--in-content-button-background: var(--button-bgcolor) !important;
|
||||
--in-content-button-background-hover: var(--button-hover-bgcolor) !important;
|
||||
--in-content-button-background-active: var(--button-active-bgcolor) !important;
|
||||
/* Text input */
|
||||
--in-content-box-background: var(--input-bgcolor) !important;
|
||||
--in-content-box-border-color: var(--input-border-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure that dark mode is enabled completely in private browsing mode. */
|
||||
@media (-moz-bool-pref: "browser.theme.dark-private-windows") {
|
||||
:root[privatebrowsingmode="temporary"],
|
||||
:root[privatebrowsingmode="temporary"] #nav-bar,
|
||||
:root[privatebrowsingmode="temporary"] #PersonalToolbar {
|
||||
--toolbar-color-scheme: dark !important;
|
||||
--tab-selected-color-scheme: dark !important;
|
||||
color-scheme: dark !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply colours to the default 'Auto' theme. */
|
||||
:root:not([lwtheme]) #navigator-toolbox {
|
||||
background-color: var(--lwt-accent-color) !important;
|
||||
color: var(--lwt-text-color) !important;
|
||||
|
||||
/* Inactive window background colours. */
|
||||
&:-moz-window-inactive {
|
||||
background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important;
|
||||
color: var(--lwt-text-color-inactive, var(--lwt-text-color)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Make sure that the tab toolbar opacity is always 1, inactive window colours
|
||||
* are already supplied by this theme. */
|
||||
:root[tabsintitlebar] #titlebar:-moz-window-inactive {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Make the titlebar buttons black/white on default themes */
|
||||
:root:not([lwtheme])[tabsintitlebar] .titlebar-buttonbox {
|
||||
color: var(--lwt-text-color) !important;
|
||||
}
|
||||
|
||||
/* Status/link preview panel */
|
||||
#statuspanel-label {
|
||||
background-color: var(--toolbar-field-focus-background-color) !important;
|
||||
color: var(--toolbar-field-focus-color) !important;
|
||||
border-color: transparent !important;
|
||||
box-shadow: 0 2px 5px #0002, 0 0 0 1px light-dark(#0001, #0002) !important;
|
||||
border-radius: 0 4px 0 0 !important;
|
||||
|
||||
#statuspanel[mirror] & {
|
||||
border-radius: 4px 0 0 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Windows
|
||||
*/
|
||||
@media (-moz-platform: windows) {
|
||||
/* Colour the text selection background and foreground. */
|
||||
::selection {
|
||||
background-color: light-dark(#0078D4, #93B8E7) !important;
|
||||
color: light-dark(#fff, #000) !important;
|
||||
}
|
||||
|
||||
tooltip {
|
||||
background-color: var(--arrowpanel-background) !important;
|
||||
color: var(--arrowpanel-color) !important;
|
||||
border-color: var(--arrowpanel-border-color) !important;
|
||||
}
|
||||
|
||||
/* Use accent colour in titlebar when Windows option is enabled. */
|
||||
@media (-moz-windows-accent-color-in-titlebar) and (-moz-bool-pref: "browser.theme.windows.accent-color-in-tabs.enabled") {
|
||||
/* Uses :root:root to beat specificity of floating tabs adjustments. */
|
||||
:root:root:not([lwtheme]) {
|
||||
--lwt-accent-color: ActiveCaption !important;
|
||||
--lwt-text-color: CaptionText !important;
|
||||
--lwt-accent-color-inactive: InActiveCaption !important;
|
||||
--lwt-text-color-inactive: InActiveCaptionText !important;
|
||||
}
|
||||
}
|
||||
|
||||
.titlebar-button:not(.titlebar-close):hover {
|
||||
background-color: color-mix(in srgb, currentColor 11%, transparent) !important;
|
||||
|
||||
&:active {
|
||||
background-color: color-mix(in srgb, currentColor 20%, transparent) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.titlebar-close:hover {
|
||||
stroke: white !important;
|
||||
background-color: #e81123 !important;
|
||||
|
||||
&:active {
|
||||
background-color: #DC5C66 !important;
|
||||
}
|
||||
|
||||
toolbar[brighttext] &:active {
|
||||
background-color: #971821 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Library window colour theme. */
|
||||
window#places {
|
||||
--organizer-color: light-dark(#000, #fff) !important;
|
||||
--organizer-deemphasized-color: light-dark(#666, #bbb) !important;
|
||||
--organizer-toolbar-background: light-dark(#f7f7f7, #3B3B3B) !important;
|
||||
--organizer-pane-background: light-dark(#f7f7f7, #2B2B2B) !important;
|
||||
--organizer-content-background: light-dark(#f7f7f7, #1C1C1C) !important;
|
||||
--organizer-hover-background: light-dark(#00000025, #ffffff25) !important;
|
||||
--organizer-selected-background: light-dark(#006CBE80, #006CBE80) !important;
|
||||
--organizer-outline-color: light-dark(#0055D7a0, #63ADE5) !important;
|
||||
--organizer-toolbar-field-background: light-dark(#fff, #2B2B2B) !important;
|
||||
--organizer-toolbar-field-background-focused: light-dark(#fff, #2B2B2B) !important;
|
||||
--organizer-border-color: light-dark(#bfbfbf, #686868) !important;
|
||||
scrollbar-color:
|
||||
light-dark(#0006, #fff6)
|
||||
light-dark(#f7f7f740, #2B2B2B40) !important;
|
||||
}
|
||||
|
||||
#placesViewsBox #downloadsListBox richlistitem[selected="true"] {
|
||||
background-color: light-dark(#006CBE, #006CBE) !important;
|
||||
color: light-dark(#fff, #fff) !important;
|
||||
}
|
||||
|
||||
#placeContentColumns :is(treecol, treecolpicker) {
|
||||
background-color: light-dark(#f7f7f7, #3B3B3B) !important;
|
||||
color: light-dark(#000, #fff) !important;
|
||||
border-inline-start: 1px solid light-dark(#bfbfbf, #686868) !important;
|
||||
box-shadow: inset 0 -1px light-dark(#bfbfbf, #686868) !important;
|
||||
appearance: none !important;
|
||||
}
|
||||
|
||||
#placeContentColumns :is(treecol, treecolpicker):where(:hover) {
|
||||
background-color: light-dark(#cecece, #4A4A4A) !important;
|
||||
color: light-dark(#000, #fff) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Prevent macOS vibrancy appearance, instead using a solid background. */
|
||||
#sidebar-box {
|
||||
appearance: none !important;
|
||||
}
|
||||
|
||||
.sidebar-panel:not([lwt-sidebar]) {
|
||||
color: light-dark(#000, #fff) !important;
|
||||
scrollbar-color: light-dark(#0006, #fff6) light-dark(#f7f7f740, #3b3b3b40) !important;
|
||||
|
||||
/* Sidebar search box (Windows) */
|
||||
@media(-moz-platform: windows) {
|
||||
& #sidebar-search-container > #search-box,
|
||||
& #viewButton {
|
||||
appearance: none !important;
|
||||
background-color: var(--toolbar-field-background-color) !important;
|
||||
color: inherit !important;
|
||||
border: 1px solid var(--input-border-color) !important;
|
||||
border-radius: 4px !important;
|
||||
padding: 6px 8px !important;
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid var(--input-border-color) !important;
|
||||
outline-offset: -2px !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-document url(chrome://browser/content/syncedtabs/sidebar.xhtml) {
|
||||
body {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Linux / GTK csd
|
||||
*/
|
||||
@media (-moz-gtk-csd-available) {
|
||||
:root:not([lwtheme]),
|
||||
/* `--newtab-background-color-secondary used` to differentiate between a dark
|
||||
* private window and private window with the 'Dark' theme enabled.
|
||||
* May not be the most reliable method, but works for now up to FF 123. */
|
||||
:root[privatebrowsingmode="temporary"]:where([style*="--lwt-accent-color: rgb(28, 27, 34)"]:not([style*="--newtab-background-color-secondary: rgb(66, 65, 77)"])) {
|
||||
/* Used for mixing colours differently in light/dark themes. */
|
||||
--uc-tint: light-dark(black, white);
|
||||
/* Colour adjusted for readability. */
|
||||
--uc-accent-adjusted: light-dark(
|
||||
color-mix(in oklch, AccentColor 92%, black),
|
||||
color-mix(in oklch, AccentColor 60%, white)
|
||||
);
|
||||
/* Toolbars */
|
||||
--lwt-accent-color: light-dark(color-mix(in srgb, ActiveCaption 90%, black), ActiveCaption) !important;
|
||||
--lwt-accent-color-inactive: light-dark(color-mix(in srgb, InactiveCaption 94%, black), InactiveCaption) !important;
|
||||
--lwt-text-color: CaptionText !important;
|
||||
--lwt-text-color-inactive: color-mix(in srgb, CaptionText 65%, transparent) !important;
|
||||
--tab-selected-textcolor: var(--toolbar-color) !important;
|
||||
--tab-selected-textcolor-inactive: color-mix(in srgb, var(--toolbar-color) 65%, transparent) !important;
|
||||
--tab-selected-bgcolor: var(--toolbar-bgcolor) !important;
|
||||
--tab-attention-icon-color: var(--uc-accent-adjusted) !important;
|
||||
--toolbar-bgcolor: light-dark(-moz-dialog, color-mix(in srgb, -moz-dialog 92%, white)) !important;
|
||||
--toolbar-color: -moz-dialogtext !important;
|
||||
--toolbarbutton-icon-fill-attention: var(--uc-accent-adjusted) !important;
|
||||
--chrome-content-separator-color: color-mix(in srgb, currentColor 17%, var(--toolbar-bgcolor)) !important;
|
||||
--newtab-background-color: light-dark(-moz-dialog, color-mix(in srgb, -moz-dialog 82%, black)) !important;
|
||||
/* URL bar */
|
||||
--toolbar-field-background-color: light-dark(Field, color-mix(in srgb, Field 96%, -moz-dialogtext)) !important;
|
||||
--toolbar-field-color: FieldText !important;
|
||||
--toolbar-field-focus-border-color: light-dark(color-mix(in srgb, var(--focus-outline-color) 50%, transparent), var(--focus-outline-color)) !important;
|
||||
--urlbar-box-bgcolor: var(--button-bgcolor) !important;
|
||||
--urlbar-box-hover-bgcolor: var(--button-hover-bgcolor) !important;
|
||||
--urlbar-box-active-bgcolor: var(--button-active-bgcolor) !important;
|
||||
/* URL bar suggestions. */
|
||||
--link-color: var(--uc-accent-adjusted) !important;
|
||||
--uc-urlbarView-accent-color: var(--uc-accent-adjusted) !important;
|
||||
--urlbarView-highlight-background: var(--panel-item-hover-bgcolor) !important;
|
||||
--urlbarView-highlight-color: var(--toolbar-field-color) !important;
|
||||
--urlbarView-hover-background: var(--panel-item-active-bgcolor) !important;
|
||||
--urlbarView-separator-color: var(--panel-separator-color) !important;
|
||||
/* Menus/panels */
|
||||
--arrowpanel-background: Field !important;
|
||||
--arrowpanel-color: FieldText !important;
|
||||
--arrowpanel-border-color: light-dark(transparent, var(--panel-separator-color)) !important;
|
||||
--arrowpanel-dimmed: color-mix(in srgb, currentColor 17%, transparent) !important;
|
||||
--arrowpanel-dimmed-further: color-mix(in srgb, currentColor 30%, transparent) !important;
|
||||
--panel-separator-color: color-mix(in srgb, currentColor 17%, var(--arrowpanel-background)) !important;
|
||||
--panel-description-color: GrayText !important;
|
||||
--panel-disabled-color: GrayText !important;
|
||||
--panel-item-hover-bgcolor: color-mix(in srgb, currentColor 8%, transparent) !important;
|
||||
--panel-item-active-bgcolor: color-mix(in srgb, currentColor 13%, transparent) !important;
|
||||
/* Primary button */
|
||||
--button-primary-bgcolor: AccentColor !important;
|
||||
--button-primary-color: AccentColorText !important;
|
||||
--button-primary-hover-bgcolor: color-mix(in srgb, var(--uc-tint) 10%, var(--button-primary-bgcolor)) !important;
|
||||
--button-primary-active-bgcolor: color-mix(in srgb, var(--uc-tint) 20%, var(--button-primary-bgcolor)) !important;
|
||||
/* Secondary button */
|
||||
--button-bgcolor: color-mix(in srgb, currentColor 10%, transparent) !important;
|
||||
--button-color: currentColor !important;
|
||||
--button-hover-bgcolor: color-mix(in srgb, currentColor 14%, transparent) !important;
|
||||
--button-active-bgcolor: color-mix(in srgb, currentColor 20%, transparent) !important;
|
||||
/* Text input field, e.g. bookmarks editor. */
|
||||
--focus-outline-color: var(--uc-accent-adjusted) !important;
|
||||
--input-bgcolor: var(--arrowpanel-background) !important;
|
||||
--input-color: var(--arrowpanel-color) !important;
|
||||
--input-border-color: color-mix(in srgb, currentColor 35%, var(--arrowpanel-background)) !important;
|
||||
/* Sidebar */
|
||||
--sidebar-background-color: var(--toolbar-bgcolor) !important;
|
||||
--sidebar-text-color: var(--toolbar-color) !important;
|
||||
--sidebar-border-color: var(--chrome-content-separator-color) !important;
|
||||
}
|
||||
|
||||
/* Use the same sidebar splitter style as other platforms. */
|
||||
.sidebar-splitter {
|
||||
border: 0 solid var(--sidebar-border-color) !important;
|
||||
border-inline-end-width: 1px !important;
|
||||
width: 4px !important;
|
||||
background-color: transparent !important;
|
||||
margin-inline-start: -4px !important;
|
||||
}
|
||||
}
|
||||
847
themes/firefox/chrome/global/popup.css
Normal file
847
themes/firefox/chrome/global/popup.css
Normal file
@ -0,0 +1,847 @@
|
||||
/* Edge-Frfox - popup.css */
|
||||
|
||||
/*
|
||||
MARK: Variables
|
||||
*/
|
||||
:root {
|
||||
--panel-subview-body-padding: 2px 0 !important;
|
||||
--arrowpanel-border-radius: 8px !important;
|
||||
--arrowpanel-menuitem-border-radius: 4px !important;
|
||||
--arrowpanel-menuitem-margin: var(--uc-arrowpanel-menuitem-margin-block) var(--uc-arrowpanel-menuitem-margin-inline) !important;
|
||||
--arrowpanel-menuitem-padding-block: 6px !important;
|
||||
--arrowpanel-menuitem-padding-inline: 10px !important;
|
||||
--uc-arrowpanel-menuicon-margin-inline: 14px;
|
||||
--uc-arrowpanel-menuitem-margin-inline: 4px;
|
||||
--uc-arrowpanel-menuitem-margin-block: 2px;
|
||||
--panel-separator-margin-vertical: 2px !important;
|
||||
--panel-separator-margin-horizontal: 0 !important;
|
||||
|
||||
--uc-panel-zoom-button-padding: 8px;
|
||||
--uc-panel-zoom-button-inline-padding: 9px;
|
||||
--uc-panel-zoom-padding-block: calc(var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block));
|
||||
|
||||
--uc-autocomplete-panel-menuitem-margin: 4px;
|
||||
--uc-autocomplete-panel-menuicon-padding-inline: 14px;
|
||||
--uc-autocomplete-panel-separator-margin-vertical: 4px;
|
||||
|
||||
--uc-permission-itemcontainer-padding-block: 8px;
|
||||
--uc-permission-item-margin-block: 4px;
|
||||
--uc-permission-item-padding-inline: 16px;
|
||||
|
||||
--uc-contextmenu-border-radius: 8px;
|
||||
--uc-contextmenu-padding: calc(4px - var(--uc-contextmenu-menuitem-border-width)) 0;
|
||||
--uc-contextmenu-menuitem-border-radius: calc(4px + var(--uc-contextmenu-menuitem-border-width));
|
||||
--uc-contextmenu-menuitem-padding-block: 6px;
|
||||
--uc-contextmenu-menuitem-padding-inline: 10px;
|
||||
--uc-contextmenu-menuitem-border-width: 2px;
|
||||
--uc-contextmenu-menuicon-margin-inline: 12px;
|
||||
--uc-contextmenu-menuitem-margin-inline: calc(4px - var(--uc-contextmenu-menuitem-border-width));
|
||||
--uc-contextmenu-menuitem-margin-block: 0px;
|
||||
--uc-contextmenu-menuitem-margin: var(--uc-contextmenu-menuitem-margin-block) var(--uc-contextmenu-menuitem-margin-inline);
|
||||
--uc-contextmenu-separator-vertical: calc(4px - var(--uc-contextmenu-menuitem-border-width));
|
||||
--uc-contextmenu-separator-horizontal: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: App menu
|
||||
*/
|
||||
.addon-banner-item,
|
||||
.panel-banner-item {
|
||||
margin: 2px 4px 2px !important;
|
||||
padding-inline: 4px 12px !important;
|
||||
padding-block: var(--arrowpanel-menuitem-padding-block) !important;
|
||||
border-radius: var(--arrowpanel-menuitem-border-radius) !important;
|
||||
}
|
||||
|
||||
#appMenu-fxa-label2 label,
|
||||
#PanelUI-fxa-menu-syncnow-button label {
|
||||
margin-block: 0 !important;
|
||||
}
|
||||
|
||||
.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
|
||||
.subviewbutton:not(#appMenu-zoom-controls > .subviewbutton) > .toolbarbutton-icon + .toolbarbutton-text,
|
||||
#appMenu-fxa-label2 > vbox {
|
||||
padding-inline-start: var(--uc-arrowpanel-menuicon-margin-inline) !important;
|
||||
}
|
||||
|
||||
/* special case menuitems with no icons */
|
||||
#appMenu-zoom-controls > .toolbarbutton-text,
|
||||
#fxa-manage-account-button > vbox,
|
||||
#PanelUI-fxa-menu-syncnow-button > hbox {
|
||||
padding-inline-start: calc(16px + var(--uc-arrowpanel-menuicon-margin-inline)) !important;
|
||||
}
|
||||
|
||||
.subviewbutton > .toolbarbutton-icon {
|
||||
width: 16px !important;
|
||||
}
|
||||
|
||||
/* firefox profile avatar in appmenu */
|
||||
#appMenu-fxa-label2::before {
|
||||
content: "";
|
||||
display: flex;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: var(--avatar-image-url) 0/16px;
|
||||
scale: 1.25;
|
||||
border-radius: 99px;
|
||||
}
|
||||
|
||||
/* disable proton account separator */
|
||||
#appMenu-fxa-separator {
|
||||
border-image: none !important;
|
||||
}
|
||||
|
||||
#appMenu-fxa-status2:not([fxastatus]) {
|
||||
padding-block: 0 !important;
|
||||
}
|
||||
|
||||
#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2 {
|
||||
margin-inline-end: calc(var(--arrowpanel-menuitem-padding-inline) * -1) !important;
|
||||
}
|
||||
|
||||
/* zoom controls */
|
||||
#appMenu-zoom-controls {
|
||||
border-top: 1px solid var(--panel-separator-color) !important;
|
||||
padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) + var(--uc-arrowpanel-menuitem-margin-inline)) var(--uc-arrowpanel-menuitem-margin-inline) !important;
|
||||
padding-block: var(--uc-panel-zoom-padding-block) !important;
|
||||
margin: var(--panel-separator-margin-vertical) 0 calc(var(--panel-separator-margin-vertical) * -1) !important;
|
||||
}
|
||||
|
||||
#appMenu-zoom-controls > .subviewbutton {
|
||||
padding: var(--uc-panel-zoom-button-padding) var(--uc-panel-zoom-button-inline-padding) !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#appMenu-zoom-controls > #appMenu-zoomReset-button2 {
|
||||
padding: var(--uc-panel-zoom-button-padding) calc(var(--uc-panel-zoom-button-padding) / 2) !important;
|
||||
}
|
||||
|
||||
/* #appMenu-zoomReduce-button2, */
|
||||
#appMenu-zoom-controls > #appMenu-fullscreen-button2 {
|
||||
margin-left: calc((var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) * 2 + 1px) !important;
|
||||
}
|
||||
|
||||
#appMenu-zoom-controls > #appMenu-fullscreen-button2::before {
|
||||
content: "";
|
||||
border-inline-start: 1px solid var(--panel-separator-color);
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 32px;
|
||||
margin-block: calc(var(--uc-panel-zoom-button-padding) * -1);
|
||||
transform: translateX(calc(var(--uc-panel-zoom-button-inline-padding) * -1 - (var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) - 1px));
|
||||
}
|
||||
|
||||
#appMenu-zoomReset-button2 {
|
||||
height: calc(16px + var(--uc-panel-zoom-button-padding) * 2) !important;
|
||||
min-height: calc(16px + var(--uc-panel-zoom-button-padding) * 2) !important;
|
||||
}
|
||||
|
||||
#appMenu-zoomReduce-button2:not([disabled], [open], :active):is(:hover),
|
||||
#appMenu-zoomEnlarge-button2:not([disabled], [open], :active):is(:hover),
|
||||
#appMenu-fullscreen-button2:not([disabled], [open], :active):is(:hover),
|
||||
#appMenu-zoomReset-button2:not([disabled], [open], :active):is(:hover) {
|
||||
background-color: var(--panel-item-hover-bgcolor) !important;
|
||||
}
|
||||
|
||||
#appMenu-zoomReduce-button2:not([disabled]):is([open], :hover:active),
|
||||
#appMenu-zoomEnlarge-button2:not([disabled]):is([open], :hover:active),
|
||||
#appMenu-fullscreen-button2:not([disabled]):is([open], :hover:active),
|
||||
#appMenu-zoomReset-button2:not([disabled]):is([open], :hover:active) {
|
||||
background-color: var(--panel-item-active-bgcolor) !important;
|
||||
}
|
||||
|
||||
#appMenu-zoomReduce-button2 > .toolbarbutton-icon,
|
||||
#appMenu-zoomEnlarge-button2 > .toolbarbutton-icon {
|
||||
fill: currentColor !important;
|
||||
stroke: none !important;
|
||||
}
|
||||
|
||||
#appMenu-zoomReset-button2 > .toolbarbutton-text,
|
||||
#appMenu-fullscreen-button2 > .toolbarbutton-icon {
|
||||
background-color: transparent !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.subviewbutton[shortcut]::after {
|
||||
opacity: 0.7 !important;
|
||||
}
|
||||
|
||||
#widget-overflow-mainView .panel-subview-body {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.PanelUI-subView > .panel-header + toolbarseparator {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.PanelUI-subView > .panel-header + toolbarseparator + .panel-subview-body {
|
||||
padding-top: var(--panel-separator-margin-vertical) !important;
|
||||
}
|
||||
|
||||
#identity-popup-security-button {
|
||||
margin-bottom: var(--panel-separator-margin-vertical) !important;
|
||||
}
|
||||
|
||||
#permission-popup-mainView-panel-header,
|
||||
#identity-popup-mainView-panel-header,
|
||||
#protections-popup-mainView-panel-header,
|
||||
.panel-header {
|
||||
min-height: calc((var(--arrowpanel-menuitem-padding-block) + 4px) * 2 + 16px) !important;
|
||||
}
|
||||
|
||||
/* URL bar popup */
|
||||
.panel-footer > button {
|
||||
border-radius: 2px !important;
|
||||
}
|
||||
|
||||
.identity-popup-security-connection > hbox > description {
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
.identity-popup-security-connection.identity-button {
|
||||
margin-inline-end: calc(-1 * (var(--arrowpanel-menuitem-padding-inline) - 10px)) !important;
|
||||
}
|
||||
|
||||
#identity-popup-mainView-panel-header-span,
|
||||
#permission-popup-mainView-panel-header-span,
|
||||
#identity-popup-mainView-panel-header label,
|
||||
#permission-popup-mainView-panel-header label,
|
||||
#protections-popup-mainView-panel-header-span {
|
||||
margin-block: 0 !important;
|
||||
}
|
||||
|
||||
.permission-popup-section {
|
||||
padding-block: var(--uc-permission-itemcontainer-padding-block) !important;
|
||||
}
|
||||
|
||||
#permission-popup-permissions-content {
|
||||
padding-inline: var(--uc-permission-item-padding-inline) !important;
|
||||
}
|
||||
|
||||
.permission-popup-permission-item,
|
||||
#permission-popup-storage-access-permission-list-header {
|
||||
margin-block: var(--uc-permission-item-margin-block) !important;
|
||||
}
|
||||
|
||||
.permission-popup-permission-label,
|
||||
.permission-popup-permission-header-label {
|
||||
margin-inline-start: var(--uc-arrowpanel-menuicon-margin-inline) !important;
|
||||
}
|
||||
|
||||
#editBookmarkPanel > #editBookmarkHeaderSeparator,
|
||||
#editBookmarkPanel > .panel-subview-body > #editBookmarkSeparator {
|
||||
margin-inline: 0 !important;
|
||||
}
|
||||
|
||||
/* subview */
|
||||
.panel-header {
|
||||
padding: 4px !important;
|
||||
padding-top: 4px !important;
|
||||
}
|
||||
|
||||
.panel-header + toolbarseparator,
|
||||
#identity-popup-mainView-panel-header + toolbarseparator,
|
||||
#permission-popup-mainView-panel-header + toolbarseparator,
|
||||
#protections-popup-mainView-panel-header-section + toolbarseparator {
|
||||
margin-block-start: 0 !important;
|
||||
}
|
||||
|
||||
.panel-header > .subviewbutton-back {
|
||||
margin: 0 !important;
|
||||
padding: var(--arrowpanel-menuitem-padding-block) !important;
|
||||
}
|
||||
|
||||
.panel-subview-footer-button {
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
|
||||
.webextension-popup-browser,
|
||||
.webextension-popup-stack {
|
||||
margin-block-start: calc(var(--panel-separator-margin-vertical) * -.5) !important;
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Downloads
|
||||
*/
|
||||
.downloadTypeIcon {
|
||||
height: 16px !important;
|
||||
width: 16px !important;
|
||||
}
|
||||
|
||||
.downloadButton {
|
||||
min-width: calc(16px + var(--uc-toolbarbutton-inner-inline-padding) * 2) !important;
|
||||
height: calc(16px + var(--toolbarbutton-inner-padding) * 2) !important;
|
||||
border-radius: var(--toolbarbutton-border-radius) !important;
|
||||
}
|
||||
|
||||
.downloadProgress::-moz-progress-bar,
|
||||
.downloadProgress > div {
|
||||
background-color: var(--toolbarbutton-icon-fill-attention) !important;
|
||||
}
|
||||
|
||||
.downloadMainArea {
|
||||
padding-block: 4px !important;
|
||||
padding-inline: 12px !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
#downloadsListBox > richlistitem {
|
||||
padding-inline-end: 8px !important;
|
||||
border-radius: var(--arrowpanel-menuitem-border-radius) !important;
|
||||
}
|
||||
|
||||
#downloadsListBox,
|
||||
.downloadsPanelFooterButton {
|
||||
margin: var(--arrowpanel-menuitem-margin) !important;
|
||||
width: auto !important;
|
||||
min-width: auto !important;
|
||||
}
|
||||
|
||||
#downloadsPanel-blockedSubview,
|
||||
#downloadsPanel-mainView {
|
||||
padding: var(--panel-separator-margin-vertical) 0 !important;
|
||||
}
|
||||
|
||||
#emptyDownloads {
|
||||
padding: 1.5em 16px 1.7em !important;
|
||||
}
|
||||
|
||||
#downloadsHistory .button-text {
|
||||
margin-block: 0 !important;
|
||||
margin-inline: 0 !important;
|
||||
}
|
||||
|
||||
.PanelUI-subView .subviewbutton-nav::after,
|
||||
#PlacesToolbar menu > .menu-right,
|
||||
.subviewbutton > .menu-right {
|
||||
fill-opacity: 1 !important;
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Extensions
|
||||
*/
|
||||
/* #region */
|
||||
|
||||
.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton:not(.toolbarbutton-1)[disabled] {
|
||||
opacity: 1 !important;
|
||||
color: var(--panel-disabled-color) !important;
|
||||
}
|
||||
|
||||
/* Removes space above extensions items. */
|
||||
#unified-extensions-messages-container {
|
||||
margin-block: 0 !important;
|
||||
}
|
||||
|
||||
:root {
|
||||
--uei-icon-size: 24px !important;
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "uc.tweak.context-menu.compact-extensions-menu") {
|
||||
:root {
|
||||
--uei-icon-size: 16px !important;
|
||||
}
|
||||
|
||||
/* Hide site access permissions label. */
|
||||
.unified-extensions-item-message-deck {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Use smaller toolbar extension icon if available. */
|
||||
toolbaritem:is([overflowedItem="true"], [cui-areatype="panel"]) > .webextension-browser-action {
|
||||
list-style-image: var(--webextension-toolbar-image, var(--webextension-menupanel-image, inherit)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Use smaller font-size in extensions menu on Windows. */
|
||||
@media (-moz-platform: windows) {
|
||||
#unified-extensions-panel .toolbarbutton-text {
|
||||
font: menu !important;
|
||||
font-family: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Prevent extension labels from using >1 line, adding ellipsis if necessary. */
|
||||
.unified-extensions-item-contents {
|
||||
flex: 1 !important;
|
||||
|
||||
& > .unified-extensions-item-name,
|
||||
& > .unified-extensions-item-message-deck > .unified-extensions-item-message {
|
||||
max-width: calc(100% - 4px) !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extension item menu button. */
|
||||
.unified-extensions-item-menu-button {
|
||||
padding: 0 !important;
|
||||
|
||||
& > .toolbarbutton-icon {
|
||||
border: none !important;
|
||||
padding-inline: var(--arrowpanel-menuitem-padding-inline) !important;
|
||||
padding-block: var(--arrowpanel-menuitem-padding-block) !important;
|
||||
margin-inline-start: var(--uc-arrowpanel-menuitem-margin-inline) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Add grayscale filter to extensions with no access to current site. */
|
||||
.unified-extensions-list .unified-extensions-item-action-button:has(.unified-extensions-item-message[data-l10n-id="origin-controls-state-no-access"]) .unified-extensions-item-icon {
|
||||
filter: grayscale(1) !important;
|
||||
}
|
||||
|
||||
/* Adjust spacing between the extension item's icon and label. */
|
||||
.unified-extensions-item-name,
|
||||
.unified-extensions-item-message {
|
||||
padding-inline-start: var(--uc-arrowpanel-menuicon-margin-inline) !important;
|
||||
}
|
||||
|
||||
.unified-extensions-item-icon,
|
||||
.unified-extensions-item .webextension-browser-action > .toolbarbutton-badge-stack {
|
||||
margin-inline-end: 0 !important;
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/*
|
||||
MARK: Autocomplete
|
||||
*/
|
||||
#PopupAutoComplete {
|
||||
/* workaround for inaccessible shadow-root element
|
||||
moves the shadow-root element underneath, and away from panel edges */
|
||||
padding-block: 10px !important;
|
||||
padding-inline: 2px !important;
|
||||
|
||||
& > .autocomplete-richlistbox {
|
||||
background: var(--arrowpanel-background) !important;
|
||||
box-shadow: 0 0 0 1px inset var(--arrowpanel-border-color) !important;
|
||||
height: auto !important;
|
||||
margin-block: -10px !important;
|
||||
margin-inline: -2px !important;
|
||||
padding: var(--uc-contextmenu-padding) !important;
|
||||
border-radius: var(--uc-contextmenu-border-radius) !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
& .autocomplete-richlistitem[originaltype="loginsFooter"] {
|
||||
justify-content: start !important;
|
||||
color: inherit !important;
|
||||
background-color: transparent !important;
|
||||
height: 28px !important;
|
||||
min-height: 28px !important;
|
||||
padding-inline-start: var(--uc-contextmenu-menuitem-padding-inline) !important;
|
||||
position: relative !important;
|
||||
overflow: visible !important;
|
||||
margin-top: calc(var(--uc-contextmenu-separator-vertical) * 2 + 1px) !important;
|
||||
}
|
||||
|
||||
/* Separator */
|
||||
& .autocomplete-richlistitem[originaltype="loginsFooter"]::before {
|
||||
content: "";
|
||||
width: calc(100% + var(--uc-contextmenu-menuitem-margin-inline) * 2);
|
||||
border-top: 1px solid var(--panel-separator-color);
|
||||
position: absolute;
|
||||
top: calc((var(--uc-contextmenu-separator-vertical) + var(--uc-contextmenu-menuitem-border-width)) * -1 - 1px);
|
||||
left: calc(var(--uc-contextmenu-menuitem-margin-inline) * -1);
|
||||
}
|
||||
|
||||
& .autocomplete-richlistitem:hover {
|
||||
background-color: var(--panel-item-hover-bgcolor) !important;
|
||||
}
|
||||
|
||||
& .autocomplete-richlistitem[selected] {
|
||||
background-color: var(--panel-item-active-bgcolor) !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
& .ac-site-icon {
|
||||
fill: currentColor !important;
|
||||
margin-block: auto !important;
|
||||
margin-inline: 0 var(--uc-autocomplete-panel-menuicon-padding-inline) !important;
|
||||
}
|
||||
|
||||
& .ac-title {
|
||||
margin-inline: calc(16px + var(--uc-autocomplete-panel-menuicon-padding-inline)) !important;
|
||||
}
|
||||
|
||||
& .two-line-wrapper {
|
||||
padding: 0 !important;
|
||||
gap: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#PlacesToolbar menuitem,
|
||||
#PlacesToolbar menu,
|
||||
panelview .toolbarbutton-1,
|
||||
.subviewbutton,
|
||||
.widget-overflow-list .toolbarbutton-1 {
|
||||
min-height: calc(16px + var(--uc-contextmenu-menuitem-padding-block) * 2) !important;
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Search bar suggestions
|
||||
*/
|
||||
#PopupSearchAutoComplete {
|
||||
& .searchbar-separator {
|
||||
margin: 4px 0 !important;
|
||||
}
|
||||
|
||||
/* Search suggestions. */
|
||||
& .autocomplete-richlistitem,
|
||||
& .search-panel-header {
|
||||
padding-block: 2px !important;
|
||||
padding-inline: var(--uc-contextmenu-menuitem-padding-inline) !important;
|
||||
margin: 0 var(--uc-arrowpanel-menuitem-margin-inline) !important;
|
||||
border-radius: var(--arrowpanel-menuitem-border-radius) !important;
|
||||
|
||||
& > .ac-type-icon {
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Search engine selector. */
|
||||
& .search-one-offs {
|
||||
padding-block: 0 5px !important;
|
||||
|
||||
& #searchbar-one-offs-header-label {
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
& .search-panel-one-offs-container {
|
||||
margin-inline: 1px 7px !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Context menu
|
||||
*/
|
||||
|
||||
/* disable context menu when this tweak is applied */
|
||||
@media not (-moz-bool-pref: "uc.tweak.revert-context-menu") {
|
||||
/* Context Menu */
|
||||
menupopup:not(.PanelUI-subView),
|
||||
menupopup:not(.PanelUI-subView) menuitem,
|
||||
menupopup:not(.PanelUI-subView) menu,
|
||||
menupopup:not(.PanelUI-subView) menuseparator,
|
||||
panel:not(#PopupSearchAutoComplete) {
|
||||
appearance: none !important;
|
||||
}
|
||||
|
||||
menupopup:not(.PanelUI-subView),
|
||||
#PopupAutoComplete,
|
||||
menulist > menupopup:not(.PanelUI-subView) > menucaption {
|
||||
-moz-window-shadow: none !important;
|
||||
background: 0 !important;
|
||||
border: 0 !important;
|
||||
color: var(--arrowpanel-color) !important;
|
||||
}
|
||||
|
||||
.popup-internal-box,
|
||||
#PopupAutoComplete > .autocomplete-richlistbox,
|
||||
.menupopup-arrowscrollbox {
|
||||
background: var(--arrowpanel-background) !important;
|
||||
border: 1px solid var(--arrowpanel-border-color) !important;
|
||||
}
|
||||
|
||||
/* make room for menu shadow */
|
||||
menupopup:not(.PanelUI-subView) {
|
||||
padding: 4px 12px 20px !important;
|
||||
margin: -6px -12px -16px !important;
|
||||
}
|
||||
|
||||
/* cut off shadow so it doesn't get in the way of the menubar items */
|
||||
menubar menupopup {
|
||||
padding: 1px 8px 20px !important;
|
||||
margin: -1px -4px -16px !important;
|
||||
}
|
||||
|
||||
menupopup {
|
||||
--uc-margin: 0 !important;
|
||||
--uc-outline-color: #0001;
|
||||
--uc-box-shadow:
|
||||
0 8px 12px #0003,
|
||||
0 4px 5px #0002,
|
||||
0 2px 4px #0002;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme:dark) {
|
||||
menupopup {
|
||||
--uc-outline-color: #0002;
|
||||
--uc-box-shadow:
|
||||
0 8px 12px #0003,
|
||||
0 4px 5px #0003,
|
||||
0 2px 4px #0002;
|
||||
}
|
||||
}
|
||||
|
||||
/* use default shadow for subview menupopup (eg. bookmarks) */
|
||||
menupopup.PanelUI-subView {
|
||||
--uc-box-shadow: 0 0 0 1px var(--panel-border-color);
|
||||
--uc-margin: 1px !important;
|
||||
margin-top: -5px !important;
|
||||
}
|
||||
|
||||
.menupopup-arrowscrollbox {
|
||||
box-shadow: var(--uc-box-shadow) !important;
|
||||
outline: .5px solid var(--uc-outline-color) !important;
|
||||
}
|
||||
|
||||
.popup-internal-box {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.popup-internal-box,
|
||||
.menupopup-arrowscrollbox {
|
||||
padding: var(--uc-contextmenu-padding) !important;
|
||||
border-radius: var(--uc-contextmenu-border-radius) !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
menupopup menu[disabled="true"],
|
||||
menupopup menuitem[disabled="true"] {
|
||||
color: var(--panel-disabled-color) !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
menupopup menu:hover:not([disabled=true]),
|
||||
menupopup menuitem:hover:not([disabled=true]),
|
||||
menupopup menu[_moz-menuactive]:not([disabled=true]),
|
||||
menupopup menuitem[_moz-menuactive]:not([disabled=true]) {
|
||||
background-color: var(--panel-item-hover-bgcolor) !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
menupopup menuitem:hover:active:not([disabled=true]),
|
||||
menupopup menu:hover:active:not([disabled=true]) {
|
||||
background-color: var(--panel-item-active-bgcolor) !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
menupopup menuseparator,
|
||||
panel menuseparator,
|
||||
#PopupSearchAutoComplete .searchbar-separator {
|
||||
margin: var(--uc-contextmenu-separator-vertical) 0 !important;
|
||||
padding: 0 !important;
|
||||
background: none !important;
|
||||
border-top: 1px solid var(--panel-separator-color) !important;
|
||||
|
||||
&::before {
|
||||
content: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
#PlacesToolbar menupopup[placespopup="true"] menuseparator::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
menupopup menu,
|
||||
menupopup menuitem,
|
||||
menupopup menucaption,
|
||||
#PopupAutoComplete > richlistbox > richlistitem,
|
||||
#PopupSearchAutoComplete .autocomplete-richlistitem {
|
||||
padding: var(--uc-contextmenu-menuitem-padding-block) var(--uc-contextmenu-menuitem-padding-inline) !important;
|
||||
margin: var(--uc-contextmenu-menuitem-margin) !important;
|
||||
border-radius: var(--uc-contextmenu-menuitem-border-radius) !important;
|
||||
border: var(--uc-contextmenu-menuitem-border-width) solid transparent !important;
|
||||
background-clip: padding-box !important;
|
||||
min-height: calc(16px + (var(--uc-contextmenu-menuitem-padding-block) + var(--uc-contextmenu-menuitem-border-width)) * 2) !important;
|
||||
}
|
||||
|
||||
:not(:not(menubar)>menu, #ContentSelectDropdown) > menupopup > menuitem:not(.menuitem-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menuitem, .unified-nav-current),
|
||||
:not(:not(menubar)>menu, #ContentSelectDropdown) > menupopup > menu:not(.menu-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menu, .unified-nav-current),
|
||||
:not(:not(menubar)>menu, #ContentSelectDropdown) > menupopup > menucaption {
|
||||
padding-inline-start: calc(var(--uc-contextmenu-menuitem-padding-inline) + 16px + var(--uc-contextmenu-menuicon-margin-inline)) !important;
|
||||
}
|
||||
|
||||
.menu-iconic-icon {
|
||||
margin-block: 0 !important;
|
||||
margin-inline-end: 0 !important;
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
menu > .menu-iconic-text,
|
||||
menuitem > .menu-iconic-text,
|
||||
/* Used for vertical context navigation tweak. */
|
||||
#context-navigation > .menuitem-iconic::after {
|
||||
padding-inline-start: var(--uc-contextmenu-menuicon-margin-inline) !important;
|
||||
}
|
||||
|
||||
.menu-text,
|
||||
.menu-iconic-text {
|
||||
margin-inline-start: 0 !important;
|
||||
padding-block: 0 !important;
|
||||
}
|
||||
|
||||
.menu-accel,
|
||||
.menu-iconic-accel {
|
||||
margin-inline-end: 0 !important;
|
||||
padding-block: 0 !important;
|
||||
opacity: 0.7 !important;
|
||||
}
|
||||
|
||||
.menu-iconic > .menu-iconic-left,
|
||||
.menuitem-iconic > .menu-iconic-left {
|
||||
padding-inline-end: 0 !important;
|
||||
padding-block: 0 !important;
|
||||
}
|
||||
|
||||
menuitem:is(.menuitem-iconic:not([data-usercontextid]), [type="checkbox"], [type="radio"], [checked], [selected]) .menu-iconic-icon {
|
||||
-moz-context-properties: fill !important;
|
||||
fill: currentColor !important;
|
||||
}
|
||||
|
||||
.menu-right,
|
||||
.menu-accel-container {
|
||||
appearance: none !important;
|
||||
margin-inline-end: 0 !important;
|
||||
-moz-context-properties: fill;
|
||||
fill: currentColor !important;
|
||||
}
|
||||
|
||||
menupopup menuitem:is([type="checkbox"], [type="radio"]) .menu-iconic-icon,
|
||||
menulist > menupopup > menuitem .menu-iconic-icon,
|
||||
menu .menu-right {
|
||||
height: 16px !important;
|
||||
width: 16px !important;
|
||||
}
|
||||
|
||||
menulist > menupopup > menuitem:is([checked="true"], [selected="true"])::before,
|
||||
menupopup > menuitem::before,
|
||||
menupopup > menu::before,
|
||||
menupopup > menuitem::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
menuitem:is([type="checkbox"], [checked="true"], [type="radio"]) > .menu-iconic-left > .menu-iconic-icon {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
menuitem[checked="true"] > .menu-iconic-left,
|
||||
menu > .menu-iconic-left,
|
||||
menuitem > .menu-iconic-left {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important
|
||||
}
|
||||
|
||||
#context-navigation:not([hidden]) {
|
||||
padding: 0 !important;
|
||||
--menuitem-min-width: calc(16px + var(--uc-contextmenu-menuitem-padding-inline) * 2) !important;
|
||||
min-width: calc(4 * var(--menuitem-min-width));
|
||||
}
|
||||
|
||||
#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
#context-navigation {
|
||||
margin-inline: var(--uc-contextmenu-menuitem-margin-inline) !important;
|
||||
}
|
||||
|
||||
#context-navigation > .menuitem-iconic {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
#context-navigation > .menuitem-iconic {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#context-navigation > .menuitem-iconic {
|
||||
flex-grow: 1 !important;
|
||||
width: unset !important;
|
||||
}
|
||||
|
||||
#context-navigation > .menuitem-iconic[_moz-menuactive="true"] > .menu-iconic-left > .menu-iconic-icon {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
#context-bookmarkpage[starred] .menu-iconic-icon {
|
||||
fill: var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention, currentColor)) !important;
|
||||
}
|
||||
|
||||
@media (not (-moz-bool-pref: "uc.tweak.smaller-context-menu-text")) and (-moz-platform: windows) {
|
||||
.menu-text,
|
||||
.menu-iconic-text,
|
||||
panel .toolbarbutton-text,
|
||||
#PopupSearchAutoComplete .ac-title,
|
||||
/* Used for vertical context navigation tweak. */
|
||||
#context-navigation > .menuitem-iconic::after {
|
||||
margin-inline-start: 0 !important;
|
||||
margin-block: -3px -1px !important;
|
||||
padding-block: 0 !important;
|
||||
}
|
||||
|
||||
.menu-text,
|
||||
.menu-iconic-text,
|
||||
panel .toolbarbutton-text,
|
||||
#appMenu-fxa-status2,
|
||||
.panel-header,
|
||||
#PopupSearchAutoComplete,
|
||||
/* Used for vertical context navigation tweak. */
|
||||
#context-navigation > .menuitem-iconic::after {
|
||||
font-size: 13.6px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Dialog box
|
||||
*/
|
||||
|
||||
/* Dialog shadow and outline adjustments. */
|
||||
.dialogBox:not(.spotlightBox) {
|
||||
border-radius: 8px !important;
|
||||
outline: 0.5px solid var(--panel-separator-color) !important;
|
||||
box-shadow:
|
||||
0 20px 38px rgb(0 0 0 / 0.23),
|
||||
0 5px 9px rgb(0 0 0 / 0.22) !important;
|
||||
}
|
||||
|
||||
dialog {
|
||||
/* Dialog title. */
|
||||
& #titleContainer {
|
||||
/* Add larger gap between icon and title text. */
|
||||
& .titleIcon {
|
||||
padding-inline-end: 8px !important;
|
||||
}
|
||||
|
||||
/* Match font style in Edge. */
|
||||
& #titleText {
|
||||
font-size: 1.18em !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
/* Adjust vertical alignment of title text. */
|
||||
@media (-moz-platform: macOS) {
|
||||
&:not([noicon]) > #titleCropper {
|
||||
translate: 0 calc(-1px - max(.55 * var(--icon-size) - .6em, 0px)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Input focus style. */
|
||||
& input:where([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus {
|
||||
outline: 2px solid var(--in-content-box-border-color) !important;
|
||||
outline-offset: -2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* FF123+ tab preview pop-up.
|
||||
* CSS reference: https://searchfox.org/mozilla-central/source/browser/components/tabpreview/tabpreview.css
|
||||
* Requires `browser.tabs.cardPreview.enabled` set to `true` */
|
||||
.tab-preview-container {
|
||||
background-color: var(--arrowpanel-background) !important;
|
||||
color: var(--arrowpanel-color) !important;
|
||||
border: 0.5px solid var(--panel-separator-color) !important;
|
||||
border-radius: 8.5px !important;
|
||||
|
||||
/* Place thumbnail at the top of the tooltip. */
|
||||
display: flex !important;
|
||||
flex-direction: column-reverse !important;
|
||||
|
||||
& .tab-preview-uri {
|
||||
color: var(--panel-description-color) !important;
|
||||
}
|
||||
}
|
||||
87
themes/firefox/chrome/global/tree.css
Normal file
87
themes/firefox/chrome/global/tree.css
Normal file
@ -0,0 +1,87 @@
|
||||
/* Edge-Frfox - tree.css */
|
||||
|
||||
/* Change height of tree items and add rounded corners */
|
||||
treechildren::-moz-tree-row,
|
||||
treecol:not([hideheader="true"]),
|
||||
.tree-columnpicker-button {
|
||||
min-height: max(28px, 1.3em) !important;
|
||||
border-radius: 2px !important;
|
||||
}
|
||||
|
||||
/* Change the background colour on hover */
|
||||
@media not (prefers-contrast) {
|
||||
treechildren::-moz-tree-row(hover) {
|
||||
background-color: var(--toolbarbutton-hover-background) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Change the background colour when pressed */
|
||||
treechildren::-moz-tree-row(selected) {
|
||||
background-color: var(--toolbarbutton-active-background) !important;
|
||||
}
|
||||
|
||||
/* Change the background colour when focused */
|
||||
treechildren::-moz-tree-row(selected, focus) {
|
||||
background-color: var(--button-primary-bgcolor) !important;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-row(current, focus) {
|
||||
outline: var(--default-focusring);
|
||||
outline-color: var(--button-primary-bgcolor) !important;
|
||||
outline-offset: calc(-1 * var(--default-focusring-width));
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-image(selected),
|
||||
treechildren::-moz-tree-twisty(selected),
|
||||
treechildren::-moz-tree-cell-text(selected) {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-image(selected, focus),
|
||||
treechildren::-moz-tree-twisty(selected, focus),
|
||||
treechildren::-moz-tree-cell-text(selected, focus) {
|
||||
color: var(--button-primary-color) !important;
|
||||
}
|
||||
|
||||
/* Spacing between icon and label */
|
||||
treechildren::-moz-tree-image {
|
||||
margin-inline-end: 8px !important;
|
||||
}
|
||||
|
||||
/* Separator appearance */
|
||||
treechildren::-moz-tree-separator {
|
||||
border-top: 1px solid var(--toolbarseparator-color) !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
/* Change the colour of the drop feedback elements */
|
||||
treechildren::-moz-tree-cell-text(primary, dropOn) {
|
||||
background-color: var(--button-primary-bgcolor) !important;
|
||||
color: var(--button-primary-color) !important;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-drop-feedback {
|
||||
background-color: var(--toolbarbutton-icon-fill-attention) !important;
|
||||
border-radius: 2px !important;
|
||||
}
|
||||
|
||||
/* Change the appearance for the expandable items */
|
||||
treechildren::-moz-tree-twisty {
|
||||
padding-top: 0 !important;
|
||||
padding-inline: 4px !important;
|
||||
width: 16px !important;
|
||||
list-style-image: url("../icons/arrow-filled-right.svg") !important;
|
||||
}
|
||||
|
||||
treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed) {
|
||||
list-style-image: url("../icons/arrow-filled-left.svg") !important;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-twisty(open) {
|
||||
list-style-image: url("../icons/arrow-filled-down.svg") !important;
|
||||
}
|
||||
|
||||
/* Change the identation of child items */
|
||||
treechildren::-moz-tree-indentation {
|
||||
width: 16px !important;
|
||||
}
|
||||
247
themes/firefox/chrome/global/tweaks.css
Normal file
247
themes/firefox/chrome/global/tweaks.css
Normal file
@ -0,0 +1,247 @@
|
||||
/* Edge-Frfox - tweaks.css */
|
||||
|
||||
/*
|
||||
MARK: Disable drag space
|
||||
*/
|
||||
@media (-moz-bool-pref: "uc.tweak.disable-drag-space") {
|
||||
/* disable drag space above tabs */
|
||||
:root {
|
||||
--uc-tab-top-margin: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Force tab colour
|
||||
*/
|
||||
/* force tabs to toolbar bg (useful for proton themes) (might experience some
|
||||
bugs with certain themes eg. dark text on dark background.) */
|
||||
@media (-moz-bool-pref: "uc.tweak.force-tab-colour") {
|
||||
:root[lwtheme] {
|
||||
--tab-selected-bgcolor: var(--toolbar-bgcolor) !important;
|
||||
--tab-selected-textcolor: var(--toolbar-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Remove tab separators
|
||||
*/
|
||||
@media (-moz-bool-pref: "uc.tweak.remove-tab-separators") {
|
||||
.tabbrowser-tab .tab-stack {
|
||||
&::before,
|
||||
&::after {
|
||||
content: initial !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Floating tabs
|
||||
*/
|
||||
@media (-moz-bool-pref: "uc.tweak.floating-tabs") {
|
||||
:root:not([lwtheme]),
|
||||
/* `--newtab-background-color-secondary used` to differentiate between a dark
|
||||
* private window and private window with the 'Dark' theme enabled.
|
||||
* May not be the most reliable method, but works for now up to FF 123. */
|
||||
:root[privatebrowsingmode="temporary"]:where([style*="--lwt-accent-color: rgb(28, 27, 34)"]:not([style*="--newtab-background-color-secondary: rgb(66, 65, 77)"])) {
|
||||
--lwt-accent-color: light-dark(#f3f3f3, #202020) !important;
|
||||
--lwt-accent-color-inactive: unset !important;
|
||||
--toolbar-bgcolor: light-dark(#fff, #3F3F3F) !important;
|
||||
--lwt-tab-text: light-dark(#262626, #fff) !important;
|
||||
--chrome-content-separator-color: light-dark(#bfbfbf, #535353) !important;
|
||||
--lwt-tab-line-color: light-dark(transparent, rgb(255 255 255 / 0.06)) !important;
|
||||
}
|
||||
|
||||
/* Uses :root body to avoid affecting other variables by changing
|
||||
* --toolbar-color. */
|
||||
:root body {
|
||||
/* Use tabbar colours for better readability when using custom themes. */
|
||||
--toolbar-color: var(--lwt-text-color) !important;
|
||||
--toolbarbutton-icon-fill: var(--lwt-text-color) !important;
|
||||
|
||||
&:-moz-window-inactive {
|
||||
--toolbar-color: var(--lwt-text-color-inactive, var(--lwt-text-color)) !important;
|
||||
--toolbarbutton-icon-fill: var(--lwt-text-color-inactive, var(--lwt-text-color)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-gtk-csd-available) {
|
||||
:root:not([lwtheme]) {
|
||||
--toolbar-bgcolor: color-mix(in srgb, -moz-dialog 80%, #fff) !important;
|
||||
--toolbar-field-background-color: Field !important;
|
||||
--lwt-tab-text: -moz-dialogtext !important;
|
||||
--lwt-tab-line-color: rgb(255 255 255 / 0.06) !important;
|
||||
--lwt-accent-color: var(--toolbox-non-lwt-bgcolor) !important;
|
||||
|
||||
&:-moz-window-inactive {
|
||||
--lwt-accent-color: var(--toolbox-non-lwt-bgcolor-inactive) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Shadow for navbar and tabs */
|
||||
:root,
|
||||
:root .tabbrowser-tab {
|
||||
--uc-titlebar-shadow: none;
|
||||
--uc-tab-shadow-outline: rgb(0 0 0 / .11);
|
||||
--uc-tab-shadow: 0 2.5px 3px 1px rgb(0 0 0 / .08);
|
||||
|
||||
& [brighttext],
|
||||
& [brighttext] .tabbrowser-tab {
|
||||
--uc-titlebar-shadow: none;
|
||||
--uc-tab-shadow-outline: transparent;
|
||||
--uc-tab-shadow: 0 2px 3px rgb(0 0 0 / .12);
|
||||
}
|
||||
|
||||
& #TabsToolbar {
|
||||
--tab-border-radius: 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* remove toolbar bg */
|
||||
#nav-bar,
|
||||
#PersonalToolbar {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* invert bottom corner radius for tabs */
|
||||
.tab-background {
|
||||
border-radius: var(--tab-border-radius) !important;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-background[selected] {
|
||||
border: 1px solid var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent)) !important;
|
||||
outline: 1px solid var(--uc-tab-shadow-outline) !important;
|
||||
|
||||
/* Fractional scaling adjustments (150%, 175%, etc.) */
|
||||
@media (1dppx < resolution < 2dppx) {
|
||||
outline-width: 1.5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* adjust spacing of area above tabs */
|
||||
@media not (-moz-platform: macos) {
|
||||
:root[sizemode="maximized"] {
|
||||
--uc-tab-top-margin: 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
:root:is([inFullscreen], :not([tabsintitlebar])) {
|
||||
--uc-tab-top-margin: 4px !important;
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "uc.tweak.disable-drag-space") {
|
||||
:root {
|
||||
--uc-tab-top-margin: 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* IMPORTANT: Adds padding and removes margin on top of tabs to allow user to
|
||||
* select it from the top edge of the window */
|
||||
#tabbrowser-tabs {
|
||||
margin-top: calc(var(--uc-tab-top-margin) - 4px) !important;
|
||||
|
||||
& .tabbrowser-tab,
|
||||
& #tabs-newtab-button {
|
||||
padding-top: 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
#scrollbutton-up:not(.menupopup-scrollbutton),
|
||||
#scrollbutton-down:not(.menupopup-scrollbutton) {
|
||||
&,
|
||||
& ~ spacer {
|
||||
margin-top: 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* move tab shadow behind urlbar */
|
||||
.tabbrowser-tab[visuallyselected="true"],
|
||||
#nav-bar {
|
||||
z-index: 2 !important;
|
||||
}
|
||||
|
||||
/* tab shadow adjustments */
|
||||
.tabbrowser-tab {
|
||||
overflow-clip-margin: 8px !important;
|
||||
}
|
||||
|
||||
#tabbrowser-arrowscrollbox > *,
|
||||
#scrollbutton-up:not(.menupopup-scrollbutton),
|
||||
#scrollbutton-up:not(.menupopup-scrollbutton) ~ spacer,
|
||||
#scrollbutton-down:not(.menupopup-scrollbutton) {
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
#tabbrowser-arrowscrollbox {
|
||||
margin-bottom: -8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Vertical context nav
|
||||
*/
|
||||
@media (not (-moz-platform: macos)) and (not (-moz-bool-pref: "uc.tweak.revert-context-menu")) {
|
||||
@media (-moz-bool-pref: "uc.tweak.vertical-context-navigation") {
|
||||
#context-navigation {
|
||||
/* Stack menu items vertically. */
|
||||
flex-direction: column !important;
|
||||
|
||||
/* Align the image and label to the left edge. */
|
||||
& > .menuitem-iconic {
|
||||
justify-content: start !important;
|
||||
|
||||
&::after {
|
||||
/* Get the menuitem label from the aria-label attribute. */
|
||||
content: attr(aria-label);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Hide access key
|
||||
*/
|
||||
@media (-moz-bool-pref: "uc.tweak.context-menu.hide-access-key") {
|
||||
:where(menuitem, menu) > :is(.menu-text, .menu-iconic-text)[value]:not([value=""]) {
|
||||
&::before {
|
||||
/* The default value is -moz-label-content, which takes the data from the
|
||||
* value attribute and highlights the character found in the accesskey
|
||||
* attribute. This skips that and uses the value attribute directly. */
|
||||
content: attr(value) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Show tab close button
|
||||
*/
|
||||
@media (-moz-bool-pref: "uc.tweak.show-tab-close-button-on-hover") {
|
||||
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([pinned], [selected]):hover .tab-close-button {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Hide forward button
|
||||
*/
|
||||
@media (-moz-bool-pref: "uc.tweak.hide-forward-button") {
|
||||
:root:not([customizing]) #forward-button[disabled] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
MARK: Hide Firefox account
|
||||
*/
|
||||
@media (-moz-bool-pref: "uc.tweak.context-menu.hide-firefox-account") {
|
||||
#appMenu-fxa-status2,
|
||||
#appMenu-fxa-separator {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user