2022-05-11 21:19:02 +02:00
@ namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" ;
@ namespace html "http://www.w3.org/1999/xhtml" ;
2022-10-17 19:50:35 +02:00
/** Default Theme - Contrast **************************************************/
2022-05-11 21:19:02 +02:00
@ supports -moz-bool-pref ( "userChrome.theme.built_in_contrast" ) {
/*= Lightmode - Color darker =================================================*/
: root [ lwtheme-mozlightdark ] : not ( [ lwthemetextcolor = "bright" ] ) ,
: root [ style * = "--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);" ] {
2022-12-04 09:37:08 +01:00
--lwt-accent-color : rgb ( 229 , 229 , 235 ) ! important ; /* Original: rgb(240, 240, 244) */
2022-05-11 21:19:02 +02:00
}
@ media ( -moz-os-version : windows-win10 ) , ( -moz-platform : windows-win10 ) {
: root [ lwtheme-mozlightdark ] : not ( [ lwthemetextcolor = "bright" ] ) # navigator-toolbox ,
: root [ style * = "--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);" ] # navigator-toolbox {
background-color : var ( --lwt-accent-color ) ! important ;
}
}
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
: root [ lwtheme-mozlightdark ] : not ( [ lwthemetextcolor = "bright" ] ) # navigator-toolbox ,
: root [ style * = "--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);" ] # navigator-toolbox {
background-color : var ( --lwt-accent-color ) ! important ;
}
}
/*= Darkmode - Color lighter =================================================*/
: root [ lwtheme-mozlightdark ] [ lwthemetextcolor = "bright" ] ,
: root [ style * = "--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);" ] {
2022-12-04 09:37:08 +01:00
--toolbar-bgcolor : rgba ( 43 , 42 , 51 , 5 ) ! important ; /* Original: rgba(43, 42, 51, 1) */
2022-05-11 21:19:02 +02:00
}
}
/** Compatibility Fixes *******************************************************/
/*= Theme - Compatibility ====================================================*/
@ supports -moz-bool-pref ( "userChrome.compatibility.theme" ) {
/*= Hotfix #98 ===============================================================*/
/* Hidden Tab Panel Padding */
# allTabsMenu-hiddenTabsView . all-tabs-item {
margin-inline : 8px ;
border-radius : 4px ;
}
/*= Remote Tabs Panel's Bottom Padding =======================================*/
# PanelUI-remotetabs # PanelUI-remotetabs-main {
margin-bottom : 6px ;
}
/*= Identity Popup Icon Crop =================================================*/
. identity-popup-security-connection . identity-button {
padding-block : 1px ! important ;
}
/*= Zoom in button's plus icon horizontal rate ===============================*/
# customization-palette-container # zoom-in-button > . toolbarbutton-icon ,
# customization-panel-container # zoom-in-button > . toolbarbutton-icon ,
# widget-overflow-mainView # zoom-in-button > . toolbarbutton-icon {
padding-inline-start : 0px ! important ;
}
/*= Icon Fill Color ==========================================================*/
: root : -moz-lwtheme {
/ * Auto create --lwt-toolbarbutton-icon-fill-attention , fix for nightly default theme
Default Color : rgb ( 0 , 97 , 224 ) - > rgb ( 0 , 120 , 215 ) for more light
* /
--lwt-toolbarbutton-icon-fill-attention : var ( --button-primary-bgcolor , rgb ( 0 , 120 , 215 ) ) ;
}
/*= First visible tab margin at maximized #332 ===============================*/
: root [ tabsintitlebar = "true" ] [ sizemode = "maximized" ] # TabsToolbar {
margin-left : -1px ;
}
/*= Disabled menu background color ===========================================*/
menuitem [ disabled = "true" ] ,
menu [ disabled = "true" ] {
background-color : transparent ! important ;
}
/*= Remove Tab Border ========================================================*/
@ supports -moz-bool-pref ( "userChrome.tab.connect_to_window" ) {
/* TARGET: original, photon */
# TabsToolbar [ brighttext ]
# tabbrowser-tabs : not ( [ noshadowfortests ] )
. tabbrowser-tab : is ( [ visuallyselected = "true" ] , [ multiselected ] )
> . tab-stack
> . tab-background : -moz-lwtheme ,
# TabsToolbar : not ( [ brighttext ] )
# tabbrowser-tabs : not ( [ noshadowfortests ] )
. tabbrowser-tab : is ( [ visuallyselected = "true" ] , [ multiselected ] )
> . tab-stack
> . tab-background {
2022-10-17 19:50:35 +02:00
/* Nightly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */
2022-05-11 21:19:02 +02:00
border : unset ! important ;
}
# TabsToolbar # firefox-view-button [ open ] > . toolbarbutton-icon : -moz-lwtheme ,
. tab-background [ selected ] : -moz-lwtheme {
outline-color : transparent ! important ;
}
. keyboard-focused-tab > . tab-stack > . tab-background ,
. tabbrowser-tab : focus : not ( [ aria-activedescendant ] ) > . tab-stack > . tab-background {
outline : var ( --focus-outline ) ! important ;
}
}
2022-09-21 21:21:27 +02:00
/*= Tab Separator Color ======================================================*/
# TabsToolbar {
2022-12-04 09:37:08 +01:00
--toolbarseparator-color : color-mix ( in srgb , currentColor 20 % , transparent ) ; /* 60% at v105 */
2022-09-21 21:21:27 +02:00
}
2022-05-11 21:19:02 +02:00
/*= Light Weight Theme =======================================================*/
/* Header Image */
: root [ lwtheme-image ] {
2022-12-04 09:37:08 +01:00
background-image : var ( --lwt-header-image ) ! important ; /* Original: var(--lwt-header-image) */
2022-05-11 21:19:02 +02:00
background-repeat : no-repeat ! important ;
background-position : right top ! important ;
}
@ media ( min-width : 2500px ) {
: root [ lwtheme-image ] {
background-size : contain ;
}
@ supports -moz-bool-pref ( "userChrome.compatibility.covered_header_image" ) {
: root [ lwtheme-image ] {
background-size : cover ;
}
}
}
: root [ lwtheme-image ] # navigator-toolbox : -moz-lwtheme {
background-image : var ( --lwt-header-image ) , var ( --lwt-additional-images ) ! important ;
background-repeat : var ( --lwt-background-tiling ) ! important ;
background-position : var ( --lwt-background-alignment ) ! important ;
2022-12-04 09:37:08 +01:00
background-color : unset ! important ; /* Original: var(--lwt-accent-color) */
2022-05-11 21:19:02 +02:00
}
/* Navbar Border */
# navigator-toolbox : -moz-lwtheme {
2022-12-04 09:37:08 +01:00
--tabs-border-color : rgba ( 0 , 0 , 0 , 0 . 3 ) ; /* Legacy: v96 */
2022-05-11 21:19:02 +02:00
--lwt-tabs-border-color : rgba ( 0 , 0 , 0 , 0 . 3 ) ;
}
2022-08-29 19:20:12 +02:00
/*= Findbar Border Color =====================================================*/
html | input . findbar-textbox {
2022-12-04 09:37:08 +01:00
border : 1px solid var ( --input-border-color , var ( --toolbar-field-border-color , ThreeDShadow ) ) ! important ; /* Original: 1px solid var(--input-border-color, var(--toolbar-field-border-color)) */
2022-08-29 19:20:12 +02:00
}
2022-10-17 19:50:35 +02:00
/*= Drop Indicator Color #473 ================================================*/
treechildren :: -moz-tree-cell-text ( primary , dropOn ) ,
treechildren :: -moz-tree-drop-feedback ,
vbox [ part = "drop-indicator-bar" ] > image [ part = "drop-indicator" ] {
2022-12-04 09:37:08 +01:00
background-color : var (
--button-primary-bgcolor ,
var ( --focus-outline-color )
) ! important ; /* Original: SelectedItem or AccentColor*/
2022-10-17 19:50:35 +02:00
}
# bookmarksPanel [ lwt-sidebar = "true" ] {
--focus-outline-color : var ( --in-content-focus-outline-color , AccentColor ) ! important ;
}
/*= Menu color #477 ==========================================================*/
@ media ( -moz-windows-non-native-menus ) {
: root {
/* Override some menu color variables for light browser themes. */
--menuitem-hover-background-color : # e0e0e6 ;
--menu-background-color : # f9f9fb ;
--menu-color : # 15141a ;
--menuitem-disabled-hover-background-color : rgba ( 224 , 224 , 230 , 0 . 4 ) ;
--menu-disabled-color : rgba ( 21 , 20 , 26 , 0 . 4 ) ;
--menu-border-color : # cfcfd8 ;
--menu-icon-opacity : 0 . 7 ;
/* Declare menu colors for dark themes, but don't override anything yet. */
--dark-menuitem-hover-background-color : # 52525e ;
--dark-menu-background-color : # 2b2a33 ;
--dark-menu-color : # fbfbfe ;
--dark-menuitem-disabled-hover-background-color : rgba ( 82 , 82 , 94 , 0 . 4 ) ;
--dark-menu-disabled-color : rgba ( 251 , 251 , 254 , 0 . 4 ) ;
--dark-menu-border-color : # 5b5b66 ;
--dark-menu-icon-opacity : 1 ;
}
/* Override the menu color variables for dark browser themes. */
}
@ media ( -moz-windows-non-native-menus ) and ( -moz-toolbar-prefers-color-scheme : dark ) ,
( -moz-windows-non-native-menus ) and ( prefers-color-scheme : dark ) {
: root {
--menuitem-hover-background-color : var ( --dark-menuitem-hover-background-color ) ;
--menu-background-color : var ( --dark-menu-background-color ) ;
--menu-color : var ( --dark-menu-color ) ;
--menuitem-disabled-hover-background-color : var ( --dark-menuitem-disabled-hover-background-color ) ;
--menu-disabled-color : var ( --dark-menu-disabled-color ) ;
--menu-border-color : var ( --dark-menu-border-color ) ;
--menu-icon-opacity : var ( --dark-menu-icon-opacity ) ;
}
}
2022-12-04 09:37:08 +01:00
/*= Firefox View Border #498 =================================================*/
: root : not ( [ privatebrowsingmode = "temporary" ] ) [ firefoxviewhidden ] # firefox-view-button + # tabbrowser-tabs {
border-inline-start : none ! important ;
padding-inline-start : var ( --tab-overflow-pinned-tabs-width ) ! important ;
margin-inline-start : 0 ! important ;
}
2022-05-11 21:19:02 +02:00
}
/*= OS - Compatibility =======================================================*/
@ supports -moz-bool-pref ( "userChrome.compatibility.os" ) {
/*= Windows 10 - Top border of accent color at ESR #358 ======================*/
@ media ( -moz-os-version : windows-win10 ) , ( -moz-platform : windows-win10 ) {
: root [ sizemode = "normal" ] [ tabsintitlebar ] # navigator-toolbox {
2022-12-04 09:37:08 +01:00
border-top : 0 . 5px solid rgb ( 47 , 47 , 47 ) ! important ;
2022-05-11 21:19:02 +02:00
}
: root [ sizemode = "normal" ] [ tabsintitlebar ] : -moz-window-inactive # navigator-toolbox {
2022-12-04 09:37:08 +01:00
border-top-color : rgb ( 57 , 57 , 57 ) ! important ;
2022-05-11 21:19:02 +02:00
}
@ media ( -moz-windows-accent-color-in-titlebar ) {
: root [ sizemode = "normal" ] [ tabsintitlebar ] # navigator-toolbox {
2022-07-27 15:53:22 +02:00
border-top-color : AccentColor ! important ;
}
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
: root [ sizemode = "normal" ] [ tabsintitlebar ] # navigator-toolbox {
border-top-color : -moz-accent-color ! important ;
}
2022-05-11 21:19:02 +02:00
}
}
}
/*= Windows 7, 8 - Tab Bar Background *****************************************/
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) {
/* Header Color */
: root : not ( [ lwtheme-image ] ) : -moz-lwtheme {
background-color : var ( --lwt-accent-color ) ! important ;
}
}
@ media ( -moz-os-version : windows-win7 ) , ( -moz-platform : windows-win7 ) {
# TabsToolbar {
/* Remove Aero */
/* Original: radial-gradient(eclipse at bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 80%, transparent) */
background-image : unset ! important ;
}
# TabsToolbar : -moz-lwtheme {
/* background textcolor */
color : var ( --lwt-text-color ) ! important ;
}
}
@ media ( -moz-os-version : windows-win8 ) , ( -moz-platform : windows-win8 ) {
# navigator-toolbox : -moz-lwtheme {
/* background textcolor */
color : var ( --lwt-text-color ) ! important ;
}
}
/*= Windows 7, 8 - Menu Active Color =========================================*/
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) {
menupopup > menu ,
menupopup > menuitem ,
# context-navigation > menuitem {
2022-12-04 09:37:08 +01:00
border : 1px solid transparent ; /* Need reduce 2px at menu */
2022-05-11 21:19:02 +02:00
}
# main-menubar > menu [ open = "true" ] ,
# main-menubar > menu [ _moz-menuactive = "true" ] {
2022-12-04 09:37:08 +01:00
background-color : -moz-menuhover ! important ; /* Make to original */
2022-05-11 21:19:02 +02:00
}
: root : -moz-lwtheme # main-menubar > menu [ open = "true" ] ,
: root : -moz-lwtheme # main-menubar > menu [ _moz-menuactive = "true" ] {
2022-12-04 09:37:08 +01:00
color : inherit ! important ; /* Original: -moz-menubarhovertext */
background-color : color-mix ( in srgb , currentColor 20 % , transparent ) ! important ; /* Original: -moz-menuhover */
2022-05-11 21:19:02 +02:00
}
menulist > menupopup > menuitem [ _moz-menuactive = "true" ] ,
menulist > menupopup > menu [ _moz-menuactive = "true" ] {
background-color : highlight ! important ;
color : highlighttext ! important ;
}
# PlacesToolbar menu ,
# PlacesToolbar menuitem ,
# BMB_bookmarksPopup menu ,
# BMB_bookmarksPopup menuitem {
2022-12-04 09:37:08 +01:00
border : none ! important ; /* Remove border */
2022-05-11 21:19:02 +02:00
}
# PlacesToolbar menu : not ( [ disabled ] , : active ) [ _moz-menuactive = "true" ] ,
# PlacesToolbar menuitem : not ( [ disabled ] , : active ) [ _moz-menuactive = "true" ] ,
# BMB_bookmarksPopup menu : not ( [ disabled ] , : active ) [ _moz-menuactive = "true" ] ,
# BMB_bookmarksPopup menuitem : not ( [ disabled ] , : active ) [ _moz-menuactive = "true" ] {
background-color : var ( --button-hover-bgcolor ) ! important ;
}
}
@ media ( -moz-os-version : windows-win7 ) , ( -moz-platform : windows-win7 ) {
menu [ _moz-menuactive = "true" ] ,
menuitem [ _moz-menuactive = "true" ] {
background-color : color-mix ( in srgb , -moz-menuhover 5 % , transparent ) ! important ;
border-color : color-mix ( in srgb , -moz-menuhover 60 % , transparent ) ! important ;
}
2022-06-29 20:07:26 +02:00
menu [ _moz-menuactive = "true" ] [ disabled = "true" ] ,
2022-05-11 21:19:02 +02:00
menuitem [ _moz-menuactive = "true" ] [ disabled = "true" ] {
background-color : color-mix ( in srgb , currentColor 5 % , transparent ) ! important ;
border-color : color-mix ( in srgb , currentColor 60 % , transparent ) ! important ;
}
/* Remove text shadow */
: root : -moz-lwtheme # toolbar-menubar {
text-shadow : unset ! important ;
/* Original: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255, 255, 255, .4) */
}
/* Remove Color */
: root : -moz-lwtheme # main-menubar : not ( : -moz-window-inactive ) {
2022-12-04 09:37:08 +01:00
background-color : unset ! important ; /* Original: rgba(255, 255, 255, .5) */
color : unset ! important ; /* Original: black */
2022-05-11 21:19:02 +02:00
}
}
@ media ( -moz-os-version : windows-win8 ) , ( -moz-platform : windows-win8 ) {
menu [ _moz-menuactive = "true" ] ,
menuitem [ _moz-menuactive = "true" ] {
background-color : color-mix ( in srgb , -moz-menuhover 17 % , transparent ) ! important ;
border-color : color-mix ( in srgb , -moz-menuhover 80 % , transparent ) ! important ;
}
2022-06-29 20:07:26 +02:00
menu [ _moz-menuactive = "true" ] [ disabled = "true" ] ,
2022-05-11 21:19:02 +02:00
menuitem [ _moz-menuactive = "true" ] [ disabled = "true" ] {
background-color : color-mix ( in srgb , currentColor 17 % , transparent ) ! important ;
border-color : color-mix ( in srgb , currentColor 80 % , transparent ) ! important ;
}
}
@ media ( -moz-gtk-csd-available ) {
/*= Linux - Global Menubar Active Color ====================================*/
# main-menubar > menu [ open = "true" ] ,
# main-menubar > menu [ _moz-menuactive = "true" ] {
2022-12-04 09:37:08 +01:00
color : inherit ! important ; /* Original: -moz-menubarhovertext */
background-color : color-mix ( in srgb , currentColor 20 % , transparent ) ! important ; /* Original: -moz-menuhover */
2022-05-11 21:19:02 +02:00
}
/*= Linux - Titlebar button at lwtheme =====================================*/
2022-10-17 19:50:35 +02:00
@ supports not -moz-bool-pref ( "userChrome.compatibility.os.linux_non_native_titlebar_button" ) {
2022-05-11 21:19:02 +02:00
. titlebar-button : -moz-lwtheme {
appearance : auto ! important ;
}
. titlebar-min : -moz-lwtheme ,
. titlebar-max : -moz-lwtheme ,
. titlebar-restore : -moz-lwtheme ,
. titlebar-close : -moz-lwtheme {
list-style-image : none ! important ;
}
. titlebar-button : -moz-lwtheme : hover ,
. titlebar-button : -moz-lwtheme : hover : active {
background-color : unset ! important ;
color : unset ! important ;
}
}
}
/*= Linux - Light System Default Theme's Selected Tab ========================*/
@ media ( -moz-gtk-csd-available ) {
@ media ( -moz-toolbar-prefers-color-scheme : light ) , ( prefers-color-scheme : light ) {
/ * Because of
# TabsToolbar : not ( [ brighttext ] ) # tabbrowser-tabs : not ( [ noshadowfortests ] ) . tabbrowser-tab : is ( [ visuallyselected = true ] , [ multiselected ] ) > . tab-stack > . tab-background {
border : 1px solid var ( --tab-line-color , rgba ( 128 , 128 , 142 , 0 . 9 ) ) ;
box-shadow : 0 0 4px rgba ( 128 , 128 , 142 , 0 . 5 ) ;
}
* /
# tabbrowser-tabs : not ( [ noshadowfortests ] )
. tabbrowser-tab : is ( [ visuallyselected = "true" ] , [ multiselected ] )
> . tab-stack
> . tab-background : not ( : -moz-lwtheme ) {
box-shadow : 0 0 4px rgba ( 128 , 128 , 142 , 0 . 5 ) ! important ;
}
# TabsToolbar : not ( [ brighttext ] )
# tabbrowser-tabs : not ( [ noshadowfortests ] )
. tabbrowser-tab : is ( [ visuallyselected = "true" ] , [ multiselected ] )
> . tab-stack
> . tab-background : not ( : -moz-lwtheme ) {
box-shadow : 0 0 1px var ( --tab-line-color , rgba ( 128 , 128 , 142 , 0 . 9 ) ) , 0 0 4px rgba ( 128 , 128 , 142 , 0 . 5 ) ! important ;
}
}
}
2022-06-29 20:07:26 +02:00
/*= Titlebar Container Size at maximized #384 ================================*/
2022-10-17 19:50:35 +02:00
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) ,
( -moz-os-version : windows-win10 ) ,
( -moz-platform : windows-win10 ) {
@ supports not -moz-bool-pref ( "userChrome.compatibility.os.windows_maximized" ) {
: root [ tabsintitlebar ] # titlebar {
2022-06-29 20:07:26 +02:00
/* -moz-default-appearance: -moz-window-titlebar */
appearance : none ! important ;
2022-10-17 19:50:35 +02:00
}
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) {
: root [ tabsintitlebar ] [ sizemode = "maximized" ] # titlebar {
padding-top : 8px ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.compatibility.os.windows_maximized" ) {
: root [ tabsintitlebar ] [ sizemode = "maximized" ] # titlebar {
appearance : none ! important ;
2022-06-29 20:07:26 +02:00
padding-top : 8px ;
}
}
}
2022-05-11 21:19:02 +02:00
}
/*= Others - Compatibility ===================================================*/
@ supports -moz-bool-pref ( "userChrome.compatibility.panel_cutoff" ) {
# appMenu-popup panelview {
2022-12-04 09:37:08 +01:00
width : 24 . 5em ! important ; /* can modify panel width, Original: 22.5em */
2022-05-11 21:19:02 +02:00
}
}
@ supports -moz-bool-pref ( "userChrome.compatibility.navbar_top_border" ) {
# nav-bar {
box-shadow : none ! important ;
}
}
2022-08-29 19:20:12 +02:00
/** Theme *********************************************************************/
/*= System Default Theme =====================================================*/
2022-05-11 21:19:02 +02:00
@ supports -moz-bool-pref ( "userChrome.theme.system_default" ) {
/*= Common - URL Bar focus color =============================================*/
@ media ( -moz-windows-accent-color-in-titlebar ) , ( -moz-gtk-csd-available ) {
/* URL Bar */
: root [ tabsintitlebar ] : not ( : -moz-window-inactive , : -moz-lwtheme ) ,
: root [ tabsintitlebar ] [ lwt-default-theme-in-dark-mode ] : not ( : -moz-window-inactive ) {
2022-07-27 15:53:22 +02:00
--focus-outline-color : AccentColor ! important ;
2022-05-11 21:19:02 +02:00
}
: root [ tabsintitlebar ] : not ( : -moz-window-inactive , : -moz-lwtheme ) # urlbar [ open ] > # urlbar-background ,
: root [ tabsintitlebar ] [ lwt-default-theme-in-dark-mode ] : not ( : -moz-window-inactive )
# urlbar [ open ]
> # urlbar-background {
2022-12-04 09:37:08 +01:00
border-color : color-mix (
in srgb ,
AccentColor 50 % ,
transparent
) ! important ; /* Like: --toolbar-field-focus-border-color */
2022-05-11 21:19:02 +02:00
}
2022-07-27 15:53:22 +02:00
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
: root [ tabsintitlebar ] : not ( : -moz-window-inactive , : -moz-lwtheme ) ,
: root [ tabsintitlebar ] [ lwt-default-theme-in-dark-mode ] : not ( : -moz-window-inactive ) {
--focus-outline-color : -moz-accent-color ! important ;
}
: root [ tabsintitlebar ] : not ( : -moz-window-inactive , : -moz-lwtheme ) # urlbar [ open ] > # urlbar-background ,
: root [ tabsintitlebar ] [ lwt-default-theme-in-dark-mode ] : not ( : -moz-window-inactive )
# urlbar [ open ]
> # urlbar-background {
2022-12-04 09:37:08 +01:00
border-color : color-mix (
in srgb ,
-moz-accent-color 50 % ,
transparent
) ! important ; /* Like: --toolbar-field-focus-border-color */
2022-07-27 15:53:22 +02:00
}
}
2022-05-11 21:19:02 +02:00
}
/*= Windows7 - Aero Based Theme ==============================================*/
@ media ( -moz-os-version : windows-win7 ) , ( -moz-platform : windows-win7 ) {
# TabsToolbar : not ( : -moz-lwtheme ) {
--background-color : rgb ( 229 , 229 , 235 ) ;
--toolbarseparator-color : transparent ;
}
# TabsToolbar : not ( : -moz-lwtheme )
. tabbrowser-tab
> . tab-stack
> . tab-background : not ( [ selected = "true" ] , [ multiselected ] ) {
color : var ( --background-color ) ;
background-color : color-mix ( in srgb , currentColor 60 % , transparent ) ;
}
# TabsToolbar : not ( : -moz-lwtheme )
. tabbrowser-tab : hover
> . tab-stack
> . tab-background : not ( [ selected = "true" ] , [ multiselected ] ) {
2022-12-04 09:37:08 +01:00
background-color : color-mix (
in srgb ,
currentColor 85 % ,
transparent
) ! important ; /* Original: color-mix(in srgb, currentColor 11%, transparent) */
2022-05-11 21:19:02 +02:00
}
# scrollbutton-up : not ( : -moz-lwtheme ) ,
# scrollbutton-down : not ( : -moz-lwtheme ) ,
# alltabs-button : not ( : -moz-lwtheme ) > . toolbarbutton-badge-stack ,
# TabsToolbar : not ( : -moz-lwtheme ) . toolbarbutton-1 > . toolbarbutton-icon {
color : var ( --background-color ) ! important ;
background-color : color-mix ( in srgb , currentColor 50 % , transparent ) ;
}
}
/*= Windows10 - UWP like color ===============================================*/
@ media ( -moz-os-version : windows-win10 ) , ( -moz-platform : windows-win10 ) {
: root : not ( : -moz-lwtheme ) {
--win-text-color : rgba ( 0 , 0 , 0 ) ;
--win-bgcolor : rgb ( 204 , 204 , 204 ) ;
--win-disabled-color : rgb ( 145 , 145 , 145 ) ;
--win-disabled-bgcolor : transparent ;
2022-12-04 09:37:08 +01:00
--win-hover-bgcolor : rgb ( 218 , 218 , 218 ) ; /* also button-bgcolor */
--win-hover-active-bgcolor : # c2c2c2 ; /* also button-hover-bgcolor */
2022-05-11 21:19:02 +02:00
--win-button-hover-bgcolor : rgba ( 218 , 218 , 218 , 0 . 66 ) ;
--win-button-active-bgcolor : # aaaaaa ;
--win-field-bgcolor : # ffffff ;
--win-component-bgcolor : # f2f2f2 ;
--win-border-color : # 8a8a8a ;
2022-10-17 19:50:35 +02:00
--win-tab-separator-color : # a3a3a3 ;
2022-05-11 21:19:02 +02:00
--win-sidebar-bgcolor : # e6e6e6 ;
--win-sidebar-hover-bgcolor : # cfcfcf ;
--win-sidebar-button-hover-bgcolor : # b8b8b8 ;
--win-sidebar-button-hover-active-bgcolor : # a3a3a3 ;
--win-button-border : # 747474 ;
2022-10-17 19:50:35 +02:00
--win-shortcut-text-color : # 757575 ;
2022-05-11 21:19:02 +02:00
--win-error-color : # b31616 ;
--win-red-border-color : # ff4343 ;
2022-10-17 19:50:35 +02:00
--win-accent-foreground-color : AccentColorText ;
2022-07-27 15:53:22 +02:00
--win-accent-color : color-mix ( in srgb , rgba ( 0 , 0 , 0 , 0 . 8 ) 10 % , AccentColor ) ;
--win-accent-content-color : color-mix ( in srgb , rgba ( 255 , 255 , 255 , 0 . 8 ) 15 % , AccentColor ) ;
--win-accent-hover-color : color-mix ( in srgb , rgba ( 255 , 255 , 255 , 0 . 8 ) 27 % , AccentColor ) ;
--win-accent-active-color : AccentColor ;
}
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
: root : not ( : -moz-lwtheme ) {
2022-10-17 19:50:35 +02:00
--win-accent-foreground-color : -moz-accent-color-foreground ;
2022-07-27 15:53:22 +02:00
--win-accent-color : color-mix ( in srgb , rgba ( 0 , 0 , 0 , 0 . 8 ) 10 % , -moz-accent-color ) ;
--win-accent-content-color : color-mix ( in srgb , rgba ( 255 , 255 , 255 , 0 . 8 ) 15 % , -moz-accent-color ) ;
--win-accent-hover-color : color-mix ( in srgb , rgba ( 255 , 255 , 255 , 0 . 8 ) 27 % , -moz-accent-color ) ;
--win-accent-active-color : -moz-accent-color ;
}
2022-05-11 21:19:02 +02:00
}
@ media ( -moz-toolbar-prefers-color-scheme : dark ) , ( prefers-color-scheme : dark ) {
: root : not ( : -moz-lwtheme ) ,
: root [ lwt-default-theme-in-dark-mode ] {
--win-text-color : # ffffff ;
--win-bgcolor : # 2b2b2b ;
--win-disabled-color : # 747474 ;
--win-disabled-bgcolor : transparent ;
2022-12-04 09:37:08 +01:00
--win-hover-bgcolor : # 2e2e2e ; /* also button-bgcolor */
--win-hover-active-bgcolor : # 454545 ; /* also button-active-color */
2022-05-11 21:19:02 +02:00
--win-button-hover-bgcolor : rgba ( 46 , 46 , 46 , 0 . 66 ) ;
--win-button-active-bgcolor : # 515151 ;
--win-field-bgcolor : # 373737 ;
--win-component-bgcolor : # 171717 ;
--win-border-color : # 5b5b5b ;
2022-10-17 19:50:35 +02:00
--win-tab-separator-color : # 555555 ;
2022-05-11 21:19:02 +02:00
--win-sidebar-bgcolor : # 1f1f1f ;
--win-sidebar-hover-bgcolor : # 353535 ;
--win-sidebar-button-hover-bgcolor : # 353535 ;
--win-sidebar-button-hover-active-bgcolor : # 4c4c4c ;
--win-button-border : # 8f8f8f ;
2022-10-17 19:50:35 +02:00
--win-shortcut-text-color : # adadad ;
2022-05-11 21:19:02 +02:00
--win-error-color : # ffb900 ;
--win-red-border-color : # ff4343 ;
2022-07-27 15:53:22 +02:00
--win-accent-color : color-mix ( in srgb , rgba ( 255 , 255 , 255 , 0 . 8 ) 20 % , AccentColor ) ;
--win-accent-content-color : color-mix ( in srgb , rgba ( 255 , 255 , 255 , 0 . 8 ) 35 % , AccentColor ) ;
--win-accent-hover-color : color-mix ( in srgb , rgba ( 0 , 0 , 0 , 0 . 8 ) 5 % , AccentColor ) ;
--win-accent-active-color : AccentColor ;
}
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
: root : not ( : -moz-lwtheme ) ,
: root [ lwt-default-theme-in-dark-mode ] {
--win-accent-color : color-mix ( in srgb , rgba ( 255 , 255 , 255 , 0 . 8 ) 20 % , -moz-accent-color ) ;
--win-accent-content-color : color-mix ( in srgb , rgba ( 255 , 255 , 255 , 0 . 8 ) 35 % , -moz-accent-color ) ;
--win-accent-hover-color : color-mix ( in srgb , rgba ( 0 , 0 , 0 , 0 . 8 ) 5 % , -moz-accent-color ) ;
--win-accent-active-color : -moz-accent-color ;
}
2022-05-11 21:19:02 +02:00
}
}
: root : not ( : -moz-lwtheme ) ,
: root [ lwt-default-theme-in-dark-mode ] {
/* Text, Icon Color */
--menu-color : var ( --win-text-color ) ! important ;
--lwt-text-color : var ( --win-text-color ) ! important ;
--button-color : var ( --win-text-color ) ! important ;
--input-color : var ( --win-text-color ) ! important ;
--toolbar-color : var ( --win-text-color ) ! important ;
--toolbar-non-lwt-textcolor : var ( --win-text-color ) ! important ;
--toolbarbutton-icon-fill : var ( --win-text-color ) ! important ;
--toolbar-field-focus-color : var ( --win-text-color ) ! important ;
--urlbar-popup-action-color : var ( --win-text-color ) ! important ;
--toolbar-field-color : var ( --win-text-color ) ! important ;
--autocomplete-popup-highlight-color : var ( --win-text-color ) ! important ;
--tab-icon-overlay-fill : var ( --win-text-color ) ! important ;
--panel-banner-item-color : var ( --win-text-color ) ! important ;
--arrowpanel-color : var ( --win-text-color ) ! important ;
--autocomplete-popup-color : var ( --win-text-color ) ! important ;
/* Text Disabled Color */
--menu-disabled-color : var ( --win-disabled-color ) ! important ;
--checkbox-unchecked-active-bgcolor : var ( --win-disabled-color ) ! important ;
--panel-disabled-color : var ( --win-disabled-color ) ! important ;
--download-progress-paused-color : var ( --win-disabled-color ) ! important ;
/* Text Shortcut Color */
2022-10-17 19:50:35 +02:00
--panel-shortcut-color : var ( --win-shortcut-text-color ) ! important ;
--panel-description-color : var ( --win-shortcut-text-color ) ! important ;
2022-07-27 15:53:22 +02:00
/* Title Background */
2022-05-11 21:19:02 +02:00
--lwt-accent-color : var ( --win-bgcolor ) ! important ;
--toolbar-field-border-color : var ( --win-bgcolor ) ! important ;
--chrome-content-separator-color : var ( --win-bgcolor ) ! important ;
/* Component Background Color */
--menu-background-color : var ( --win-component-bgcolor ) ! important ;
--toolbar-bgcolor : var ( --win-component-bgcolor ) ! important ;
--toolbar-non-lwt-bgcolor : var ( --win-component-bgcolor ) ! important ;
--arrowpanel-background : var ( --win-component-bgcolor ) ! important ;
--autocomplete-popup-background : var ( --win-component-bgcolor ) ! important ;
2022-07-27 15:53:22 +02:00
/* Border Color */
2022-10-17 19:50:35 +02:00
/* Separator */
--toolbarseparator-color : var ( --win-tab-separator-color ) ! important ;
/* Field Background Color */
2022-05-11 21:19:02 +02:00
--input-bgcolor : var ( --win-field-bgcolor ) ! important ;
--toolbar-field-background-color : var ( --win-field-bgcolor ) ! important ;
--toolbar-field-focus-background-color : var ( --win-field-bgcolor ) ! important ;
--tab-icon-overlay-stroke : var ( --win-field-bgcolor ) ! important ;
/* Hover Background Color, Button Color */
--menuitem-hover-background-color : var ( --win-hover-bgcolor ) ! important ;
--toolbarbutton-hover-background : var ( --win-hover-bgcolor ) ! important ;
--button-bgcolor : var ( --win-hover-bgcolor ) ! important ;
--panel-banner-item-background-color : var ( --win-hover-bgcolor ) ! important ;
/* Hover Active, Button Hover Color */
--checkbox-unchecked-bgcolor : var ( --win-hover-active-bgcolor ) ! important ;
--urlbar-box-bgcolor : var ( --win-hover-active-bgcolor ) ! important ;
--urlbar-box-focus-bgcolor : var ( --win-hover-active-bgcolor ) ! important ;
--toolbarbutton-active-background : var ( --win-hover-active-bgcolor ) ! important ;
--urlbar-box-active-bgcolor : var ( --win-hover-active-bgcolor ) ! important ;
--autocomplete-popup-highlight-background : var ( --win-hover-active-bgcolor ) ! important ;
--panel-banner-item-hover-bgcolor : var ( --win-hover-active-bgcolor ) ! important ;
/* Button Hover Active Color */
--button-active-bgcolor : var ( --win-button-active-bgcolor ) ! important ;
--panel-banner-item-active-bgcolor : var ( --win-button-active-bgcolor ) ! important ;
/* Disabled Background Color */
--menuitem-disabled-hover-background-color : var ( --win-disabled-bgcolor ) ! important ;
/* Button Hover Color */
--button-hover-bgcolor : var ( --win-button-hover-bgcolor ) ! important ;
--checkbox-unchecked-hover-bgcolor : var ( --win-button-hover-bgcolor ) ! important ;
--urlbar-box-hover-bgcolor : var ( --win-button-hover-bgcolor ) ! important ;
--autocomplete-popup-hover-background : var ( --win-button-hover-bgcolor ) ! important ;
/* Button Border Color */
--checkbox-border-color : var ( --win-button-border ) ! important ;
--input-border-color : var ( --win-button-border ) ! important ;
--autocomplete-popup-separator-color : var ( --win-button-border ) ! important ;
2022-10-17 19:50:35 +02:00
/* Accent Foreground Color */
--button-primary-color : var ( --win-accent-foreground-color ) ! important ;
--checkbox-checked-color : var ( --win-accent-foreground-color ) ! important ;
2022-05-11 21:19:02 +02:00
/* Accent Color */
--button-primary-bgcolor : var ( --win-accent-color ) ! important ;
--focus-outline-color : var ( --win-accent-color ) ! important ;
--checkbox-checked-bgcolor : var ( --win-accent-color ) ! important ;
/* Accent Content Color */
--toolbarbutton-icon-fill-attention : var ( --win-accent-content-color ) ! important ;
--urlbar-popup-url-color : var ( --win-accent-content-color ) ! important ;
--download-progress-fill-color : var ( --win-accent-content-color ) ! important ;
/* Accent Hover Color */
--button-primary-hover-bgcolor : var ( --win-accent-hover-color ) ! important ;
--checkbox-checked-hover-bgcolor : var ( --win-accent-hover-color ) ! important ;
/* Accent Hover Active Color */
--button-primary-active-bgcolor : var ( --win-accent-active-color ) ! important ;
--checkbox-checked-active-bgcolor : var ( --win-accent-active-color ) ! important ;
/* Error Color */
--error-text-color : var ( --win-error-color ) ! important ;
--input-error-border-color : var ( --win-error-color ) ! important ;
/* Others */
--tab-line-color : Highlight ! important ;
--tab-selected-bgcolor : unset ! important ;
--tabs-border-color : transparent ! important ;
--checkbox-checked-border-color : transparent ! important ;
/* Other Defaults */
--arrowpanel-dimmed : color-mix ( in srgb , currentColor 12 % , transparent ) ! important ;
--arrowpanel-dimmed-further : color-mix ( in srgb , currentColor 20 % , transparent ) ! important ;
--arrowpanel-dimmed-even-further : color-mix ( in srgb , currentColor 27 % , transparent ) ! important ;
--download-progress-flare-color : rgba ( 255 , 255 , 255 , 0 . 75 ) ! important ;
--panelview-toolbarbutton-focus-box-shadow : inset 0 0 0 2px var ( --focus-outline-color ) ! important ;
}
# navigator-toolbox : not ( : -moz-lwtheme ) {
background : var ( --lwt-accent-color ) ! important ;
}
/*- Separator --------------------------------------------------------------*/
: root : not ( : -moz-lwtheme ) {
--arrowpanel-border-color : var ( --win-bgcolor ) ! important ;
--panel-separator-color : var ( --win-bgcolor ) ! important ;
}
: root [ lwt-default-theme-in-dark-mode ] {
--arrowpanel-border-color : var ( --win-border-color ) ! important ;
--panel-separator-color : var ( --win-border-color ) ! important ;
}
@ supports -moz-bool-pref ( "userChrome.theme.system_default" ) {
@ media ( -moz-windows-accent-color-in-titlebar ) {
: root [ tabsintitlebar ] : not ( : -moz-window-inactive , : -moz-lwtheme ) ,
: root [ tabsintitlebar ] [ lwt-default-theme-in-dark-mode ] : not ( : -moz-window-inactive ) {
2022-12-04 09:37:08 +01:00
--toolbarseparator-color : color-mix ( in srgb , currentColor 20 % , transparent ) ! important ; /* As default */
2022-05-11 21:19:02 +02:00
}
}
}
/*- Proton Tab Selected ----------------------------------------------------*/
@ supports not -moz-bool-pref ( "userChrome.tab.color_like_toolbar" ) {
: root : not ( : -moz-lwtheme ) ,
: root [ lwt-default-theme-in-dark-mode ] {
--win-proton-tab-selected-bgcolor : color-mix ( in srgb , var ( --win-bgcolor ) 5 % , var ( --win-component-bgcolor ) ) ;
}
: root : not ( : -moz-lwtheme ) {
--tab-selected-color : var ( --win-proton-tab-selected-bgcolor ) ! important ;
}
: root [ lwt-default-theme-in-dark-mode ] {
--lwt-selected-tab-background-color : var ( --win-proton-tab-selected-bgcolor ) ! important ;
}
}
/*- Menu -------------------------------------------------------------------*/
html # main-window menupopup : not ( : -moz-lwtheme ) {
--menu-color : var ( --win-text-color ) ! important ;
--menu-background-color : var ( --win-component-bgcolor ) ! important ;
--menu-border-color : var ( --win-bgcolor ) ! important ;
--menuitem-hover-background-color : var ( --win-hover-bgcolor ) ! important ;
--menu-disabled-color : var ( --win-disabled-color ) ! important ;
--menuitem-disabled-hover-background-color : var ( --win-disabled-bgcolor ) ! important ;
}
/*- Toolbar ----------------------------------------------------------------*/
: root : not ( : -moz-lwtheme ) # titlebar ,
: root [ lwt-default-theme-in-dark-mode ] # titlebar {
--button-hover-bgcolor : var ( --win-sidebar-button-hover-bgcolor ) ;
--button-active-bgcolor : var ( --win-sidebar-button-hover-active-bgcolor ) ;
--toolbarbutton-hover-background : var ( --win-sidebar-button-hover-bgcolor ) ;
--toolbarbutton-active-background : var ( --win-sidebar-button-hover-active-bgcolor ) ;
}
/*- Sidebar ----------------------------------------------------------------*/
# sidebar-box : not ( [ lwt-sidebar ] ) {
appearance : none ! important ;
}
: root : not ( : -moz-lwtheme ) # sidebar-box ,
: root [ lwt-default-theme-in-dark-mode ] # sidebar-box {
--sidebar-background-color : var ( --win-sidebar-bgcolor ) ! important ;
--sidebar-text-color : var ( --win-text-color ) ! important ;
--sidebar-border-color : var ( --win-border-color ) ! important ;
}
@ media ( -moz-toolbar-prefers-color-scheme : dark ) , ( prefers-color-scheme : dark ) {
. sidebar-panel [ style = "--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);" ] ,
body [ lwt-sidebar ] [ style = "--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);" ] ,
. sidebar-panel [ style = "--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);" ] ,
body [ lwt-sidebar ] [ style = "--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);" ] {
/* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */
2022-07-27 15:53:22 +02:00
--lwt-sidebar-background-color : var ( --win-sidebar-bgcolor ) ! important ;
2022-05-11 21:19:02 +02:00
--lwt-sidebar-text-color : var ( --win-text-color ) ! important ;
}
}
/*- Panel ------------------------------------------------------------------*/
: root : not ( : -moz-lwtheme ) . subviewbutton ,
: root [ lwt-default-theme-in-dark-mode ] . subviewbutton {
--button-hover-bgcolor : var ( --win-hover-active-bgcolor ) ! important ;
--button-active-bgcolor : var ( --win-button-active-bgcolor ) ! important ;
}
: root : not ( : -moz-lwtheme )
toolbarbutton . subviewbutton : not ( [ disabled ] , [ open ] , : active , # appMenu-fxa-label2 , # appMenu-zoomReduce-button2 , # appMenu-zoomReset-button2 , # appMenu-zoomEnlarge-button2 , # appMenu-fullscreen-button2 ) : is ( : hover ) ,
: root [ lwt-default-theme-in-dark-mode ]
toolbarbutton . subviewbutton : not ( [ disabled ] , [ open ] , : active , # appMenu-fxa-label2 , # appMenu-zoomReduce-button2 , # appMenu-zoomReset-button2 , # appMenu-zoomEnlarge-button2 , # appMenu-fullscreen-button2 ) : is ( : hover ) {
background-color : var ( --win-hover-bgcolor ) ! important ;
}
: root : not ( : -moz-lwtheme )
toolbarbutton . subviewbutton : not ( [ disabled ] , # appMenu-fxa-label2 , # appMenu-zoomReduce-button2 , # appMenu-zoomReset-button2 , # appMenu-zoomEnlarge-button2 , # appMenu-fullscreen-button2 ) : is ( [ open ] , : hover : active ) ,
: root [ lwt-default-theme-in-dark-mode ]
toolbarbutton . subviewbutton : not ( [ disabled ] , # appMenu-fxa-label2 , # appMenu-zoomReduce-button2 , # appMenu-zoomReset-button2 , # appMenu-zoomEnlarge-button2 , # appMenu-fullscreen-button2 ) : is ( [ open ] , : hover : active ) {
background-color : var ( --win-hover-active-bgcolor ) ! important ;
}
/*- Others -----------------------------------------------------------------*/
/* For overwrite */
: root [ lwtheme-mozlightdark ] : not ( [ lwthemetextcolor = "bright" ] ) : not ( : -moz-lwtheme ) ,
: root : not ( : -moz-lwtheme ) {
/* Light Theme */
--lwt-accent-color : var ( --win-bgcolor ) ! important ;
}
@ media ( -moz-toolbar-prefers-color-scheme : dark ) , ( prefers-color-scheme : dark ) {
: root [ lwt-default-theme-in-dark-mode ] [ lwthemetextcolor = "bright" ] {
2022-12-04 09:37:08 +01:00
--toolbar-bgcolor : var ( --win-component-bgcolor ) ! important ; /* Original: rgba(43, 42, 51, 1) */
2022-05-11 21:19:02 +02:00
}
}
# tabbrowser-tabs : not ( [ movingtab ] )
> # tabbrowser-arrowscrollbox
> . tabbrowser-tab
> . tab-stack
> . tab-background [ multiselected ] : not ( [ selected ] ) : not ( : -moz-lwtheme ) ,
: root [ lwtheme-mozlightdark ]
# tabbrowser-tabs : not ( [ movingtab ] )
> # tabbrowser-arrowscrollbox
> . tabbrowser-tab
> . tab-stack
> . tab-background [ multiselected ] : not ( [ selected ] ) ,
: root : is ( [ style * = "--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);" ] , [ style * = "--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);" ] )
# tabbrowser-tabs : not ( [ movingtab ] )
> # tabbrowser-arrowscrollbox
> . tabbrowser-tab
> . tab-stack
> . tab-background [ multiselected ] : not ( [ selected ] ) {
background-image : linear-gradient (
color-mix ( in srgb , currentColor 11 % , transparent ) ,
color-mix ( in srgb , currentColor 11 % , transparent )
) ,
linear-gradient ( var ( --toolbar-bgcolor ) , var ( --toolbar-bgcolor ) ) , var ( --lwt-header-image , none ) ! important ;
}
}
/*= Windows10 - Titlebar accent color ========================================*/
@ media ( -moz-windows-accent-color-in-titlebar ) {
/* Tab Bar */
: root [ tabsintitlebar ] : not ( : -moz-window-inactive , : -moz-lwtheme ) . titlebar-color ,
: root [ tabsintitlebar ] [ lwt-default-theme-in-dark-mode ] : not ( : -moz-window-inactive ) . titlebar-color {
2022-07-27 15:53:22 +02:00
color : AccentColorText ;
background-color : AccentColor ;
}
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
: root [ tabsintitlebar ] : not ( : -moz-window-inactive , : -moz-lwtheme ) . titlebar-color ,
: root [ tabsintitlebar ] [ lwt-default-theme-in-dark-mode ] : not ( : -moz-window-inactive ) . titlebar-color {
color : -moz-accent-color-foreground ;
background-color : -moz-accent-color ;
}
2022-05-11 21:19:02 +02:00
}
: root [ tabsintitlebar ] : not ( : -moz-window-inactive , : -moz-lwtheme ) . toolbar-items ,
: root [ tabsintitlebar ] [ lwt-default-theme-in-dark-mode ] : not ( : -moz-window-inactive ) . toolbar-items {
--toolbarbutton-icon-fill : currentColor ;
2022-07-27 15:53:22 +02:00
--toolbarbutton-hover-background : color-mix ( in srgb , AccentColorText 10 % , transparent ) ;
--toolbarbutton-active-background : color-mix ( in srgb , AccentColorText 15 % , transparent ) ;
}
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
: root [ tabsintitlebar ] : not ( : -moz-window-inactive , : -moz-lwtheme ) . toolbar-items ,
: root [ tabsintitlebar ] [ lwt-default-theme-in-dark-mode ] : not ( : -moz-window-inactive ) . toolbar-items {
--toolbarbutton-hover-background : color-mix ( in srgb , -moz-accent-color-foreground 10 % , transparent ) ;
--toolbarbutton-active-background : color-mix ( in srgb , -moz-accent-color-foreground 15 % , transparent ) ;
}
2022-05-11 21:19:02 +02:00
}
}
/*= GTK - URL View url accent color ==========================================*/
@ media ( -moz-gtk-csd-available ) {
: root : not ( : -moz-lwtheme ) . urlbarView-url {
2022-07-27 15:53:22 +02:00
--urlbar-popup-url-color : AccentColor ;
}
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
: root : not ( : -moz-lwtheme ) . urlbarView-url {
--urlbar-popup-url-color : -moz-accent-color ;
}
2022-05-11 21:19:02 +02:00
}
/* Nightly Compatibility */
: root : not ( : -moz-lwtheme ) # urlbar {
2022-12-04 09:37:08 +01:00
--toolbar-field-focus-color : var ( --toolbar-field-color ) ; /* Nightly: rgba(0, 0, 0, 1) */
--toolbar-field-focus-background-color : var ( --toolbar-field-background-color ) ; /* Nightly: white */
2022-05-11 21:19:02 +02:00
}
}
/*= Mac - Default like color =================================================*/
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
: root : not ( : -moz-lwtheme ) ,
: root [ lwt-default-theme-in-dark-mode ] {
/* Colors */
--mac-text-color : -moz-dialogtext ;
--mac-disabled-color : GrayText ;
--mac-bgcolor : Window ;
--mac-selected-bgcolor : color-mix ( in srgb , rgb ( 255 , 255 , 255 ) 15 % , -moz-dialog ) ;
--mac-field-bgcolor : Window ;
--mac-panel-bgcolor : Menu ;
--mac-sidebar-bgcolor : -moz-mac-source-list ;
--mac-sidebar-hover-bgcolor : color-mix ( in srgb , ButtonFace 60 % , var ( --mac-sidebar-bgcolor ) ) ;
--mac-hover-bgcolor : Window ;
--mac-disabled-bgcolor : transparent ;
2022-12-04 09:37:08 +01:00
--mac-primary-button-color : AccentColorText ; /* or -moz-mac-menutextselect */
--mac-accent-color : AccentColor ; /* or LinkText */
2022-07-27 15:53:22 +02:00
--mac-accent-content-color : color-mix ( in srgb , rgb ( 255 , 255 , 255 ) 15 % , AccentColor ) ;
2022-12-04 09:37:08 +01:00
--mac-accent-hover-color : color-mix (
in srgb ,
rgb ( 0 , 0 , 0 ) 10 % ,
AccentColor
) ; /* or -moz-mac-menuselect, Highlight */
--mac-accent-active-color : color-mix ( in srgb , rgb ( 0 , 0 , 0 ) 20 % , AccentColor ) ; /* or ActiveBorder */
2022-05-11 21:19:02 +02:00
/* Text, Icon Color */
--menu-color : var ( --mac-text-color ) ! important ;
--lwt-text-color : var ( --mac-text-color ) ! important ;
--button-color : var ( --mac-text-color ) ! important ;
--input-color : var ( --mac-text-color ) ! important ;
--toolbar-color : var ( --mac-text-color ) ! important ;
--toolbar-non-lwt-textcolor : var ( --mac-text-color ) ! important ;
--toolbarbutton-icon-fill : var ( --mac-text-color ) ! important ;
--toolbar-field-focus-color : var ( --mac-text-color ) ! important ;
--urlbar-popup-action-color : var ( --mac-text-color ) ! important ;
--toolbar-field-color : var ( --mac-text-color ) ! important ;
--autocomplete-popup-highlight-color : var ( --mac-text-color ) ! important ;
--tab-icon-overlay-fill : var ( --mac-text-color ) ! important ;
--panel-banner-item-color : var ( --mac-text-color ) ! important ;
--arrowpanel-color : var ( --mac-text-color ) ! important ;
--autocomplete-popup-color : var ( --mac-text-color ) ! important ;
--panel-shortcut-color : var ( --mac-text-color ) ! important ;
--panel-description-color : var ( --mac-text-color ) ! important ;
/* Text Disabled Color */
--menu-disabled-color : var ( --mac-disabled-color ) ! important ;
--button-active-bgcolor : var ( --mac-disabled-color ) ! important ;
--checkbox-unchecked-active-bgcolor : var ( --mac-disabled-color ) ! important ;
--panel-disabled-color : var ( --mac-disabled-color ) ! important ;
--download-progress-paused-color : var ( --mac-disabled-color ) ! important ;
/* Background Color */
--lwt-accent-color : var ( --mac-bgcolor ) ! important ;
--menu-background-color : var ( --mac-bgcolor ) ! important ;
--autocomplete-popup-background : var ( --mac-bgcolor ) ! important ;
/* Selected Background Color */
--toolbar-bgcolor : var ( --mac-selected-bgcolor ) ! important ;
--toolbar-non-lwt-bgcolor : var ( --mac-selected-bgcolor ) ! important ;
2022-10-17 19:50:35 +02:00
/* Field Background Color */
2022-05-11 21:19:02 +02:00
--input-bgcolor : var ( --mac-field-bgcolor ) ! important ;
--toolbar-field-background-color : var ( --mac-field-bgcolor ) ! important ;
--tab-icon-overlay-stroke : var ( --mac-field-bgcolor ) ! important ;
2022-10-17 19:50:35 +02:00
/* Panel Background Color */
2022-05-11 21:19:02 +02:00
--arrowpanel-background : var ( --mac-panel-bgcolor ) ! important ;
/* Hover Background Color */
--menuitem-hover-background-color : var ( --mac-hover-bgcolor ) ! important ;
--toolbarbutton-hover-background : var ( --mac-hover-bgcolor ) ! important ;
--panel-banner-item-hover-bgcolor : var ( --mac-hover-bgcolor ) ! important ;
--button-bgcolor : var ( --mac-hover-bgcolor ) ! important ;
--checkbox-unchecked-bgcolor : var ( --mac-hover-bgcolor ) ! important ;
--panel-banner-item-background-color : var ( --mac-hover-bgcolor ) ! important ;
--urlbar-box-bgcolor : var ( --mac-hover-bgcolor ) ! important ;
--urlbar-box-focus-bgcolor : var ( --mac-hover-bgcolor ) ! important ;
--panel-banner-item-active-bgcolor : var ( --mac-hover-bgcolor ) ! important ;
--toolbarbutton-active-background : var ( --mac-hover-bgcolor ) ! important ;
--urlbar-box-active-bgcolor : var ( --mac-hover-bgcolor ) ! important ;
--autocomplete-popup-highlight-background : var ( --mac-hover-bgcolor ) ! important ;
--button-hover-bgcolor : var ( --mac-hover-bgcolor ) ! important ;
--checkbox-unchecked-hover-bgcolor : var ( --mac-hover-bgcolor ) ! important ;
--urlbar-box-hover-bgcolor : var ( --mac-hover-bgcolor ) ! important ;
--autocomplete-popup-hover-background : var ( --mac-hover-bgcolor ) ! important ;
/* Disabled Background Color */
--menuitem-disabled-hover-background-color : var ( --mac-disabled-bgcolor ) ! important ;
/* Border Color */
/ *
--menu-border-color : var ( --mac-bgcolor ) ! important ;
--toolbar-field-border-color : var ( --mac-bgcolor ) ! important ;
--arrowpanel-border-color : var ( --mac-bgcolor ) ! important ;
--chrome-content-separator-color : var ( --mac-bgcolor ) ! important ;
--toolbarseparator-color : var ( --mac-bgcolor ) ! important ;
--panel-separator-color : var ( --mac-bgcolor ) ! important ;
* /
/* Button Border Color */
/ *
--tab-line-color : var ( ---mac-bgcolor ) ! important ;
--checkbox-border-color : var ( --mac-bgcolor ) ! important ;
--input-border-color : var ( --mac-bgcolor ) ! important ;
--autocomplete-popup-separator-color : var ( --mac-bgcolor ) ! important ;
* /
2022-10-17 19:50:35 +02:00
/* Accent Color Foreground */
2022-05-11 21:19:02 +02:00
--button-primary-color : var ( --mac-primary-button-color ) ! important ;
--checkbox-checked-color : var ( --mac-primary-button-color ) ! important ;
/* Accent Color */
--button-primary-bgcolor : var ( --mac-accent-color ) ! important ;
--focus-outline-color : var ( --mac-accent-color ) ! important ;
--checkbox-checked-bgcolor : var ( --mac-accent-color ) ! important ;
/* Accent Content Color */
--toolbarbutton-icon-fill-attention : var ( --mac-accent-content-color ) ! important ;
--urlbar-popup-url-color : var ( --mac-accent-content-color ) ! important ;
--download-progress-fill-color : var ( --mac-accent-content-color ) ! important ;
/* Accent Hover Color */
--button-primary-hover-bgcolor : var ( --mac-accent-hover-color ) ! important ;
--checkbox-checked-hover-bgcolor : var ( --mac-accent-hover-color ) ! important ;
/* Accent Hover Active Color */
--button-primary-active-bgcolor : var ( --mac-accent-active-color ) ! important ;
--checkbox-checked-active-bgcolor : var ( --mac-accent-active-color ) ! important ;
/* Error Color */
/ *
--error-text-color : var ( --win-error-color ) ! important ;
--input-error-border-color : var ( --win-error-color ) ! important ;
* /
/* Others */
--tab-selected-bgcolor : unset ! important ;
--tabs-border-color : transparent ! important ;
--checkbox-checked-border-color : transparent ! important ;
/* Other Defaults */
--arrowpanel-dimmed : color-mix ( in srgb , currentColor 12 % , transparent ) ! important ;
--arrowpanel-dimmed-further : color-mix ( in srgb , currentColor 20 % , transparent ) ! important ;
--arrowpanel-dimmed-even-further : color-mix ( in srgb , currentColor 27 % , transparent ) ! important ;
--download-progress-flare-color : rgba ( 255 , 255 , 255 , 0 . 75 ) ! important ;
--panelview-toolbarbutton-focus-box-shadow : inset 0 0 0 2px var ( --focus-outline-color ) ! important ;
}
2022-07-27 15:53:22 +02:00
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
: root : not ( : -moz-lwtheme ) ,
: root [ lwt-default-theme-in-dark-mode ] {
2022-12-04 09:37:08 +01:00
--mac-primary-button-color : -moz-accent-color-foreground ; /* or -moz-mac-menutextselect */
--mac-accent-color : -moz-accent-color ; /* or LinkText */
2022-07-27 15:53:22 +02:00
--mac-accent-content-color : color-mix ( in srgb , rgb ( 255 , 255 , 255 ) 15 % , -moz-accent-color ) ;
2022-12-04 09:37:08 +01:00
--mac-accent-hover-color : color-mix (
in srgb ,
rgb ( 0 , 0 , 0 ) 10 % ,
-moz-accent-color
) ; /* or -moz-mac-menuselect, Highlight */
--mac-accent-active-color : color-mix ( in srgb , rgb ( 0 , 0 , 0 ) 20 % , -moz-accent-color ) ; /* or ActiveBorder */
2022-07-27 15:53:22 +02:00
}
}
2022-05-11 21:19:02 +02:00
@ media ( -moz-toolbar-prefers-color-scheme : dark ) , ( prefers-color-scheme : dark ) {
: root : not ( : -moz-lwtheme ) ,
: root [ lwt-default-theme-in-dark-mode ] {
--mac-field-bgcolor : Field ;
--mac-panel-bgcolor : -moz-CellHighlight ;
--mac-hover-bgcolor : ButtonFace ;
--toolbar-field-focus-background-color : var ( --mac-bgcolor ) ! important ;
--toolbar-field-background-color : var ( --mac-sidebar-bgcolor ) ! important ;
}
}
/*- Proton Tab Selected ----------------------------------------------------*/
@ supports not -moz-bool-pref ( "userChrome.tab.color_like_toolbar" ) {
: root : not ( : -moz-lwtheme ) ,
: root [ lwt-default-theme-in-dark-mode ] {
--mac-proton-tab-selected-bgcolor : color-mix ( in srgb , rgb ( 255 , 255 , 255 ) 20 % , -moz-dialog ) ;
}
: root : not ( : -moz-lwtheme ) {
--tab-selected-color : var ( --mac-proton-tab-selected-bgcolor ) ! important ;
}
: root [ lwt-default-theme-in-dark-mode ] {
--lwt-selected-tab-background-color : var ( --mac-proton-tab-selected-bgcolor ) ! important ;
}
}
/*- Toolbar ----------------------------------------------------------------*/
: root : not ( : -moz-lwtheme ) # navigator-toolbox ,
: root [ lwt-default-theme-in-dark-mode ] # navigator-toolbox {
background-color : var ( --mac-bgcolor ) ! important ;
}
: root : not ( : -moz-lwtheme ) # titlebar {
--mac-hover-bgcolor : ButtonFace ;
}
: root : not ( : -moz-lwtheme ) # titlebar ,
: root [ lwt-default-theme-in-dark-mode ] # titlebar {
--button-hover-bgcolor : var ( --mac-hover-bgcolor ) ;
--button-active-bgcolor : var ( --mac-hover-bgcolor ) ;
--toolbarbutton-hover-background : var ( --mac-hover-bgcolor ) ;
--toolbarbutton-active-background : var ( --mac-hover-bgcolor ) ;
/* Prevent transparent tabbar at fullscreen hover #312 */
background : var ( --mac-bgcolor ) ;
}
: root [ lwt-default-theme-in-dark-mode ] # urlbar {
--autocomplete-popup-highlight-background : var ( --mac-hover-bgcolor ) ! important ;
--autocomplete-popup-hover-background : var ( --mac-hover-bgcolor ) ! important ;
}
/*- Sidebar ----------------------------------------------------------------*/
# sidebar-box : not ( [ lwt-sidebar ] ) {
appearance : none ! important ;
}
: root : not ( : -moz-lwtheme ) # sidebar-box ,
: root [ lwt-default-theme-in-dark-mode ] # sidebar-box {
--sidebar-background-color : var ( --mac-sidebar-bgcolor ) ! important ;
--sidebar-text-color : var ( --mac-text-color ) ! important ;
/* --sidebar-border-color: var(--win-sidebar-border-color) !important; */
}
@ media ( -moz-toolbar-prefers-color-scheme : dark ) , ( prefers-color-scheme : dark ) {
. sidebar-panel [ style = "--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);" ] ,
body [ lwt-sidebar ] [ style = "--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);" ] ,
. sidebar-panel [ style = "--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);" ] ,
body [ lwt-sidebar ] [ style = "--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);" ] {
/* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */
--lwt-sidebar-background-color : transparent ! important ;
--lwt-sidebar-text-color : var ( --mac-text-color ) ! important ;
}
}
: root [ lwt-default-theme-in-dark-mode ] # sidebarMenu-popup {
--button-hover-bgcolor : var ( --mac-sidebar-hover-bgcolor ) ;
--button-active-bgcolor : var ( --mac-sidebar-hover-bgcolor ) ;
}
/*- Others -----------------------------------------------------------------*/
/* For Overwrite */
@ media ( -moz-toolbar-prefers-color-scheme : dark ) , ( prefers-color-scheme : dark ) {
: root [ lwt-default-theme-in-dark-mode ] [ lwthemetextcolor = "bright" ] {
--toolbar-bgcolor : color-mix ( in srgb , rgb ( 255 , 255 , 255 ) 15 % , -moz-dialog ) ! important ;
}
}
/* Hard Coded */
@ supports -moz-bool-pref ( "userChrome.tab.color_like_toolbar" ) {
: root [ lwtheme-mozlightdark ] [ lwt-default-theme-in-dark-mode ]
# tabbrowser-tabs : not ( [ movingtab ] )
> # tabbrowser-arrowscrollbox
> . tabbrowser-tab
> . tab-stack
> . tab-background [ selected = "true" ] ,
: root [ style * = "--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);" ] [ lwt-default-theme-in-dark-mode ]
# tabbrowser-tabs : not ( [ movingtab ] )
> # tabbrowser-arrowscrollbox
> . tabbrowser-tab
> . tab-stack
> . tab-background [ selected = "true" ] {
2022-12-04 09:37:08 +01:00
background : color-mix ( in srgb , rgb ( 255 , 255 , 255 ) 15 % , -moz-dialog ) ! important ;
2022-05-11 21:19:02 +02:00
}
}
: root : not ( : -moz-lwtheme ) : not ( [ customizing = "true" ] ) tab [ visuallyselected ] > stack :: before ,
: root : not ( : -moz-lwtheme ) : not ( [ customizing = "true" ] ) tab [ visuallyselected ] > stack :: after ,
: root [ lwt-default-theme-in-dark-mode ] : not ( [ customizing = "true" ] ) tab [ visuallyselected ] > stack :: before ,
: root [ lwt-default-theme-in-dark-mode ] : not ( [ customizing = "true" ] ) tab [ visuallyselected ] > stack :: after {
2022-12-04 09:37:08 +01:00
fill : color-mix ( in srgb , rgb ( 255 , 255 , 255 ) 15 % , -moz-dialog ) ! important ;
2022-05-11 21:19:02 +02:00
}
}
}
2022-08-29 19:20:12 +02:00
/*= Fully Theme Mode =========================================================*/
2022-05-11 21:19:02 +02:00
@ supports -moz-bool-pref ( "userChrome.theme.proton_color" ) {
/*= Default Colors - Hard Coded ==============================================*/
/* Based on chrome://global/skin/in-content/common.css */
: host ,
: root {
--in-content-page-color : rgb ( 21 , 20 , 26 ) ;
--in-content-page-background : # fff ;
--in-content-text-color : var ( --in-content-page-color ) ;
--in-content-deemphasized-text : rgb ( 91 , 91 , 102 ) ;
--in-content-box-background : # fff ;
2022-12-04 09:37:08 +01:00
--in-content-box-background-odd : rgba ( 12 , 12 , 13 , 0 . 05 ) ; /* grey 90 a05 */
2022-05-11 21:19:02 +02:00
--in-content-box-border-color : color-mix ( in srgb , currentColor 41 % , transparent ) ;
--in-content-box-info-background : # f0f0f4 ;
--in-content-item-hover : color-mix ( in srgb , var ( --in-content-primary-button-background ) 20 % , transparent ) ;
--in-content-item-hover-text : var ( --in-content-page-color ) ;
--in-content-item-selected : var ( --in-content-primary-button-background ) ;
--in-content-item-selected-text : var ( --in-content-primary-button-text-color ) ;
--in-content-icon-color : rgb ( 91 , 91 , 102 ) ;
--in-content-accent-color : # 0a84ff ;
--in-content-accent-color-active : # 0060df ;
--in-content-border-hover : var ( --grey-90-a50 ) ;
--in-content-border-invalid : var ( --red-50 ) ;
--in-content-border-color : # d7d7db ;
--in-content-error-text-color : # c50042 ;
--in-content-link-color : var ( --blue-60 ) ;
--in-content-link-color-hover : var ( --blue-70 ) ;
--in-content-link-color-active : var ( --blue-80 ) ;
--in-content-link-color-visited : var ( --blue-60 ) ;
2022-10-17 19:50:35 +02:00
/* button background states are also used for checkboxes and radio buttons */
2022-05-11 21:19:02 +02:00
--in-content-button-text-color : var ( --in-content-text-color ) ;
--in-content-button-text-color-hover : var ( --in-content-text-color ) ;
--in-content-button-background : rgba ( 207 , 207 , 216 , 0 . 33 ) ;
--in-content-button-background-hover : rgba ( 207 , 207 , 216 , 0 . 66 ) ;
--in-content-button-background-active : rgb ( 207 , 207 , 216 ) ;
--in-content-primary-button-text-color : rgb ( 251 , 251 , 254 ) ;
--in-content-primary-button-text-color-hover : var ( --in-content-primary-button-text-color ) ;
--in-content-primary-button-background : # 0061e0 ;
--in-content-primary-button-background-hover : # 0250bb ;
--in-content-primary-button-background-active : # 053e94 ;
--in-content-danger-button-background : # e22850 ;
--in-content-danger-button-background-hover : # c50042 ;
--in-content-danger-button-background-active : # 810220 ;
--in-content-focus-outline-color : var ( --in-content-primary-button-background ) ;
/* Note: 1px smaller than we want because we have a 1px transparent border. */
/* Once proton ships, these can probably stop being variables. */
--in-content-button-border-radius : 4px ;
--in-content-button-horizontal-padding : 15px ;
--in-content-button-vertical-padding : 7px ;
--in-content-table-background : # f8f8fa ;
2022-12-04 09:37:08 +01:00
--in-content-table-border-color : var ( --in-content-box-border-color ) ; /* Legacy: #d1d1d1; rgba(249, 249, 250, 0.2) */
2022-05-11 21:19:02 +02:00
--in-content-table-border-dark-color : var ( --in-content-table-border-color ) ;
2022-12-04 09:37:08 +01:00
--in-content-table-header-background : var (
--in-content-primary-button-background
) ; /* Legacy: #0a84ff; rgb(5, 64, 150); */
--in-content-table-header-color : var (
--in-content-primary-button-text-color
) ; /* Legacy: #ffffff; var(--in-content-page-color); */
2022-05-11 21:19:02 +02:00
--in-content-sidebar-width : 240px ;
--dialog-warning-text-color : var ( --red-60 ) ;
--checkbox-border-color : var ( --in-content-box-border-color ) ;
--checkbox-unchecked-bgcolor : var ( --in-content-button-background ) ;
--checkbox-unchecked-hover-bgcolor : var ( --in-content-button-background-hover ) ;
--checkbox-unchecked-active-bgcolor : var ( --in-content-button-background-active ) ;
--checkbox-checked-bgcolor : var ( --in-content-primary-button-background ) ;
--checkbox-checked-color : var ( --in-content-primary-button-text-color ) ;
--checkbox-checked-border-color : transparent ;
--checkbox-checked-hover-bgcolor : var ( --in-content-primary-button-background-hover ) ;
--checkbox-checked-active-bgcolor : var ( --in-content-primary-button-background-active ) ;
--blue-40 : # 45a1ff ;
--blue-50 : # 0a84ff ;
--blue-60 : # 0060df ;
--blue-70 : # 003eaa ;
--blue-80 : # 002275 ;
--grey-30 : # d7d7db ;
--grey-60 : # 4a4a4f ;
--grey-90-a10 : rgba ( 12 , 12 , 13 , 0 . 1 ) ;
--grey-90-a20 : rgba ( 12 , 12 , 13 , 0 . 2 ) ;
--grey-90-a30 : rgba ( 12 , 12 , 13 , 0 . 3 ) ;
--grey-90-a50 : rgba ( 12 , 12 , 13 , 0 . 5 ) ;
--grey-90-a60 : rgba ( 12 , 12 , 13 , 0 . 6 ) ;
--green-50 : # 30e60b ;
--green-60 : # 12bc00 ;
--green-70 : # 058b00 ;
--green-80 : # 006504 ;
--green-90 : # 003706 ;
--orange-50 : # ff9400 ;
--red-40 : # ff4f5e ;
--red-50 : # ff0039 ;
--red-60 : # d70022 ;
--red-70 : # a4000f ;
--red-80 : # 5a0002 ;
--red-90 : # 3e0200 ;
--yellow-50 : # ffe900 ;
--yellow-60 : # d7b600 ;
--yellow-60-a30 : rgba ( 215 , 182 , 0 , 0 . 3 ) ;
--yellow-70 : # a47f00 ;
--yellow-80 : # 715100 ;
--yellow-90 : # 3e2800 ;
--shadow-10 : 0 1px 4px var ( --grey-90-a10 ) ;
--shadow-30 : 0 4px 16px var ( --grey-90-a10 ) ;
--card-padding : 16px ;
--card-shadow : var ( --shadow-10 ) ;
--card-outline-color : var ( --grey-30 ) ;
--card-shadow-hover : var ( --card-shadow ) , 0 0 0 5px var ( --card-outline-color ) ;
}
@ media ( -moz-toolbar-prefers-color-scheme : dark ) , ( prefers-color-scheme : dark ) {
: host ,
: root {
/* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */
--in-content-page-background : rgb ( 28 , 27 , 34 ) ;
--in-content-page-color : rgb ( 251 , 251 , 254 ) ;
--in-content-deemphasized-text : rgb ( 191 , 191 , 201 ) ;
--in-content-box-background : rgb ( 35 , 34 , 43 ) ;
--in-content-box-background-odd : rgba ( 249 , 249 , 250 , 0 . 05 ) ;
--in-content-box-info-background : rgba ( 249 , 249 , 250 , 0 . 15 ) ;
--in-content-border-color : rgba ( 249 , 249 , 250 , 0 . 2 ) ;
--in-content-border-hover : rgba ( 249 , 249 , 250 , 0 . 3 ) ;
--in-content-border-invalid : rgb ( 255 , 132 , 139 ) ;
--in-content-error-text-color : # ff9aa2 ;
--in-content-button-background : rgb ( 43 , 42 , 51 ) ;
--in-content-button-background-hover : rgb ( 82 , 82 , 94 ) ;
--in-content-button-background-active : rgb ( 91 , 91 , 102 ) ;
--in-content-icon-color : rgb ( 251 , 251 , 254 ) ;
--in-content-primary-button-text-color : rgb ( 43 , 42 , 51 ) ;
--in-content-primary-button-background : rgb ( 0 , 221 , 255 ) ;
--in-content-primary-button-background-hover : rgb ( 128 , 235 , 255 ) ;
--in-content-primary-button-background-active : rgb ( 170 , 242 , 255 ) ;
--in-content-danger-button-background : # ff848b ;
--in-content-danger-button-background-hover : # ffbdc5 ;
--in-content-danger-button-background-active : # ffdfe7 ;
--in-content-table-background : rgb ( 35 , 34 , 43 ) ;
--in-content-table-border-dark-color : var ( --in-content-box-border-color ) ;
--in-content-accent-color : var ( --in-content-primary-button-background ) ;
--in-content-accent-color-active : var ( --in-content-primary-button-background-hover ) ;
--in-content-link-color : var ( --in-content-primary-button-background ) ;
--in-content-link-color-hover : var ( --in-content-primary-button-background-hover ) ;
--in-content-link-color-active : var ( --in-content-primary-button-background-active ) ;
--in-content-link-color-visited : var ( --in-content-link-color ) ;
--card-outline-color : var ( --grey-60 ) ;
--dialog-warning-text-color : var ( --red-40 ) ;
}
}
@ supports -moz-bool-pref ( "userChrome.theme.proton_color.dark_blue_accent" ) {
@ media ( -moz-toolbar-prefers-color-scheme : dark ) , ( prefers-color-scheme : dark ) {
: host ,
: root {
/ * Color Memo
Just refer - Photon ' s dark color
--button-primary-bgcolor : # 0060DF ;
--button-primary-hover-bgcolor : # 003EAA ;
--button-primary-active-bgcolor : # 002275 ;
--lwt-brighttext-url-color : # 74c0ff ;
--lwt-toolbarbutton-icon-fill-attention : # 45a1ff ;
Just refer - Proton ' s light color
--in-content-accent-color : # 0a84ff ;
--in-content-accent-color-active : # 0060df ;
--in-content-primary-button-background : # 0061e0 ;
--in-content-primary-button-background-hover : # 0250bb ;
--in-content-primary-button-background-active : # 053e94 ;
--blue-40 : # 45a1ff ; rgb ( 69 , 161 , 255 )
--blue-50 : # 0a84ff ; rgb ( 10 , 132 , 255 )
--blue-60 : # 0060df ; rgb ( 0 , 96 , 223 )
--blue-70 : # 003eaa ; rgb ( 0 , 62 , 170 )
--blue-80 : # 002275 ; rgb ( 0 , 34 , 117 )
Relation
lighten ( # 0060df , 29 % ) : # 74b0ff ;
lighten ( # 0060df , 19 . 8 % ) : # 4595ff
lighten ( # 0060df , 8 . 3 % ) : # 0a74ff
# 0060df
darken ( # 0060df , 15 . 5 % ) : # 003e90 ;
darken ( # 0060df , 28 . 1 % ) : # 002250 ;
* /
2022-12-04 09:37:08 +01:00
--blue-20 : # b6d6ff ; /* lighten(#0060df, 42%) - rgb(182, 214, 255), Add for link active color*/
--blue-30 : # 74c0ff ; /* rgb(116, 192, 255), Add for active color */
2022-05-11 21:19:02 +02:00
}
: host ,
: root ,
dialog {
--in-content-primary-button-text-color : var ( --in-content-page-color ) ! important ;
--in-content-primary-button-background : var ( --blue-60 ) ! important ;
--in-content-primary-button-background-hover : var ( --blue-50 ) ! important ;
--in-content-primary-button-background-active : var ( --blue-40 ) ! important ;
--in-content-focus-outline-color : var ( --blue-40 ) ! important ;
--in-content-accent-color : var ( --blue-40 ) ! important ;
--in-content-accent-color-active : var ( --blue-30 ) ! important ;
--in-content-table-background : rgb ( 35 , 34 , 43 ) ! important ;
--in-content-table-border-color : rgba ( 249 , 249 , 250 , 0 . 2 ) ! important ;
--in-content-table-header-background : rgb ( 5 , 64 , 150 ) ! important ;
--in-content-table-header-color : var ( --in-content-page-color ) ! important ;
--in-content-link-color : var ( --blue-40 ) ! important ;
--in-content-link-color-hover : var ( --blue-30 ) ! important ;
--in-content-link-color-active : var ( --blue-20 ) ! important ;
--in-content-link-color-visited : var ( --blue-40 ) ! important ;
}
: root [ lwtheme-mozlightdark ] [ lwthemetextcolor = "bright" ] ,
: root [ style * = "--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);" ] {
--button-primary-color : var ( --in-content-page-color ) ! important ;
--button-primary-bgcolor : var ( --blue-60 ) ! important ;
--button-primary-hover-bgcolor : var ( --blue-50 ) ! important ;
--button-primary-active-bgcolor : var ( --blue-40 ) ! important ;
--focus-outline-color : var ( --blue-40 ) ! important ;
--lwt-toolbarbutton-icon-fill-attention : var ( --blue-40 ) ! important ;
--download-progress-fill-color : var ( --blue-40 ) ! important ;
--panel-banner-item-info-icon-bgcolor : var ( --blue-30 ) ! important ;
2022-12-04 09:37:08 +01:00
--lwt-brighttext-url-color : var ( --blue-30 ) ! important ; /* Original: as primary bgcolor */
2022-05-11 21:19:02 +02:00
}
@ supports -moz-bool-pref ( "userChrome.decoration.download_panel" ) {
: root [ lwtheme-mozlightdark ] [ lwthemetextcolor = "bright" ] # downloadsListBox ,
: root [ style * = "--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);" ] # downloadsListBox {
--button-primary-bgcolor : var ( --blue-30 ) ;
--button-primary-hover-bgcolor : var ( --blue-20 ) ;
}
}
}
}
}
@ supports -moz-bool-pref ( "userChrome.theme.fully_color" ) {
/*== Menu Color ==============================================================*/
html # main-window menupopup : not ( . in-menulist ) {
/* is same as toolbar color https://github.com/mozilla/gecko-dev/blob/master/toolkit/themes/windows/global/global.css#L17-L67 */
--menu-color : var ( --arrowpanel-color , var ( --in-content-page-color ) ) ! important ;
--menu-background-color : var ( --arrowpanel-background , var ( --in-content-button-background ) ) ! important ;
--menu-border-color : var (
--toolbarbutton-active-background ,
var ( --button-active-bgcolor , var ( --card-outline-color ) )
) ! important ;
--menuitem-hover-background-color : var (
--toolbarbutton-hover-background ,
var ( --button-hover-bgcolor , var ( --in-content-button-background-hover ) )
) ! important ;
--menu-disabled-color : color-mix ( in srgb , var ( --menu-color ) 40 % , transparent ) ! important ;
--menuitem-disabled-hover-background-color : color-mix (
in srgb ,
var ( --menuitem-hover-background-color ) 40 % ,
transparent
) ! important ;
}
2022-09-21 21:21:27 +02:00
@ media ( -moz-windows-non-native-menus ) {
html # main-window menupopup : not ( . in-menulist ) {
/* Above FF v105 #466 */
--panel-color : var ( --menu-color ) ! important ;
--panel-background : var ( --menu-background-color ) ! important ;
--panel-border-color : var ( --menu-border-color ) ! important ;
}
html # main-window menupopup : not ( . in-menulist ) menuseparator {
border-top : 1px solid var ( --menu-border-color ) ;
}
2022-10-17 19:50:35 +02:00
html # main-window menupopup : not ( . in-menulist ) menu [ disabled = "true" ] ,
html # main-window menupopup : not ( . in-menulist ) menu [ _moz-menuactive = "true" ] [ disabled = "true" ] ,
html # main-window menupopup : not ( . in-menulist ) menuitem [ disabled = "true" ] ,
html # main-window menupopup : not ( . in-menulist ) menuitem [ _moz-menuactive = "true" ] [ disabled = "true" ] {
2022-09-21 21:21:27 +02:00
color : var ( --menu-disabled-color ) ! important ;
}
2022-10-17 19:50:35 +02:00
html # main-window menupopup : not ( . in-menulist ) menu [ _moz-menuactive = "true" ] : not ( [ disabled = "true" ] ) ,
html # main-window menupopup : not ( . in-menulist ) menuitem [ _moz-menuactive = "true" ] : not ( [ disabled = "true" ] ) {
2022-09-21 21:21:27 +02:00
background-color : var ( --menuitem-hover-background-color ) ! important ;
color : var ( --menu-color ) ! important ;
}
html # main-window
menupopup
# context-navigation
> . menuitem-iconic [ _moz-menuactive = "true" ]
> . menu-iconic-left
> . menu-iconic-icon {
background-color : var ( --menuitem-hover-background-color ) ! important ;
}
html # main-window menupopup # context-navigation > . menuitem-iconic [ _moz-menuactive = "true" ] ,
html # main-window
menupopup
# context-navigation
> . menuitem-iconic [ _moz-menuactive = "true" ] [ disabled = "true" ]
> . menu-iconic-left
> . menu-iconic-icon {
background-color : transparent ! important ;
}
}
2022-10-17 19:50:35 +02:00
@ media ( -moz-windows-non-native-menus ) and ( -moz-toolbar-prefers-color-scheme : light ) ,
( -moz-windows-non-native-menus ) and ( prefers-color-scheme : light ) {
: root [ style * = "background-noodles-right" ] menupopup {
--toolbarbutton-hover-background : rgba ( 232 , 224 , 255 , 0 . 11999999731779099 ) ! important ;
}
}
2022-05-11 21:19:02 +02:00
@ media not all and ( -moz-gtk-csd-available ) {
window : is ( # bookmarksPanel , # history-panel ) [ lwt-sidebar = "true" ] menupopup {
--panel-color : var ( --lwt-sidebar-text-color , var ( --menu-color ) ) ! important ;
--panel-background : var ( --lwt-sidebar-background-color , var ( --menu-background-color ) ) ! important ;
}
window : is ( # bookmarksPanel , # history-panel ) [ lwt-sidebar = "true" ] menu [ _moz-menuactive = "true" ] : not ( [ disabled = "true" ] ) ,
window : is ( # bookmarksPanel , # history-panel ) [ lwt-sidebar = "true" ]
menuitem [ _moz-menuactive = "true" ] : not ( [ disabled = "true" ] ) {
2022-12-04 09:37:08 +01:00
--menuitem-hover-background-color : color-mix (
in srgb ,
currentColor 17 % ,
transparent
) ; /* Looks like toolbar button */
2022-05-11 21:19:02 +02:00
/ * or var ( --lwt-sidebar-highlight-background-color )
If this value is used , unset is required in the default theme .
* /
2022-12-04 09:37:08 +01:00
background-color : var ( --menuitem-hover-background-color ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
/ * Fallback background - Set to Legacy . It will be removed Next update
2022-05-11 21:19:02 +02:00
menupopup : not ( . cui-widget-panel . cui-widget-panelview , [ placespopup = "true" ] ) {
background-color : var ( --lwt-accent-color , var ( --in-content-page-background ) ) ! important ;
}
2022-06-29 20:07:26 +02:00
* /
2022-05-11 21:19:02 +02:00
}
/* Default theme color preservation */
: root [ lwtheme-mozlightdark ] menupopup : not ( # BMB_bookmarksPopup , [ placespopup = "true" ] ) ,
: root [ lwtheme-mozlightdark ] menupopup : is ( # goPopup , # historyMenuPopup , # bookmarksMenuPopup ) ,
: root : is ( [ style * = "--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);" ] , [ style * = "--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);" ] )
menupopup : not ( # BMB_bookmarksPopup , [ placespopup = "true" ] ) ,
: root : is ( [ style * = "--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);" ] , [ style * = "--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);" ] )
menupopup : is ( # goPopup , # historyMenuPopup , # bookmarksMenuPopup ) {
--menu-color : var ( --toolbar-color , var ( --in-content-page-color ) ) ! important ;
2022-12-04 09:37:08 +01:00
--arrowpanel-background : var (
--toolbar-bgcolor ,
var ( --in-content-button-background )
) ! important ; /* --menu-background-color */
2022-05-11 21:19:02 +02:00
}
@ media not all and ( -moz-gtk-csd-available ) {
window : is ( # bookmarksPanel , # history-panel ) [ style * = "--newtab-background-color: rgba(249, 249, 251, 1);" ] menupopup ,
window : is ( # bookmarksPanel , # history-panel ) [ style * = "--newtab-background-color: rgba(43, 42, 51, 1);" ] menupopup {
/* Default Dark Mode */
--panel-color : var ( --menu-color ) ! important ;
2022-10-17 19:50:35 +02:00
--panel-background : var ( --menu-background-color , -moz-menuhover ) ! important ;
2022-05-11 21:19:02 +02:00
}
}
2022-06-29 20:07:26 +02:00
/*== Info Bar Color ==========================================================*/
. container . infobar {
2022-12-04 09:37:08 +01:00
background-color : var ( --urlbar-box-bgcolor ) ! important ;
2022-06-29 20:07:26 +02:00
}
. notification-button {
2022-12-04 09:37:08 +01:00
background-color : var ( --button-bgcolor ) ! important ;
2022-06-29 20:07:26 +02:00
}
. notification-button : hover {
2022-12-04 09:37:08 +01:00
background-color : var ( --button-hover-bgcolor ) ! important ;
2022-06-29 20:07:26 +02:00
}
. notification-button : hover : active {
2022-12-04 09:37:08 +01:00
background-color : var ( --button-active-bgcolor ) ! important ;
2022-06-29 20:07:26 +02:00
}
html | button . ghost-button : not ( . semi-transparent ) : enabled : hover {
background-color : var ( --button-hover-bgcolor ) ! important ;
}
html | button . ghost-button : not ( . semi-transparent ) : enabled : hover : active {
background-color : var ( --in-content-button-background-active ) ! important ;
}
2022-05-11 21:19:02 +02:00
/*== Bookmark Popup Color ====================================================*/
# editBMPanel_folderTree : -moz-lwtheme ,
# editBMPanel_tagsSelector : -moz-lwtheme {
appearance : none ! important ;
border : 0 . 5px solid var ( --button-active-bgcolor , color-mix ( in srgb , currentColor 30 % , transparent ) ) ! important ;
}
# editBMPanel_folderTree : -moz-lwtheme ,
# editBMPanel_folderTree : -moz-lwtheme > treechildren ,
# editBMPanel_folderTree : -moz-lwtheme > treechildren :: -moz-tree-image ,
# editBMPanel_folderTree : -moz-lwtheme > treechildren :: -moz-tree-cell-text ( hover ) ,
# editBMPanel_folderTree : -moz-lwtheme > treechildren :: -moz-tree-cell-text ( selected ) ,
# editBMPanel_tagsSelector : -moz-lwtheme ,
# editBMPanel_tagsSelector : -moz-lwtheme > richlistitem {
color : var ( --lwt-text-color , fieldtext ) ! important ;
}
# editBMPanel_folderTree : -moz-lwtheme > treechildren :: -moz-tree-cell-text ( selected ) {
font-weight : 600 ! important ;
}
# editBMPanel_folderTree : -moz-lwtheme > treechildren ,
# editBMPanel_tagsSelector : -moz-lwtheme {
background-color : color-mix ( in srgb , var ( --arrowpanel-background ) 35 % , var ( --in-content-box-background ) ) ! important ;
}
# editBMPanel_folderTree : -moz-lwtheme > treechildren :: -moz-tree-row ( hover ) ,
# editBMPanel_tagsSelector > richlistitem : hover {
background-color : var ( --button-hover-bgcolor , color-mix ( in srgb , currentColor 17 % , transparent ) ) ! important ;
}
# editBMPanel_folderTree : -moz-lwtheme > treechildren :: -moz-tree-row ( selected ) ,
# editBMPanel_tagsSelector > richlistitem [ selected = "true" ] {
background-color : var ( --button-active-bgcolor , color-mix ( in srgb , currentColor 30 % , transparent ) ) ! important ;
}
# editBMPanel_namePicker ,
# editBMPanel_tagsField {
--input-bgcolor : var ( --arrowpanel-background , Field ) ;
--input-color : var ( --arrowpanel-color , FieldText ) ;
}
/*== Sidebar - Field Color ===================================================*/
. sidebar-panel # search-box ,
xul | search-textbox . tabsFilter {
--input-bgcolor : color-mix ( in srgb , currentColor 30 % , transparent ) ;
appearance : none ! important ;
padding : 5px 8px ! important ;
border : 1px solid var ( --input-bgcolor ) ! important ;
border-radius : 4px ;
background-color : var ( --lwt-sidebar-background-color , Field ) ! important ;
color : var ( --lwt-sidebar-text-color , FieldText ) ! important ;
}
. sidebar-panel : not ( [ lwt-sidebar ] ) # search-box {
--input-bgcolor : ThreeDShadow ;
}
. sidebar-panel # search-box [ focused = "true" ] ,
xul | search-textbox . tabsFilter [ focused = "true" ] {
outline : 1px solid var ( --input-bgcolor ) ;
}
. sidebar-panel [ lwt-sidebar ] # search-box [ focused = "true" ] ,
body [ lwt-sidebar ] xul | search-textbox . tabsFilter [ focused = "true" ] {
--input-bgcolor : var ( --lwt-sidebar-highlight-background-color , Highlight ) ! important ;
}
. sidebar-panel : not ( [ lwt-sidebar ] ) # search-box [ focused = "true" ] ,
body : not ( [ lwt-sidebar ] ) xul | search-textbox . tabsFilter [ focused = "true" ] {
2022-12-04 09:37:08 +01:00
border-color : AccentColor ! important ; /* Hard Coded */
2022-07-27 15:53:22 +02:00
outline-color : AccentColor ! important ;
}
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
. sidebar-panel : not ( [ lwt-sidebar ] ) # search-box [ focused = "true" ] ,
body : not ( [ lwt-sidebar ] ) xul | search-textbox . tabsFilter [ focused = "true" ] {
2022-12-04 09:37:08 +01:00
border-color : -moz-accent-color ! important ; /* Hard Coded */
2022-07-27 15:53:22 +02:00
outline-color : -moz-accent-color ! important ;
}
2022-05-11 21:19:02 +02:00
}
/*= PopupAutoComplete ========================================================*/
# PopupAutoComplete {
--panel-bgcolor : var ( --arrowpanel-background , var ( --in-content-button-background ) ) ;
/* overwrite */
2022-12-04 09:37:08 +01:00
--panel-border-radius : 4px ! important ; /* Original: 0 */
--panel-border-color : var (
--arrowpanel-border-color ,
var ( --menu-border-color )
) ! important ; /* Original: ThreeDShadow */
2022-05-11 21:19:02 +02:00
appearance : none ! important ;
background : transparent ! important ;
border : none ! important ;
clip-path : inset ( 0 round var ( --panel-border-radius ) ) ;
}
# PopupAutoComplete > richlistbox {
border-radius : var ( --panel-border-radius ) ! important ;
2022-12-04 09:37:08 +01:00
background-color : var ( --panel-bgcolor ) ! important ; /* Original: Field */
color : var ( --arrowpanel-color , var ( --in-content-page-color ) ) ! important ; /* Original: FiledText */
2022-05-11 21:19:02 +02:00
}
. autocomplete-richlistitem : hover {
background-color : var ( --arrowpanel-dimmed ) ! important ;
}
# PopupAutoComplete > richlistbox > richlistitem [ originaltype = "generatedPassword" ] > . two-line-wrapper > . ac-site-icon ,
# PopupAutoComplete > richlistbox > richlistitem [ originaltype = "loginWithOrigin" ] > . two-line-wrapper > . ac-site-icon ,
# PopupAutoComplete > richlistbox > richlistitem [ originaltype = "login" ] > . ac-site-icon {
fill : GrayText ! important ;
}
# PopupAutoComplete > richlistbox > richlistitem [ originaltype = "loginsFooter" ] {
--panel-border-color : var ( --panel-bgcolor ) ;
2022-12-04 09:37:08 +01:00
color : var ( --arrowpanel-color , var ( --in-content-page-color ) ) ! important ; /* Original: FieldText */
background-color : var ( --arrowpanel-dimmed , hsla ( 0deg , 0 % , 80 % , 0 . 35 ) ) ! important ; /* Original: hsla(0,0%,80%,.35) */
border-color : var ( --panel-border-color ) ! important ; /* Original: rgba(38,38,38,.15) */
2022-05-11 21:19:02 +02:00
}
# PopupAutoComplete > richlistbox > richlistitem [ originaltype = "loginsFooter" ] : hover ,
# PopupAutoComplete > richlistbox > richlistitem [ originaltype = "loginsFooter" ] [ selected ] {
2022-12-04 09:37:08 +01:00
background-color : var (
--arrowpanel-dimmed-further ,
hsla ( 0deg , 0 % , 80 % , 0 . 5 )
) ! important ; /* Original: hsla(0,0%,80%,.5), match arrowpanel-dimmed-further */
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
/* New Folder Button */
# editBMPanel_newFolderButton {
appearance : none ;
border : 0 ;
border-radius : 4px ;
background-color : var ( --button-bgcolor ) ;
color : var ( --button-color , inherit ) ;
font-weight : 600 ;
min-width : 0 ;
padding : 8px 16px ;
/ * This button is deeper in the visual hierarchy than others ( notably the
buttons at the bottom of the panel ) , so it should be slightly smaller . * /
font-size : 90 % ;
/* This button needs to align with the tree above it. */
margin-inline-start : 4px ;
}
# editBMPanel_newFolderButton : hover {
background-color : var ( --button-hover-bgcolor ) ;
}
# editBMPanel_newFolderButton : hover : active {
background-color : var ( --button-active-bgcolor ) ;
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
/*= Fully Dark Mode ==========================================================*/
2022-05-11 21:19:02 +02:00
@ supports -moz-bool-pref ( "userChrome.theme.fully_dark" ) {
/*= Remove White Flash =======================================================*/
# tabbrowser-tabbox ,
# tabbrowser-tabpanels ,
browser [ type = "content-primary" ] ,
browser [ type = "content" ] > html {
background : var ( --in-content-page-background ) ! important ;
}
/*= Notification =============================================================*/
@ -moz-document url ( "chrome://global/content/alerts/alert.xhtml" )
{
/* Color */
: root {
--menu-color : # 15141a ;
--menu-background-color : # f9f9fb ;
--menu-border-color : # cfcfd8 ;
--menuitem-hover-background-color : # e0e0e6 ;
}
@ media ( -moz-toolbar-prefers-color-scheme : dark ) , ( prefers-color-scheme : dark ) {
: root {
--menu-border-color : rgba ( 107 , 107 , 107 , 0 . 3 ) ;
--menu-color : # fbfbfe ;
--menu-background-color : # 2b2a33 ;
--menuitem-hover-background-color : # 52525e ;
}
# alertSourceLabel {
2022-12-04 09:37:08 +01:00
color : rgb ( 5 , 209 , 241 ) ! important ;
2022-05-11 21:19:02 +02:00
}
}
/* line below removes background from the notification "window" on linux */
# alertNotification {
background : transparent ! important ;
}
# alertBox {
color : var ( --menu-color ) ! important ;
background-color : var ( --menu-background-color ) ! important ;
border-color : var ( --menu-border-color ) ! important ;
border-radius : 6px ! important ;
-moz-window-shadow : cliprounded ! important ;
}
# alertSettings {
fill : currentColor ! important ;
color : inherit ! important ;
border-radius : 0 ! important ;
margin-inline : 0 ! important ;
margin-bottom : -4px ! important ;
}
. close-icon ,
# alertSettings {
background : transparent ! important ;
}
. close-icon : hover > . toolbarbutton-icon ,
# alertSettings : is ( : hover , [ open ] ) > . button-box > . box-inherit {
background-color : var ( --menuitem-hover-background-color , # e0e0e6 ) ! important ;
}
/* Shape */
. close-icon > . toolbarbutton-icon ,
# alertSettings > . button-box > . box-inherit {
border-radius : 4px ! important ;
padding : 2px ! important ;
margin : 2px 2px -2px 0 ! important ;
}
# alertSettings > . button-box > . box-inherit {
margin : -4px 4px 3px 0 ! important ;
}
# alertSettings > . button-box > . box-inherit > . button-icon {
padding : 1px ;
}
}
}
2022-08-29 19:20:12 +02:00
/*= Proton Theme Mode ========================================================*/
2022-05-11 21:19:02 +02:00
@ supports -moz-bool-pref ( "userChrome.theme.proton_chrome" ) {
/*= Proton Commons ===========================================================*/
@ -moz-document url ( "chrome://global/content/commonDialog.xhtml" ) ,
url ( "chrome://pippki/content/editcacert.xhtml" ) ,
url ( "chrome://pippki/content/deletecert.xhtml" ) ,
url ( "chrome://pippki/content/exceptionDialog.xhtml" ) ,
url ( "chrome://mozapps/content/downloads/unknownContentType.xhtml" ) ,
url ( "chrome://global/content/appPicker.xhtml" ) ,
url ( "chrome://browser/content/pageinfo/pageInfo.xhtml" )
{
/*- Overwrite --------------------------------------------------------------*/
@ media ( -moz-toolbar-prefers-color-scheme : dark ) , ( prefers-color-scheme : dark ) {
: root {
--in-content-page-background : # 42414d ;
}
}
: root : not ( : -moz-lwtheme ) ,
: root [ lwt-default-theme-in-dark-mode ] {
--checkbox-unchecked-bgcolor : var ( --in-content-button-background ) ! important ;
--checkbox-unchecked-hover-bgcolor : var ( --in-content-button-background-hover ) ! important ;
--checkbox-unchecked-active-bgcolor : var ( --in-content-button-background-active ) ! important ;
--checkbox-checked-bgcolor : var ( --in-content-primary-button-background ) ! important ;
--checkbox-checked-color : var ( --in-content-primary-button-text-color ) ! important ;
--checkbox-checked-hover-bgcolor : var ( --in-content-primary-button-background-hover ) ! important ;
--checkbox-checked-active-bgcolor : var ( --in-content-primary-button-background-active ) ! important ;
}
/*- Dialog -----------------------------------------------------------------*/
# commonDialog ,
# editCaCert ,
# deleteCertificate ,
# exceptiondialog ,
# unknownContentType ,
# app-picker ,
# topBar ,
# mainDeck {
2022-12-04 09:37:08 +01:00
-moz-appearance : none ! important ; /* For Mac */
2022-05-11 21:19:02 +02:00
color : var ( --in-content-page-color ) ! important ;
background-color : var ( --in-content-page-background ) ! important ;
/* border-radius: 0 0 8px 8px !important; */
}
/*- Button -----------------------------------------------------------------*/
button {
-moz-appearance : none ! important ;
color : var ( --in-content-button-text-color ) ! important ;
background-color : var ( --in-content-button-background ) ! important ;
font : inherit ;
font-size : 1em ! important ;
font-weight : 600 ! important ;
min-height : 32px ! important ;
2022-12-04 09:37:08 +01:00
border : 1px solid transparent ! important ; /* shows up in high-contrast mode */
2022-05-11 21:19:02 +02:00
border-radius : var ( --in-content-button-border-radius ) ! important ;
padding : var ( --in-content-button-vertical-padding ) var ( --in-content-button-horizontal-padding ) ! important ;
min-height : 32px ! important ;
/* Use the same margin of other elements for the alignment */
margin-inline : 4px ! important ;
min-width : 6 . 3em ! important ;
}
button . medium {
2022-06-29 20:07:26 +02:00
/ * Medium and small buttons get sized to 7 / 14 and 6 / 12px padding ( when adding
* the 1px border ) : * /
2022-05-11 21:19:02 +02:00
padding : 6px 13px ! important ;
min-height : 28px ! important ;
font-size : 0 . 95em ! important ;
}
button . small {
padding : 5px 11px ! important ;
min-height : 24px ! important ;
font-size : 0 . 9em ! important ;
}
/* Remove margin added by button.css */
xul | button > . button-box > . button-text {
margin : 0 ! important ;
}
button : not ( [ disabled = "true" ] ) : hover {
background-color : var ( --in-content-button-background-hover ) ! important ;
color : var ( --in-content-button-text-color-hover ) ! important ;
border-color : transparent ! important ;
}
xul | button : not ( [ disabled = "true" ] ) : hover : active ,
xul | button [ open ] ,
xul | button [ open ] : hover ,
xul | menulist [ open = "true" ] : not ( [ disabled = "true" ] ) {
background-color : var ( --in-content-button-background-active ) ! important ;
}
xul | button [ default ] {
background-color : var ( --in-content-primary-button-background ) ! important ;
color : var ( --in-content-primary-button-text-color ) ! important ;
}
xul | button [ default ] : not ( [ disabled = "true" ] ) : hover {
background-color : var ( --in-content-primary-button-background-hover ) ! important ;
color : var ( --in-content-primary-button-text-color ) ! important ;
}
xul | button [ default ] : not ( [ disabled = "true" ] ) : hover : active {
background-color : var ( --in-content-primary-button-background-active ) ! important ;
}
xul | button [ disabled = "true" ] ,
xul | menulist [ disabled = "true" ] {
opacity : 0 . 4 ! important ;
}
xul | button : not ( [ disabled = "true" ] ) : hover ,
xul | menulist : not ( [ disabled = "true" ] ) : hover {
background-color : var ( --in-content-button-background-hover ) ! important ;
color : var ( --in-content-button-text-color-hover ) ! important ;
border-color : transparent ! important ;
}
@ media ( prefers-contrast ) {
xul | button [ default ] : not ( [ disabled = "true" ] ) : hover {
border-color : currentColor ! important ;
}
button : focus {
color : var ( --in-content-button-text-color ) ! important ;
}
xul | button [ default ] : focus ,
button . primary : focus {
color : var ( --in-content-primary-button-text-color ) ! important ;
}
}
2022-06-29 20:07:26 +02:00
button : -moz-focusring ,
xul | menulist : -moz-focusring ,
xul | checkbox : -moz-focusring > . checkbox-check ,
xul | radio [ focused = "true" ] : -moz-focusring {
box-shadow : none ! important ;
outline : 2px solid var ( --in-content-focus-outline-color ) ! important ;
outline-offset : 2px ! important ;
}
2022-05-11 21:19:02 +02:00
/*- Radio Button -----------------------------------------------------------*/
xul | radio {
/* margin-inline-start: 0 !important; */
appearance : none ! important ;
}
xul | * . radio-check {
appearance : none ! important ;
width : 16px ! important ;
height : 16px ! important ;
border : 1px solid var ( --in-content-box-border-color ) ! important ;
border-radius : 100 % ! important ;
2022-06-29 20:07:26 +02:00
padding : 0 ! important ;
margin-inline : 0 6px ! important ;
2022-12-04 09:37:08 +01:00
margin-block : 2px ! important ; /* extend the vertical clicktarget */
2022-05-11 21:19:02 +02:00
background-color : var ( --in-content-button-background ) ! important ;
background-position : center ! important ;
2022-12-04 09:37:08 +01:00
flex-shrink : 0 ! important ; /* avoid shrinking inside flex container */
2022-05-11 21:19:02 +02:00
}
xul | * . radio-check [ selected ] {
-moz-context-properties : fill ! important ;
fill : currentColor ! important ;
color : var ( --in-content-primary-button-text-color ) ! important ;
background-color : var ( --in-content-primary-button-background ) ! important ;
background-image : url ( "chrome://global/skin/icons/radio.svg" ) ! important ;
border-color : transparent ! important ;
/* Style the button also when printing with "Print Backgrounds" unchecked */
color-adjust : exact ! important ;
}
2022-06-29 20:07:26 +02:00
xul | radio : not ( [ disabled = "true" ] ) : hover > xul | * . radio-check {
background-color : var ( --in-content-button-background-hover ) ! important ;
color : var ( --in-content-button-text-color-hover ) ! important ;
}
xul | radio : not ( [ disabled = "true" ] ) : hover : active > xul | * . radio-check {
background-color : var ( --in-content-button-background-active ) ! important ;
}
2022-05-11 21:19:02 +02:00
xul | radio : not ( [ disabled = "true" ] ) [ selected ] : hover > xul | * . radio-check {
background-color : var ( --in-content-primary-button-background-hover ) ! important ;
color : var ( --in-content-primary-button-text-color-hover ) ! important ;
}
xul | radio : not ( [ disabled = "true" ] ) [ selected ] : hover : active > xul | * . radio-check {
background-color : var ( --in-content-primary-button-background-active ) ! important ;
}
xul | * . radio-label-box {
margin-inline : 0 8px ! important ;
padding-inline-start : 0 ! important ;
}
/* Disabled checkboxes, radios and labels */
xul | checkbox [ disabled = "true" ] ,
xul | radio [ disabled = "true" ] ,
xul | label [ disabled = "true" ] {
color : inherit ! important ;
opacity : 0 . 5 ! important ;
}
/*- Check Box --------------------------------------------------------------*/
/* From checkbox.css */
checkbox {
appearance : none ! important ;
-moz-box-align : center ! important ;
margin : 4px 2px ! important ;
}
. checkbox-check {
appearance : none ! important ;
2022-06-29 20:07:26 +02:00
width : 16px ! important ;
height : 16px ! important ;
2022-05-11 21:19:02 +02:00
border : 1px solid currentColor ! important ;
border-radius : 2px ! important ;
2022-06-29 20:07:26 +02:00
color : var ( --checkbox-border-color , ThreeDDarkShadow ) ! important ;
background-color : var ( --checkbox-unchecked-bgcolor , Field ) ! important ;
2022-12-04 09:37:08 +01:00
margin-inline-end : 6px ! important ; /* or 2px */
margin-block : 2px ! important ; /* From common.css */
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
. checkbox-check [ checked ] {
-moz-context-properties : fill ! important ;
fill : currentColor ! important ;
border-color : var ( --checkbox-checked-border-color , transparent ) ! important ;
background-image : url ( "chrome://global/skin/icons/check.svg" ) ! important ;
background-position : center ! important ;
background-repeat : no-repeat ! important ;
/* Style the button also when printing with "Print Backgrounds" unchecked */
color-adjust : exact ! important ;
2022-07-27 15:53:22 +02:00
color : var ( --checkbox-checked-color , AccentColorText ) ! important ;
background-color : var ( --checkbox-checked-bgcolor , AccentColor ) ! important ;
}
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
. checkbox-check [ checked ] {
color : var ( --checkbox-checked-color , -moz-accent-color-foreground ) ! important ;
background-color : var ( --checkbox-checked-bgcolor , -moz-accent-color ) ! important ;
}
2022-05-11 21:19:02 +02:00
}
checkbox : not ( [ disabled = "true" ] ) : hover > . checkbox-check {
2022-07-27 15:53:22 +02:00
background-color : var ( --checkbox-unchecked-hover-bgcolor , color-mix ( in srgb , AccentColor 4 % , Field ) ) ! important ;
}
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
checkbox : not ( [ disabled = "true" ] ) : hover > . checkbox-check {
background-color : var (
--checkbox-unchecked-hover-bgcolor ,
color-mix ( in srgb , -moz-accent-color 4 % , Field )
) ! important ;
}
2022-05-11 21:19:02 +02:00
}
checkbox : not ( [ disabled = "true" ] ) : hover : active > . checkbox-check {
2022-07-27 15:53:22 +02:00
background-color : var ( --checkbox-unchecked-active-bgcolor , color-mix ( in srgb , AccentColor 8 % , Field ) ) ! important ;
}
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
checkbox : not ( [ disabled = "true" ] ) : hover : active > . checkbox-check {
background-color : var (
--checkbox-unchecked-active-bgcolor ,
color-mix ( in srgb , -moz-accent-color 8 % , Field )
) ! important ;
}
2022-05-11 21:19:02 +02:00
}
checkbox : not ( [ disabled = "true" ] ) : hover > . checkbox-check [ checked ] {
background-color : var (
--checkbox-checked-hover-bgcolor ,
2022-07-27 15:53:22 +02:00
color-mix ( in srgb , currentColor 12 . 5 % , AccentColor )
2022-05-11 21:19:02 +02:00
) ! important ;
}
2022-07-27 15:53:22 +02:00
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
checkbox : not ( [ disabled = "true" ] ) : hover > . checkbox-check [ checked ] {
background-color : var (
--checkbox-checked-hover-bgcolor ,
color-mix ( in srgb , currentColor 12 . 5 % , -moz-accent-color )
) ! important ;
}
}
2022-05-11 21:19:02 +02:00
checkbox : not ( [ disabled = "true" ] ) : hover : active > . checkbox-check [ checked ] {
background-color : var (
--checkbox-checked-active-bgcolor ,
2022-07-27 15:53:22 +02:00
color-mix ( in srgb , currentColor 25 % , AccentColor )
2022-05-11 21:19:02 +02:00
) ! important ;
}
2022-07-27 15:53:22 +02:00
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
checkbox : not ( [ disabled = "true" ] ) : hover : active > . checkbox-check [ checked ] {
background-color : var (
--checkbox-checked-active-bgcolor ,
color-mix ( in srgb , currentColor 25 % , -moz-accent-color )
) ! important ;
}
}
2022-05-11 21:19:02 +02:00
checkbox : -moz-focusring > . checkbox-check {
2022-07-27 15:53:22 +02:00
outline : 2px solid var ( --focus-outline-color , AccentColor ) ! important ;
2022-05-11 21:19:02 +02:00
outline-offset : var ( --focus-outline-offset , 2px ) ! important ;
}
2022-07-27 15:53:22 +02:00
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
checkbox : -moz-focusring > . checkbox-check {
outline : 2px solid var ( --focus-outline-color , -moz-accent-color ) ! important ;
}
}
2022-05-11 21:19:02 +02:00
@ media ( prefers-contrast ) {
checkbox : not ( [ disabled = "true" ] ) : hover > . checkbox-check {
/* color will set the border-color on the check due to how HCM works for in-content pages. */
2022-07-27 15:53:22 +02:00
color : var ( --checkbox-checked-border-color , color-mix ( in srgb , AccentColor 4 % , Field ) ) ! important ;
}
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
checkbox : not ( [ disabled = "true" ] ) : hover > . checkbox-check {
/* color will set the border-color on the check due to how HCM works for in-content pages. */
color : var ( --checkbox-checked-border-color , color-mix ( in srgb , -moz-accent-color 4 % , Field ) ) ! important ;
}
2022-05-11 21:19:02 +02:00
}
. checkbox-check [ checked ] {
color : var ( --checkbox-checked-border-color , currentColor ) ! important ;
2022-07-27 15:53:22 +02:00
fill : var ( --checkbox-checked-color , AccentColorText ) ! important ;
}
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
. checkbox-check [ checked ] {
fill : var ( --checkbox-checked-color , -moz-accent-color-foreground ) ! important ;
}
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
checkbox : not ( [ disabled = "true" ] ) : hover : active > . checkbox-check [ checked ] > . checkbox-check [ checked ] ,
checkbox : not ( [ disabled = "true" ] ) : hover > . checkbox-check [ checked ] > . checkbox-check [ checked ] {
2022-07-27 15:53:22 +02:00
color : var ( --checkbox-checked-border-color-hover , AccentColorText ) ! important ;
fill : var ( --checkbox-checked-border-color-hover , AccentColorText ) ! important ;
}
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
checkbox : not ( [ disabled = "true" ] ) : hover : active > . checkbox-check [ checked ] > . checkbox-check [ checked ] ,
checkbox : not ( [ disabled = "true" ] ) : hover > . checkbox-check [ checked ] > . checkbox-check [ checked ] {
color : var ( --checkbox-checked-border-color-hover , -moz-accent-color-foreground ) ! important ;
fill : var ( --checkbox-checked-border-color-hover , -moz-accent-color-foreground ) ! important ;
}
2022-05-11 21:19:02 +02:00
}
}
2022-06-29 20:07:26 +02:00
. checkbox-icon [ src ] {
margin-inline-end : 2px ! important ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
. checkbox-label {
margin : 1px 0 ! important ;
}
checkbox [ disabled = "true" ] {
opacity : 0 . 4 ! important ;
}
/* From common.css */
2022-05-11 21:19:02 +02:00
xul | richlistitem > xul | * . checkbox-check {
margin : 3px 6px ! important ;
}
/*- Menulist ---------------------------------------------------------------*/
/* From mulist.css */
xul | menulist {
appearance : none ! important ;
background-color : var ( --in-content-button-background , ButtonFace ) ! important ;
color : var ( --in-content-button-text-color , ButtonText ) ! important ;
border-radius : 4px ! important ;
padding-block : 4px ! important ;
padding-inline : 12px 8px ! important ;
margin : 5px 2px 3px ! important ;
}
xul | menulist [ size = "medium" ] {
padding-block : 6px ! important ;
padding-inline : 16px 10px ! important ;
}
xul | menulist [ size = "large" ] {
padding-block : 8px ! important ;
padding-inline : 16px 12px ! important ;
}
xul | menulist : hover {
background-color : var ( --button-hover-bgcolor , color-mix ( in srgb , currentColor 10 % , ButtonFace ) ) ! important ;
}
xul | menulist : hover : active {
background-color : var ( --button-active-bgcolor , color-mix ( in srgb , currentColor 20 % , ButtonFace ) ) ! important ;
}
xul | menulist : -moz-focusring {
2022-07-27 15:53:22 +02:00
outline : 2px solid var ( --focus-outline-color , AccentColor ) ! important ;
2022-05-11 21:19:02 +02:00
outline-offset : var ( --focus-outline-offset , 2px ) ! important ;
}
2022-07-27 15:53:22 +02:00
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
xul | menulist : -moz-focusring {
outline : 2px solid var ( --focus-outline-color , -moz-accent-color ) ! important ;
}
}
2022-05-11 21:19:02 +02:00
# label-box {
-moz-box-align : center ! important ;
-moz-box-pack : center ! important ;
font-weight : 600 ! important ;
}
dropmarker {
display : -moz-box ! important ;
appearance : none ! important ;
width : 12px ! important ;
height : 12px ! important ;
}
dropmarker [ exportparts = "icon: dropmarker-icon" ] {
2022-06-29 20:07:26 +02:00
/ * dropmarker :: part ( icon )
* :: part is not apply chrome
* /
2022-05-11 21:19:02 +02:00
list-style-image : url ( "chrome://global/skin/icons/arrow-down.svg" ) ! important ;
-moz-context-properties : fill ! important ;
fill : currentColor ! important ;
}
# highlightable-label : not ( [ highlightable = "true" ] ) ,
# label [ highlightable = "true" ] {
display : none ! important ;
}
xul | menuitem > label : not ( . menu-text ) {
margin : 0 3px ! important ;
}
/* From common.css */
xul | menulist > xul | menupopup {
appearance : none ! important ;
/* Reset native styles on Windows and macOS */
border : none ! important ;
background-color : transparent ! important ;
--panel-border-color : var ( --in-content-box-border-color ) ! important ;
--panel-border-radius : 2px ! important ;
--panel-background : var ( --in-content-box-background ) ! important ;
--panel-color : var ( --in-content-text-color ) ! important ;
--panel-padding : 0 ! important ;
}
xul | menulist > xul | menupopup xul | menu ,
xul | menulist > xul | menupopup xul | menuitem {
appearance : none ! important ;
font-size : 1em ! important ;
padding-block : 0 . 2em ! important ;
padding-inline : 10px 30px ! important ;
}
xul | menulist > xul | menupopup > xul | menu : not ( [ disabled = "true" ] ) [ _moz-menuactive = "true" ] ,
xul | menulist > xul | menupopup > xul | menuitem : not ( [ disabled = "true" ] ) [ _moz-menuactive = "true" ] {
color : var ( --in-content-item-hover-text ) ! important ;
background-color : var ( --in-content-item-hover ) ! important ;
}
xul | menulist > xul | menupopup > xul | menu : not ( [ disabled = "true" ] ) [ selected = "true" ] ,
xul | menulist > xul | menupopup > xul | menuitem : not ( [ disabled = "true" ] ) [ selected = "true" ] {
color : var ( --in-content-item-selected-text ) ! important ;
background-color : var ( --in-content-item-selected ) ! important ;
}
xul | menulist > xul | menupopup > xul | menu [ disabled = "true" ] ,
xul | menulist > xul | menupopup > xul | menuitem [ disabled = "true" ] {
color : # 999 ! important ;
/ * override the [ _moz-menuactive = "true" ] background color from
global / menu . css * /
background-color : transparent ! important ;
}
xul | menulist > xul | menupopup xul | menuseparator {
appearance : none ! important ;
margin : 0 ! important ;
padding : 0 ! important ;
border-top : 1px solid var ( --in-content-box-border-color ) ! important ;
border-bottom : none ! important ;
}
xul | menulist :: part ( dropmarker ) {
margin-block : 1px ! important ;
}
/* Override menulist.css */
xul | menulist [ disabled = "true" ] {
background-color : var ( --in-content-button-background ) ! important ;
}
xul | menulist : -moz-focusring > xul | * . menulist-label-box {
outline : none ! important ;
}
/*- List Boxes -------------------------------------------------------------*/
html | select [ size ] [ multiple ] ,
xul | listheader ,
xul | richlistbox {
appearance : none ! important ;
margin-inline : 0 ! important ;
background-color : var ( --in-content-box-background ) ! important ;
border : 1px solid var ( --in-content-box-border-color ) ! important ;
border-radius : 4px ! important ;
color : var ( --in-content-text-color ) ! important ;
}
xul | listheader {
border-bottom : none ! important ;
border-bottom-left-radius : 0 ! important ;
border-bottom-right-radius : 0 ! important ;
padding-bottom : 1px ! important ;
box-shadow : inset 0 -1px var ( --in-content-table-border-color ) ! important ;
2022-12-04 09:37:08 +01:00
overflow : clip ! important ; /* Clip border-radius */
2022-05-11 21:19:02 +02:00
}
xul | listheader + xul | richlistbox {
margin-top : 0 ! important ;
border-top : none ! important ;
border-top-left-radius : 0 ! important ;
border-top-right-radius : 0 ! important ;
}
html | select [ size ] [ multiple ] > html | option ,
xul | treechildren :: -moz-tree-row {
padding : 0 . 3em inherit ! important ;
margin : 0 ! important ;
border : none ! important ;
border-radius : 0 ! important ;
background-image : none ! important ;
}
xul | treechildren :: -moz-tree-row ( multicol , odd ) {
background-color : var ( --in-content-box-background-odd ) ;
}
html | select [ size ] [ multiple ] > html | option : hover ,
xul | richlistbox > xul | richlistitem : not ( [ disabled = "true" ] , [ selected ] ) : hover ,
xul | treechildren :: -moz-tree-row ( hover ) {
background-color : var ( --in-content-item-hover ) ! important ;
color : var ( --in-content-item-hover-text ) ! important ;
}
xul | richlistbox > xul | richlistitem [ selected ] ,
xul | treechildren :: -moz-tree-row ( selected ) {
background-color : var ( --in-content-item-selected ) ! important ;
color : var ( --in-content-item-selected-text ) ! important ;
}
xul | richlistbox : not ( # categories ) > xul | richlistitem [ selected ] {
/* Ensure buttons/menulists inside richlistitems (containers, applications) look OK */
--in-content-button-background : color-mix ( in srgb , currentColor 15 % , transparent ) ! important ;
--in-content-button-background-hover : color-mix ( in srgb , currentColor 30 % , transparent ) ! important ;
--in-content-button-background-active : color-mix ( in srgb , currentColor 45 % , transparent ) ! important ;
--in-content-button-text-color : var ( --in-content-item-selected-text ) ! important ;
--in-content-button-text-color-hover : var ( --in-content-item-selected-text ) ! important ;
--in-content-focus-outline-color : var ( --in-content-item-selected-text ) ! important ;
}
xul | richlistitem [ selected ] xul | menulist : focus-visible {
outline-offset : -2px ! important ;
}
/ * Use a 2px border so that selected row highlight is still visible behind
an existing high-contrast border that uses the background color * /
@ media ( prefers-contrast ) {
xul | treechildren :: -moz-tree-row ( selected ) {
border : 2px solid currentColor ! important ;
border-radius : 4px ! important ;
}
}
xul | panel [ type = "autocomplete-richlistbox" ] {
background-color : var ( --in-content-box-background ) ! important ;
border : 1px solid var ( --in-content-box-border-color ) ! important ;
color : var ( --in-content-text-color ) ! important ;
}
/*- Each OS ----------------------------------------------------------------*/
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) ,
( -moz-os-version : windows-win10 ) ,
( -moz-platform : windows-win10 ) {
xul | checkbox ,
xul | radio {
padding-inline-start : 0 ! important ;
}
/* Override menulist.css */
xul | menulist [ disabled = "true" ] {
background-color : var ( --in-content-button-background ) ! important ;
}
xul | menulist : -moz-focusring > xul | * . menulist-label-box {
outline : none ! important ;
}
}
@ media ( -moz-gtk-csd-available ) {
/* Overriding appearance also avoids incorrect selection background color with light text. */
xul | button > xul | * . button-box ,
xul | menulist :: part ( label-box ) ,
xul | * . radio-label-box ,
xul | * . checkbox-label-box {
appearance : none ! important ;
}
xul | button [ type = "menu" ] > xul | * . button-box > xul | * . button-menu-dropmarker {
appearance : none ! important ;
}
xul | menulist {
font-size : inherit ! important ;
}
xul | menulist :: part ( dropmarker ) {
display : -moz-box ;
margin-block : 6px ! important ;
}
xul | menulist : -moz-focusring :: part ( label-box ) {
outline : none ! important ;
}
}
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
xul | menulist > xul | menupopup > xul | menuitem [ checked = "true" ] :: before ,
xul | menulist > xul | menupopup > xul | menuitem [ selected = "true" ] :: before {
display : none ! important ;
}
xul | menulist :: part ( dropmarker ) {
display : -moz-box ! important ;
margin-block : 1px ! important ;
}
xul | menulist > xul | menupopup xul | menu ,
xul | menulist > xul | menupopup xul | menuitem {
padding-inline-end : 34px ! important ;
}
xul | * . checkbox-icon ,
xul | * . radio-icon {
margin-inline-end : 0 ! important ;
}
xul | * . text-link : -moz-focusring {
box-shadow : none ! important ;
}
}
}
/*= Delete Cert ==============================================================*/
@ -moz-document url ( "chrome://pippki/content/deletecert.xhtml" )
{
# certlist {
border : 1px solid var ( --in-content-table-border-color ) ! important ;
border-radius : 4px ! important ;
}
}
2022-10-17 19:50:35 +02:00
/*= Cert Exception Dialog ====================================================*/
2022-05-11 21:19:02 +02:00
@ -moz-document url ( "chrome://pippki/content/exceptionDialog.xhtml" )
{
# locationTextBox {
appearance : none ! important ;
border : 1px solid var ( --in-content-box-border-color ) ! important ;
border-radius : 4px ! important ;
color : inherit ! important ;
background-color : var ( --in-content-box-background ) ! important ;
font-family : inherit ! important ;
font-size : inherit ! important ;
padding : 8px ! important ;
margin : 2px 4px ! important ;
}
# locationTextBox : focus {
border-color : transparent ! important ;
outline : 2px solid var ( --in-content-focus-outline-color ) ! important ;
2022-12-04 09:37:08 +01:00
outline-offset : -1px ! important ; /* Prevents antialiasing around the corners */
2022-05-11 21:19:02 +02:00
}
# locationTextBox : -moz-ui-invalid {
border-color : transparent ! important ;
outline : 2px solid var ( --in-content-border-invalid ) ! important ;
2022-12-04 09:37:08 +01:00
outline-offset : -1px ! important ; /* Prevents antialiasing around the corners */
2022-05-11 21:19:02 +02:00
}
# locationTextBox : disabled {
opacity : 0 . 4 ! important ;
}
# exceptiondialog : first-child > hbox > vbox : not ( [ flex = "1" ] ) {
width : 48px ! important ;
height : 48px ! important ;
background-image : url ( "chrome://global/skin/icons/warning.svg" ) ! important ;
background-size : 48px ! important ;
background-repeat : no-repeat ! important ;
-moz-context-properties : fill ! important ;
fill : currentColor ! important ;
}
# exceptiondialog : first-child > hbox > vbox > image {
display : none ! important ;
}
}
/*= Page Info ================================================================*/
@ -moz-document url ( "chrome://browser/content/pageinfo/pageInfo.xhtml" )
{
: root {
--in-content-border-color : color-mix ( in srgb , currentColor 41 % , transparent ) ! important ;
}
# viewGroup > radio {
border-radius : 8px ! important ;
padding : var ( --in-content-button-vertical-padding ) var ( --in-content-button-horizontal-padding ) ! important ;
margin : 4px ! important ;
2022-06-29 20:07:26 +02:00
list-style-image : none ! important ;
background-image : var ( --viewgroup-image ) ! important ;
background-repeat : no-repeat ;
background-position : top var ( --in-content-button-vertical-padding ) center ;
background-size : 32px ! important ;
-moz-context-properties : fill ! important ;
fill : currentColor ! important ;
2022-12-04 09:37:08 +01:00
color : var ( --in-content-deemphasized-text ) ! important ; /* FieldText */
2022-05-11 21:19:02 +02:00
}
# viewGroup > radio : hover {
2022-12-04 09:37:08 +01:00
background-color : var ( --in-content-button-background-hover ) ! important ; /* #E0E8F6; */
2022-05-11 21:19:02 +02:00
}
# viewGroup > radio [ selected = "true" ] {
2022-12-04 09:37:08 +01:00
color : var ( --in-content-button-text-color ) ! important ; /* SelectedItemText */
background-color : var ( --in-content-button-background-active ) ! important ; /* #C1D2EE; */
2022-05-11 21:19:02 +02:00
}
# generalTab {
--viewgroup-image : url ( chrome : / / global / skin / icons / page-portrait . svg ) ;
}
# mediaTab {
--viewgroup-image : url ( chrome : / / browser / skin / canvas . svg ) ;
}
# permTab {
--viewgroup-image : url ( chrome : / / browser / skin / permissions . svg ) ;
}
# securityTab {
--viewgroup-image : url ( chrome : / / global / skin / icons / security . svg ) ;
}
# viewGroup > radio > . radio-label-box {
/* Overwrite */
margin : 0 ! important ;
padding : 0 6px ! important ;
}
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
# viewGroup > radio > . radio-label-box {
2022-12-04 09:37:08 +01:00
padding-top : 32px ! important ; /* as -moz-image-region: rect(0px, 32px, 32px, 0px); */
2022-05-11 21:19:02 +02:00
}
}
# mainDeck input {
color : var ( --in-content-page-color ) ! important ;
}
# permList {
-moz-appearance : none ! important ;
color : var ( --in-content-page-color ) ! important ;
background-color : var ( --in-content-box-background ) ! important ;
}
. permission : hover {
color : var ( --in-content-text-color ) ! important ;
background-color : var ( --in-content-button-background-hover ) ! important ;
}
. permission radio [ disabled ] {
color : var ( --in-content-deemphasized-text ) ! important ;
}
treecols {
-moz-appearance : none ! important ;
background : var ( --in-content-table-header-background ) ! important ;
color : var ( --in-content-table-header-color ) ! important ;
}
treecols > treecol ,
treecols > treecolpicker . treecol-image {
-moz-appearance : none ! important ;
color : var ( --in-content-table-header-color ) ! important ;
background : var ( --in-content-table-header-background ) ! important ;
border : 1px solid var ( --in-content-table-border-color ) ! important ;
padding : 4px ! important ;
border-spacing : 0 ;
text-align : center ! important ;
}
tree ,
treechildren :: -moz-tree-row {
-moz-appearance : none ! important ;
color : var ( --in-content-text-color ) ! important ;
background-color : var ( --in-content-table-background ) ! important ;
border : 1px solid var ( --in-content-table-border-color ) ! important ;
}
treechildren :: -moz-tree-row ( odd ) {
background-color : var ( --in-content-box-background-odd ) ! important ;
}
treechildren :: -moz-tree-row ( hover ) {
color : var ( --in-content-item-hover-text ) ! important ;
background-color : var ( --in-content-item-hover ) ! important ;
}
treechildren :: -moz-tree-row ( selected ) {
background-color : var ( --in-content-item-selected ) ! important ;
}
treechildren :: -moz-tree-cell {
border-inline : 1px solid var ( --in-content-table-border-color ) ! important ;
border-spacing : 0 ! important ;
padding : 4px ! important ;
margin : 0 ! important ;
}
treechildren :: -moz-tree-cell-text ( hover ) {
color : var ( --in-content-item-hover-text ) ! important ;
}
treechildren :: -moz-tree-cell-text ( selected ) {
font-weight : 600 ! important ;
color : var ( --in-content-item-selected-text ) ! important ;
}
# imagecontainerbox {
background-color : var ( --in-content-box-background ) ! important ;
}
# metatree ,
# imagetree ,
# imagecontainerbox ,
# permList {
border-radius : 4px ! important ;
}
# metatree ,
# imagetree {
overflow : hidden ! important ;
}
# topBar ,
# imagecontainerbox ,
# permList {
border-color : var ( --in-content-table-border-color ) ! important ;
}
}
/*= Library Popup ============================================================*/
@ -moz-document url ( "chrome://browser/content/places/places.xhtml" )
{
@ media ( -moz-gtk-csd-available ) {
: root {
--organizer-color : -moz-DialogText ;
--organizer-deemphasized-color : GrayText ;
--organizer-toolbar-background : -moz-Dialog ;
--organizer-pane-background : -moz-Dialog ;
--organizer-content-background : -moz-Dialog ;
--organizer-hover-background : SelectedItem ;
--organizer-hover-color : SelectedItemText ;
--organizer-selected-background : SelectedItem ;
--organizer-selected-color : SelectedItemText ;
--organizer-outline-color : SelectedItem ;
--organizer-separator-color : ThreeDDarkShadow ;
--organizer-border-color : ThreeDShadow ;
--organizer-toolbar-field-background : Field ;
--organizer-toolbar-field-background-focused : Field ;
--organizer-toolbar-field-border-color : ThreeDShadow ;
--organizer-toolbar-field-focus-border-color : var ( --organizer-outline-color ) ;
--organizer-toolbar-field-focus-box-shadow : unset ;
--organizer-pane-field-border-color : ThreeDShadow ;
}
@ media not all and ( prefers-contrast ) {
: root {
--organizer-color : var ( --in-content-page-color ) ;
--organizer-deemphasized-color : var ( --in-content-deemphasized-text ) ;
2022-12-04 09:37:08 +01:00
--organizer-toolbar-background : rgb ( 249 , 249 , 251 ) ; /* --toolbar-bgcolor */
--organizer-pane-background : rgb ( 229 , 229 , 235 ) ; /* --lwt-accent-color */
2022-05-11 21:19:02 +02:00
--organizer-content-background : var ( --in-content-page-background ) ;
--organizer-hover-background : var ( --in-content-button-background-hover ) ;
--organizer-hover-color : var ( --organizer-color ) ;
--organizer-selected-background : var ( --in-content-button-background-active ) ;
--organizer-selected-color : var ( --organizer-color ) ;
--organizer-outline-color : var ( --in-content-focus-outline-color ) ;
--organizer-separator-color : var ( --organizer-pane-field-border-color ) ;
--organizer-border-color : var ( --in-content-border-color ) ;
2022-12-04 09:37:08 +01:00
--organizer-toolbar-field-background : rgb ( 240 , 240 , 244 ) ; /* --lwt-accent-color */
2022-05-11 21:19:02 +02:00
--organizer-toolbar-field-background-focused : Field ;
--organizer-toolbar-field-border-color : transparent ;
--organizer-toolbar-field-focus-border-color : color-mix (
in srgb ,
var ( --organizer-outline-color ) 50 % ,
transparent
) ;
--organizer-toolbar-field-focus-box-shadow : 0 1px 3px rgba ( 0 , 0 , 0 , 0 . 23 ) ;
--organizer-pane-field-border-color : color-mix ( in srgb , currentColor 41 % , transparent ) ;
}
@ media ( -moz-toolbar-prefers-color-scheme : dark ) , ( prefers-color-scheme : dark ) {
: root {
--organizer-color : rgb ( 251 , 251 , 254 ) ;
--organizer-deemphasized-color : rgb ( 191 , 191 , 201 ) ;
--organizer-toolbar-background : rgb ( 43 , 42 , 51 ) ;
--organizer-pane-background : rgb ( 35 , 34 , 43 ) ;
--organizer-content-background : rgb ( 28 , 27 , 34 ) ;
--organizer-hover-background : rgb ( 82 , 82 , 94 ) ;
--organizer-selected-background : rgb ( 91 , 91 , 102 ) ;
--organizer-toolbar-field-background : var ( --in-content-page-background ) ;
--organizer-toolbar-field-background-focused : rgb ( 66 , 65 , 77 ) ;
scrollbar-color : rgba ( 249 , 249 , 250 , 0 . 4 ) rgba ( 20 , 20 , 25 , 0 . 3 ) ;
}
}
}
/*- Toolbar & Menus ------------------------------------------------------*/
# placesToolbar {
appearance : none ! important ;
background-color : var ( --organizer-toolbar-background ) ! important ;
color : var ( --organizer-color ) ! important ;
border-bottom : 1px solid var ( --organizer-border-color ) ! important ;
padding : 4px ! important ;
padding-inline-end : 6px ! important ;
}
# placesToolbar > toolbarbutton {
appearance : none ! important ;
padding : 5px ! important ;
border-radius : 4px ! important ;
}
# placesToolbar > toolbarbutton [ disabled ] {
opacity : 0 . 6 ! important ;
}
# placesToolbar > toolbarbutton : not ( [ disabled ] ) : hover {
background-color : var ( --organizer-hover-background ) ! important ;
color : var ( --organizer-hover-color ) ! important ;
}
# placesToolbar > toolbarbutton : not ( [ disabled ] ) : hover : active {
background-color : var ( --organizer-selected-background ) ! important ;
}
# placesToolbar > toolbarbutton > . toolbarbutton-icon ,
# placesMenu > menu > image ,
# placesMenu > menu > . menubar-text {
-moz-context-properties : fill ! important ;
fill : currentColor ! important ;
}
# placesMenu {
margin-inline-start : 6px ! important ;
}
# placesMenu > menu {
appearance : none ! important ;
color : var ( --organizer-color ) ! important ;
border-radius : 4px ! important ;
padding-block : 5px ! important ;
padding-inline-start : 5px ! important ;
margin-inline-end : 2px ! important ;
}
# placesMenu > menu [ _moz-menuactive = "true" ] ,
# placesMenu > menu : hover {
background-color : var ( --organizer-hover-background ) ! important ;
color : var ( --organizer-hover-color ) ! important ;
}
# placesMenu > menu : hover : active ,
# placesMenu > menu [ open ] {
background-color : var ( --organizer-selected-background ) ! important ;
color : var ( --organizer-selected-color ) ! important ;
}
# placesMenu > menu > . menubar-text {
2022-12-04 09:37:08 +01:00
margin-block : 0 ! important ; /* override menu.css */
2022-05-11 21:19:02 +02:00
padding-inline-end : 4px ! important ;
}
/*- Search Bar & Input ---------------------------------------------------*/
# searchFilter ,
# detailsPane html | input {
appearance : none ! important ;
background-color : var ( --organizer-toolbar-field-background ) ! important ;
color : var ( --organizer-color ) ! important ;
border : 1px solid var ( --organizer-toolbar-field-border-color ) ! important ;
border-radius : 4px ! important ;
margin : 0 ! important ;
padding-block : 2px ! important ;
min-height : 24px ! important ;
}
# searchFilter [ focused ] {
box-shadow : var ( --organizer-toolbar-field-focus-box-shadow ) ! important ;
background-color : var ( --organizer-toolbar-field-background-focused ) ! important ;
border-color : transparent ! important ;
outline : 2px solid var ( --organizer-toolbar-field-focus-border-color ) ! important ;
outline-offset : -2px ! important ;
}
/*- Sidebar & Splitter ---------------------------------------------------*/
# placesList {
background-color : var ( --organizer-pane-background ) ! important ;
}
# placesView > splitter {
border : 0 ! important ;
border-inline-end : 1px solid var ( --organizer-border-color ) ! important ;
min-width : 0 ! important ;
width : 3px ! important ;
background-color : transparent ! important ;
margin-inline-start : -3px ! important ;
position : relative ! important ;
}
/*- Downloads Pane -------------------------------------------------------*/
# downloadsRichListBox ,
# downloadsListBox {
color : var ( --organizer-color ) ! important ;
background-color : var ( --organizer-content-background ) ! important ;
}
# clearDownloadsButton : focus-visible {
outline : 2px solid var ( --organizer-outline-color ) ! important ;
}
richlistitem [ selected = "true" ] ,
richlistitem : hover {
background-color : var ( --organizer-hover-background ) ! important ;
color : var ( --organizer-color ) ! important ;
}
richlistbox : where ( : focus ) > richlistitem [ selected = "true" ] {
background-color : var ( --organizer-selected-background ) ! important ;
}
/*- Tree -----------------------------------------------------------------*/
# contentView treecol {
/ * Use box-shadow to draw a bottom border instead of border-bottom
* because otherwise the items on contentView won ' t be perfectly
* aligned with the items on the sidebar . * /
box-shadow : inset 0 -1px var ( --organizer-border-color ) ! important ;
}
tree {
background-color : var ( --organizer-content-background ) ! important ;
color : var ( --organizer-color ) ! important ;
}
treecol : not ( [ hideheader = "true" ] ) ,
treecolpicker {
appearance : none ! important ;
border : none ! important ;
background-color : var ( --in-content-button-background ) ! important ;
color : var ( --organizer-color , inherit ) ! important ;
padding : 5px 10px ! important ;
}
treecol : not ( [ hideheader = "true" ] , [ sortable = "false" ] ) : hover ,
treecolpicker : hover {
background-color : var ( --organizer-hover-background ) ! important ;
color : var ( --organizer-color ) ! important ;
}
treecol : not ( [ hideheader = "true" ] , [ sortable = "false" ] ) : hover : active ,
treecolpicker : hover : active {
background-color : var ( --organizer-selected-background ) ! important ;
}
treecol : not ( [ hideheader = "true" ] , : first-child ) ,
treecolpicker {
padding-left : 10px ! important ;
border-inline-start-width : 1px ! important ;
border-inline-start-style : solid ! important ;
border-image : linear-gradient (
transparent 0 % ,
transparent 20 % ,
var ( --organizer-border-color ) 20 % ,
var ( --organizer-border-color ) 80 % ,
transparent 80 % ,
transparent 100 %
)
1 1 ! important ;
}
treecol [ sortDirection ] : not ( [ hideheader = "true" ] ) > xul | * . treecol-sortdirection {
fill : currentColor ! important ;
width : 18px ! important ;
height : 18px ! important ;
}
treechildren :: -moz-tree-row {
background-color : transparent ! important ;
}
treechildren :: -moz-tree-row ( hover ) {
background-color : var ( --organizer-hover-background ) ! important ;
}
treechildren :: -moz-tree-row ( selected ) {
background-color : var ( --organizer-selected-background ) ! important ;
color : var ( --organizer-selected-color ) ! important ;
border : 1px solid transparent ! important ;
}
treechildren :: -moz-tree-image ( hover ) ,
treechildren :: -moz-tree-twisty ( hover ) ,
treechildren :: -moz-tree-cell-text ( hover ) {
color : var ( --organizer-hover-color ) ! important ;
}
treechildren :: -moz-tree-image ( selected ) ,
treechildren :: -moz-tree-twisty ( selected ) ,
treechildren :: -moz-tree-cell-text ( selected ) {
color : var ( --organizer-selected-color ) ! important ;
}
treechildren :: -moz-tree-separator {
height : 1px ! important ;
border-color : var ( --organizer-separator-color ) ! important ;
}
treechildren :: -moz-tree-separator ( hover ) {
border-color : var ( --organizer-hover-color ) ! important ;
}
treechildren :: -moz-tree-separator ( selected ) {
border-color : var ( --organizer-selected-color ) ! important ;
}
2022-10-17 19:50:35 +02:00
treechildren :: -moz-tree-cell-text ( primary , dropOn ) ,
treechildren :: -moz-tree-drop-feedback {
background-color : var ( --organizer-outline-color ) ! important ;
}
2022-05-11 21:19:02 +02:00
/*- Info Box -------------------------------------------------------------*/
# detailsPane {
background-color : var ( --organizer-pane-background ) ! important ;
color : var ( --organizer-color ) ! important ;
padding : 5px ! important ;
border-top : 1px solid var ( --organizer-border-color ) ! important ;
}
# editBookmarkPanelRows . expander-up ,
# editBookmarkPanelRows . expander-down {
appearance : none ! important ;
min-width : 0 ! important ;
padding : 5px ! important ;
margin : 0 ! important ;
margin-inline-end : 4px ! important ;
border : 1px solid var ( --organizer-pane-field-border-color ) ! important ;
border-radius : 4px ! important ;
color : var ( --organizer-color ) ! important ;
background-color : var ( --organizer-content-background ) ! important ;
-moz-context-properties : fill ! important ;
fill : currentColor ! important ;
}
# editBookmarkPanelRows . expander-up : hover ,
# editBookmarkPanelRows . expander-down : hover {
background-color : var ( --organizer-hover-background ) ! important ;
color : var ( --organizer-hover-color ) ! important ;
}
# editBookmarkPanelRows . expander-up : hover : active ,
# editBookmarkPanelRows . expander-down : hover : active {
background-color : var ( --organizer-selected-background ) ! important ;
color : var ( --organizer-selected-color ) ! important ;
}
# editBookmarkPanelRows . expander-up : focus-visible ,
# editBookmarkPanelRows . expander-down : focus-visible {
outline : 2px solid var ( --organizer-outline-color ) ! important ;
outline-offset : -1px ! important ;
}
2022-06-29 20:07:26 +02:00
# editBookmarkPanelRows . expander-up > . button-box ,
# editBookmarkPanelRows . expander-down > . button-box {
padding : 0 ! important ;
}
2022-05-11 21:19:02 +02:00
# editBookmarkPanelRows . expander-up {
list-style-image : url ( "chrome://global/skin/icons/arrow-up-12.svg" ) ;
}
2022-06-29 20:07:26 +02:00
# editBookmarkPanelRows . expander-down {
list-style-image : url ( "chrome://global/skin/icons/arrow-down-12.svg" ) ;
2022-05-11 21:19:02 +02:00
}
# places input {
border : 1px solid var ( --organizer-pane-field-border-color ) ! important ;
border-radius : 4px ! important ;
background-color : var ( --organizer-content-background ) ! important ;
color : var ( --organizer-color ) ! important ;
min-height : 20px ! important ;
padding-inline : 4px ! important ;
}
# places input : focus {
outline : 2px solid var ( --organizer-outline-color ) ! important ;
outline-offset : -1px ! important ;
}
# places input : not ( : read-write ) : focus {
outline : none ! important ;
}
. caption-label {
margin-inline-start : 8px ! important ;
color : var ( --organizer-deemphasized-color ) ! important ;
}
# editBMPanel_tagsSelectorRow > richlistbox {
appearance : none ! important ;
color : var ( --organizer-color ) ! important ;
background-color : var ( --organizer-content-background ) ! important ;
border : 1px solid var ( --organizer-border-color ) ! important ;
border-radius : 4px ! important ;
}
# editBMPanel_tagsSelectorRow > richlistbox > richlistitem {
border : 1px solid transparent ! important ;
}
# editBMPanel_tagsSelectorRow > richlistbox > richlistitem : hover {
background-color : var ( --organizer-hover-background ) ! important ;
color : var ( --organizer-hover-color ) ! important ;
}
# editBMPanel_tagsSelectorRow > richlistbox > richlistitem [ selected ] {
background-color : var ( --organizer-selected-background ) ! important ;
color : var ( --organizer-selected-color ) ! important ;
}
}
}
}
2022-08-29 19:20:12 +02:00
/*= Monospace ================================================================*/
@ supports -moz-bool-pref ( "userChrome.theme.monospace" ) {
* {
font-family : -moz-fixed ;
}
}
2022-05-11 21:19:02 +02:00
/** Decoration ****************************************************************/
/*= Cursor Types =============================================================*/
@ supports -moz-bool-pref ( "userChrome.decoration.cursor" ) {
# appMenu-proton-update-banner ,
# appMenu-fxa-status2 : not ( [ fxastatus ] ) > # appMenu-fxa-label2 ,
# appMenu-zoomReduce-button2 ,
# appMenu-zoomReset-button2 ,
# appMenu-zoomEnlarge-button2 ,
# appMenu-fullscreen-button2 ,
# panelMenu_showAllBookmarks ,
# PanelUI-historyMore ,
# appMenuClearRecentHistory : not ( [ disabled ] ) ,
# appMenu-library-recentlyClosedTabs > . restoreallitem . panel-subview-footer-button ,
# appMenu-library-recentlyClosedWindows > . restoreallitem . panel-subview-footer-button ,
# BMB_viewBookmarksSidebar ,
# BMB_bookmarksShowAllTop ,
# BMB_bookmarksShowAll ,
# import-button ,
menuitem . openintabs-menuitem ,
# downloadsListBox . downloadButton ,
# downloadsListBox . download-state [ exists ] ,
# downloadsListBox . download-state [ exists ] . downloadDetails ,
# downloadsHistory ,
# protections-popup-footer . protections-popup-footer-button ,
# protections-popup-multiView . panel-subview-footer-button ,
# identity-popup-clear-sitedata-button ,
2022-12-04 09:37:08 +01:00
# identity-popup-more-info ,
# unified-extensions-manage-extensions ,
. unified-extensions-item-open-menu {
2022-05-11 21:19:02 +02:00
cursor : pointer ! important ;
}
/ * TODO : For now , fxa-menu doesn ' t show any status .
( JS required , observe . syncNowBtn status )
# PanelUI-fxa-menu-syncnow-button [ syncstatus = "active" ] {
cursor : progress ! important ;
}
* /
}
@ media ( prefers-reduced-motion : no-preference ) {
/*= Field Border ===========================================================*/
@ supports -moz-bool-pref ( "userChrome.decoration.field_border" ) {
/*- URL, Search Bar --------------------------------------------------------*/
# urlbar : hover : not ( [ focused = "true" ] ) > # urlbar-background ,
# searchbar : hover : not ( : focus-within ) {
--toolbar-field-border-color : var ( --toolbar-field-focus-border-color ) ;
}
/*- Other Fields -----------------------------------------------------------*/
/* Sidebar */
. sidebar-panel [ lwt-sidebar ] # search-box : hover ,
body [ lwt-sidebar ] xul | search-textbox . tabsFilter : hover {
border-color : var ( --lwt-sidebar-highlight-background-color , Highlight ) ! important ;
}
. sidebar-panel : not ( [ lwt-sidebar ] ) # search-box : hover ,
body : not ( [ lwt-sidebar ] ) xul | search-textbox . tabsFilter : hover {
2022-07-27 15:53:22 +02:00
border-color : AccentColor ! important ;
}
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
. sidebar-panel : not ( [ lwt-sidebar ] ) # search-box : hover ,
body : not ( [ lwt-sidebar ] ) xul | search-textbox . tabsFilter : hover {
border-color : -moz-accent-color ! important ;
}
2022-05-11 21:19:02 +02:00
}
/* Others */
# editBMPanel_namePicker : hover ,
# editBMPanel_tagsField : hover ,
. findbar-container . findbar-textbox : hover {
2022-07-27 15:53:22 +02:00
--input-border-color : color-mix ( in srgb , var ( --focus-outline-color , AccentColor ) 50 % , transparent ) ;
}
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
# editBMPanel_namePicker : hover ,
# editBMPanel_tagsField : hover ,
. findbar-container . findbar-textbox : hover {
--input-border-color : color-mix ( in srgb , var ( --focus-outline-color , -moz-accent-color ) 50 % , transparent ) ;
}
2022-05-11 21:19:02 +02:00
}
}
/*= Downloads Panel ========================================================*/
@ supports -moz-bool-pref ( "userChrome.decoration.download_panel" ) {
/* Accent Color for downloaded item */
# downloadsListBox . download-state [ exists ] . downloadDetails {
color : var ( --button-primary-bgcolor ) ;
}
# downloadsListBox . download-state [ exists ] . downloadDetails . downloadDetailsHover {
color : var ( --button-primary-hover-bgcolor ) ;
}
/* File moved or missing */
# downloadsListBox . download-state : not ( [ exists ] , [ state = "0" ] ) . downloadTarget {
text-decoration : line-through ;
text-decoration-color : color-mix ( in srgb , currentColor 65 % , transparent ) ;
}
2022-08-29 19:20:12 +02:00
# downloadsListBox . download-state : not ( [ exists ] , [ state = "0" ] ) . downloadTarget : hover {
text-decoration : none ;
}
2022-05-11 21:19:02 +02:00
# downloadsListBox . download-state : not ( [ exists ] , [ state = "0" ] ) . downloadTypeIcon {
filter : grayscale ( 100 % ) ! important ;
}
}
/*= Animate ================================================================*/
@ supports -moz-bool-pref ( "userChrome.decoration.animate" ) {
/*- Background Color -------------------------------------------------------*/
button ,
toolbarbutton ,
stack ,
vbox ,
. toolbarbutton-icon ,
# tabs-newtab-button > . toolbarbutton-icon {
transition : background-color 1s var ( --animation-easing-function ) ! important ;
}
button : hover ,
toolbarbutton : hover ,
stack : hover ,
vbox : hover ,
. toolbarbutton-icon : hover ,
# tabs-newtab-button : hover > . toolbarbutton-icon {
transition : background-color 0 . 25s var ( --animation-easing-function ) ! important ;
}
@ media ( -moz-gtk-csd-available ) {
. tabbrowser-tab : is ( [ visuallyselected ] , [ multiselected ] , [ selected ] ) . tab-background : not ( : -moz-lwtheme ) {
transition : background-image 0 . 25s var ( --animation-easing-function ) ! important ;
}
}
. subviewbutton {
/ * treechildren :: -moz-tree-row : Can ' t apply
menu , menuitem is not apply .
* /
transition : background-color 0 . 5s var ( --animation-easing-function ) ! important ;
}
. subviewbutton : hover {
transition : background-color 0 . 1s var ( --animation-easing-function ) ! important ;
}
/*- Pinned Tab -------------------------------------------------------------*/
# tabbrowser-tabs : not ( [ movingtab ] ) . tabbrowser-tab : not ( [ collapsed ] ) {
/* -moz-box-flex may be caused #tabbrowser-tabs[closebuttons] */
transition : -moz-box-flex 0 . 2s var ( --animation-easing-function ) ,
margin-inline-start 0 . 2s var ( --animation-easing-function ) , min-width 0 . 1s ease-out , max-width 0 . 1s ease-out ! important ;
}
# tabbrowser-tabs : not ( [ movingtab ] ) . tabbrowser-tab [ pinned ] {
2022-12-04 09:37:08 +01:00
transition : margin-inline-start 0 . 2s var ( --animation-easing-function ) , min-width 0 . 1s ease-out ,
max-width 0 . 1s ease-out ! important ;
2022-05-11 21:19:02 +02:00
}
# tabbrowser-tabs : not ( [ movingtab ] ) . tab-content :: before ,
# tabbrowser-tabs : not ( [ movingtab ] ) . tab-content :: after {
transition : width 0 . 2s var ( --animation-easing-function ) , transform 0 . 2s var ( --animation-easing-function ) ! important ;
}
# tabbrowser-tabs : not ( [ movingtab ] ) . tab-content . tab-label-container {
transition : width 0 . 3s var ( --animation-easing-function ) ! important ;
}
# tabbrowser-tabs : not ( [ movingtab ] ) . tab-content . tab-icon-image {
transition : all 0 . 3s var ( --animation-easing-function ) ! important ;
}
/*- URL / Search Bar -------------------------------------------------------*/
# urlbar-background ,
# searchbar {
transition : border-color 1s var ( --animation-easing-function ) ,
background-color 1 . 5s var ( --animation-easing-function ) ! important ;
}
# urlbar-background : hover ,
# searchbar : hover {
transition : border-color 0 . 5s var ( --animation-easing-function ) ,
background-color 1s var ( --animation-easing-function ) ! important ;
}
/* Buttons in URL bar */
# tracking-protection-icon-container ,
# identity-icon-box ,
# identity-permission-box ,
# notification-popup-box ,
# page-action-buttons > . urlbar-page-action {
transition : background-color 2 . 5s var ( --animation-easing-function ) ! important ;
}
# tracking-protection-icon-container : hover ,
# identity-icon-box : hover ,
# identity-permission-box : hover ,
# notification-popup-box : hover ,
# page-action-buttons > . urlbar-page-action : hover {
transition : background-color 1 . 25s var ( --animation-easing-function ) ! important ;
}
/*- Border - Other Fields --------------------------------------------------*/
# search-box ,
xul | search-textbox . tabsFilter ,
# editBMPanel_namePicker ,
# editBMPanel_tagsField ,
. findbar-container . findbar-textbox {
transition : border-color 1s var ( --animation-easing-function ) ! important ;
}
# search-box : hover ,
xul | search-textbox . tabsFilter : hover ,
# editBMPanel_namePicker : hover ,
# editBMPanel_tagsField : hover ,
. findbar-container . findbar-textbox : hover {
transition : border-color 0 . 5s var ( --animation-easing-function ) ! important ;
}
/*- Sidebar ----------------------------------------------------------------*/
@ supports not -moz-bool-pref ( "userChrome.decoration.disable_sidebar_animate" ) {
# sidebar-box {
/* like #sidebar-box > #sidebar */
min-width : 14em ;
width : 18em ;
max-width : 36em ;
/* Animation */
transition : margin-inline-start 0 . 25s var ( --animation-easing-function ) , opacity 0 . 25s ease-in-out ,
visibility 0s linear ! important ;
2022-08-29 19:20:12 +02:00
will-change : margin-inline-start , opacity , visibility ;
2022-05-11 21:19:02 +02:00
}
# sidebar-box [ hidden = "true" ] {
display : -moz-box ! important ;
margin-inline-start : -18em ;
opacity : 0 ;
visibility : collapse ;
transition-delay : 0s , 0s , 0 . 25s ! important ;
}
}
/*- Full Screen ------------------------------------------------------------*/
# navigator-toolbox {
/* Full screen out */
transition : margin-top 1s ease ;
transform-origin : top ;
}
# navigator-toolbox [ inFullscreen = "true" ] {
/* Full screen enter */
animation-duration : 1s ;
animation-name : fullscreen ;
animation-timing-function : ease ;
/* Full screen navbar not hover */
transition : margin-top 1 . 3s var ( --animation-easing-function ) 50ms ;
}
# navigator-toolbox [ inFullscreen = "true" ] : hover {
margin-top : 0 ! important ;
}
@ keyframes fullscreen {
from {
margin-top : 0 ;
}
2022-10-17 19:50:35 +02:00
/* Don't use `to`: Depending on density */
2022-05-11 21:19:02 +02:00
}
/*- Expand - Synced Tabs ---------------------------------------------------*/
@ -moz-document url ( "chrome://browser/content/syncedtabs/sidebar.xhtml" )
{
. item-tabs-list {
transition : transform 0 . 2s ease-out , opacity 0 . 2s ease-out ;
transform : translateY ( 0 % ) ;
opacity : 1 ;
max-height : 100 % ;
}
. item . client . closed . item-tabs-list {
display : flex ! important ;
transition : transform 0 . 2s ease-out , opacity 0 . 2s ease-out ,
max-height 0 . 25s cubic-bezier ( 0 . 82 , 0 . 085 , 0 . 395 , 0 . 895 ) 0 . 05s ;
visibility : hidden ;
transform : translateY ( -100 % ) ;
opacity : 0 ;
max-height : 0 ;
}
}
/*- Arrow - Synced Tabs ----------------------------------------------------*/
@ -moz-document url ( "chrome://browser/content/syncedtabs/sidebar.xhtml" )
{
/* treechildren::-moz-tree-twisty: Can't apply */
# template-container . item . client . item-twisty-container {
transition : transform 0 . 1s var ( --animation-easing-function ) ! important ;
}
# template-container . item . client . closed . item-twisty-container {
transform : rotate ( -90deg ) ;
background-image : url ( "chrome://global/skin/icons/arrow-down-12.svg" ) ! important ;
}
# template-container . item . client . closed . item-twisty-container : dir ( rtl ) {
transform : rotate ( 90deg ) ;
}
}
/*- Arrow - Edit Bookmark Popup --------------------------------------------*/
# editBookmarkPanelRows . expander-up . button-icon ,
# editBookmarkPanelRows . expander-down . button-icon {
transition : transform 0 . 1s var ( --animation-easing-function ) ! important ;
}
# editBookmarkPanelRows . expander-up {
list-style-image : url ( "chrome://global/skin/icons/arrow-down.svg" ) ! important ;
}
# editBookmarkPanelRows . expander-up . button-icon {
transform : rotate ( 180deg ) ;
}
}
@ supports -moz-bool-pref ( "userChrome.decoration.disable_panel_animate" ) {
: root {
2022-12-04 09:37:08 +01:00
--panelui-subview-transition-duration : 1ms ! important ; /* Disable top right corner menu sliding animation (0ms will not work!) */
2022-05-11 21:19:02 +02:00
}
}
}
/** Rounding ******************************************************************/
/** Rounding ******************************************************************/
@ supports -moz-bool-pref ( "userChrome.rounding.square_tab" ) {
: root {
2022-12-04 09:37:08 +01:00
--tab-border-radius : 0 ! important ; /* Original: 4px */
2022-05-11 21:19:02 +02:00
}
}
@ supports -moz-bool-pref ( "userChrome.rounding.square_button" ) {
: root {
2022-12-04 09:37:08 +01:00
--toolbarbutton-border-radius : 0 ! important ; /* Original: 4px */
2022-05-11 21:19:02 +02:00
}
2022-12-04 09:37:08 +01:00
button ,
findbar toolbarbutton {
2022-05-11 21:19:02 +02:00
border-radius : 0 ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.rounding.square_tab" ) or -moz-bool-pref ( "userChrome.round.square_button" ) {
2022-10-17 19:50:35 +02:00
/* Fix Tab bar button radius */
2022-05-11 21:19:02 +02:00
# TabsToolbar . toolbarbutton-1 : not ( # tabs-newtab-button ) > . toolbarbutton-icon ,
# TabsToolbar . toolbarbutton-1 : not ( # tabs-newtab-button ) > . toolbarbutton-text ,
# TabsToolbar . toolbarbutton-1 : not ( # tabs-newtab-button ) > . toolbarbutton-badge-stack ,
. tab-close-button {
--tab-border-radius : var ( --toolbarbutton-border-radius ) ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.rounding.square_panel" ) {
: root {
--arrowpanel-border-radius : 0 ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.rounding.square_panelitem" ) {
: root {
--arrowpanel-menuitem-border-radius : 0 ! important ;
--subviewbutton-border-radius : 0 ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.rounding.square_menupopup" ) {
xul | menupopup {
2022-08-29 19:20:12 +02:00
--panel-border-radius : 0px ! important ;
2022-05-11 21:19:02 +02:00
border-radius : 0 ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.rounding.square_menuitem" ) {
xul | menulist : not ( [ native ] ) ,
xul | menulist > xul | menupopup xul | menu ,
xul | menulist > xul | menupopup xul | menuitem {
border-radius : 0 ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.rounding.square_field" ) {
html | select [ size ] [ multiple ] ,
xul | listheader ,
xul | richlistbox ,
html | input {
border-radius : 0 ! important ;
}
2022-12-04 09:37:08 +01:00
# urlbar-background ,
# searchbar {
--toolbarbutton-border-radius : 0 ;
}
2022-05-11 21:19:02 +02:00
}
@ supports -moz-bool-pref ( "userChrome.rounding.square_checklabel" ) {
. checkbox-check ,
xul | * . radio-check {
border-radius : 0 ! important ;
}
}
/ *
--toolbarbutton-border-radius : 4px ;
* /
/** Reduce Padding ************************************************************/
/*= Tab Bar - Distribution padding, radius ===================================*/
@ supports -moz-bool-pref ( "userChrome.tab.lepton_like_padding" ) or -moz-bool-pref ( "userChrome.tab.photon_like_padding" ) {
: root {
2022-12-04 09:37:08 +01:00
--proton-tab-block-margin : var ( --tab-block-margin ) ! important ; /* Original: 4px, Legacy */
2022-05-11 21:19:02 +02:00
}
: root [ uidensity = "touch" ] {
/* Like Original */
--tab-block-margin : 4px ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.tab.lepton_like_padding" ) {
: root {
2022-12-04 09:37:08 +01:00
--tab-block-margin : 2px ! important ; /* New version of --proton-tab-block-margin */
2022-05-11 21:19:02 +02:00
}
}
@ supports -moz-bool-pref ( "userChrome.tab.photon_like_padding" ) {
: root {
--tab-block-margin : 0px ! important ;
}
}
/*= Tab Bar - Reduce Width, Show more tabs ===================================*/
@ supports -moz-bool-pref ( "userChrome.padding.first_tab" ) {
/* for First Tab Space */
: root {
2022-12-04 09:37:08 +01:00
--uc-space-left-tabbar : 8px ; /* If the option is not specified, it is equivalent to 0px. */
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
@ supports not -moz-bool-pref ( "userChrome.padding.first_tab.always" ) {
: root : not ( [ tabsintitlebar ] ) # tabbrowser-tabs : not ( [ positionpinnedtabs ] ) ,
: root : is ( [ sizemode = "maximized" ] , [ sizemode = "fullscreen" ] ) # tabbrowser-tabs : not ( [ positionpinnedtabs ] ) {
padding-inline-start : var ( --uc-space-left-tabbar ) ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.padding.first_tab.always" ) {
: root : not ( [ tabsintitlebar ] ) # tabbrowser-tabs ,
: root : is ( [ sizemode = "maximized" ] , [ sizemode = "fullscreen" ] ) # tabbrowser-tabs {
padding-inline-start : calc ( var ( --tab-overflow-pinned-tabs-width , 0px ) + var ( --uc-space-left-tabbar ) ) ! important ;
}
2022-05-11 21:19:02 +02:00
}
}
@ supports -moz-bool-pref ( "userChrome.padding.tabbar_width" ) {
/* Titlebar Space */
2022-08-29 19:20:12 +02:00
: root {
2022-12-04 09:37:08 +01:00
--uc-title-pre-spacer : 30px ; /* Original: 40px */
--uc-title-post-spacer : 25px ; /* Original: 40px */
2022-08-29 19:20:12 +02:00
}
2022-09-21 21:21:27 +02:00
: root : -moz-locale-dir ( rtl ) {
--uc-title-pre-spacer : 25px ;
--uc-title-post-spacer : 30px ;
}
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
. titlebar-spacer [ type = "pre-tabs" ] {
width : var ( --uc-title-pre-spacer ) ! important ;
}
. titlebar-spacer [ type = "post-tabs" ] {
width : var ( --uc-title-post-spacer ) ! important ;
}
}
@ media ( -moz-gtk-csd-available ) {
@ media ( -moz-gtk-csd-reversed-placement ) {
. titlebar-spacer [ type = "pre-tabs" ] {
width : var ( --uc-title-pre-spacer ) ! important ;
}
. titlebar-spacer [ type = "post-tabs" ] {
width : var ( --uc-title-post-spacer ) ! important ;
}
}
2022-05-11 21:19:02 +02:00
}
2022-09-21 21:21:27 +02:00
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) ,
( -moz-os-version : windows-win10 ) ,
( -moz-platform : windows-win10 ) {
. titlebar-spacer [ type = "pre-tabs" ] {
width : var ( --uc-title-post-spacer ) ! important ;
}
. titlebar-spacer [ type = "post-tabs" ] {
width : var ( --uc-title-pre-spacer ) ! important ;
}
2022-05-11 21:19:02 +02:00
}
2022-09-21 21:21:27 +02:00
@ media ( -moz-gtk-csd-available ) {
@ media ( -moz-gtk-csd-reversed-placement : 0 ) {
. titlebar-spacer [ type = "pre-tabs" ] {
width : var ( --uc-title-post-spacer ) ! important ;
}
. titlebar-spacer [ type = "post-tabs" ] {
width : var ( --uc-title-pre-spacer ) ! important ;
}
}
}
2022-05-11 21:19:02 +02:00
/* Tabbar Buttons */
: root {
--newtab-button-minus-width-padding : 2px ;
--newtab-button-width-padding : calc ( var ( --toolbarbutton-inner-padding ) - var ( --newtab-button-minus-width-padding ) ) ;
}
# new-tab-button > . toolbarbutton-icon ,
# alltabs-button > . toolbarbutton-badge-stack {
/* Original: calc(2 * var(--toolbarbutton-inner-padding) + 16px) */
width : calc ( 2 * var ( --newtab-button-width-padding ) + 16px ) ! important ;
/* Original: --toolbarbutton-inner-padding */
padding-left : var ( --newtab-button-width-padding ) ! important ;
padding-right : var ( --newtab-button-width-padding ) ! important ;
}
@ supports not -moz-bool-pref ( "userChrome.tab.photon_like_padding" ) {
# tabbrowser-tabs [ haspinnedtabs ] : not ( [ positionpinnedtabs ] )
> # tabbrowser-arrowscrollbox
> . tabbrowser-tab [ first-visible-unpinned-tab ] {
margin-inline-start : 1px ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.tab.photon_like_padding" ) {
# tabbrowser-tabs [ haspinnedtabs ] : not ( [ positionpinnedtabs ] )
> # tabbrowser-arrowscrollbox
> . tabbrowser-tab [ first-visible-unpinned-tab ] {
margin-inline-start : 0 ! important ;
}
}
: root : not ( [ uidensity = "touch" ] ) # tabbrowser-arrowscrollbox {
--scrollbtn-inner-padding : 1px ;
--scrollbtn-outer-padding : 3px ;
}
# scrollbutton-up {
2022-12-04 09:37:08 +01:00
padding-left : var ( --scrollbtn-inner-padding , 4px ) ! important ; /* Original: 4px */
2022-05-11 21:19:02 +02:00
padding-right : var ( --scrollbtn-outer-padding , 4px ) ! important ;
}
# scrollbutton-down {
2022-12-04 09:37:08 +01:00
padding-left : var ( --scrollbtn-outer-padding , 4px ) ! important ; /* Original: 4px */
2022-05-11 21:19:02 +02:00
padding-right : var ( --scrollbtn-inner-padding , 4px ) ! important ;
}
: root : not ( [ uidensity = "touch" ] ) # new-tab-button ,
# alltabs-button {
2022-12-04 09:37:08 +01:00
--toolbarbutton-outer-padding : 1px ; /* Original: 2px*/
2022-05-11 21:19:02 +02:00
}
/* Tab - Max Size */
@ supports not -moz-bool-pref ( "userChrome.tab.photon_like_padding" ) {
: root {
--tab-max-width : 240px ;
}
}
@ supports -moz-bool-pref ( "userChrome.tab.photon_like_padding" ) {
: root {
--tab-max-width : 225px ;
}
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
: root {
--tab-max-width : 180px ;
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ media screen and ( min-width : 1100px ) {
: root {
--tab-max-width : 180px ;
}
}
}
}
2022-05-11 21:19:02 +02:00
. tabbrowser-tab [ fadein ] : not ( [ pinned ] ) : not ( [ style * = "max-width" ] ) {
2022-12-04 09:37:08 +01:00
max-width : var ( --tab-max-width ) ! important ; /* Original: 225px */
2022-05-11 21:19:02 +02:00
}
/* neighbouring tabs should "pinch" together */
@ supports not -moz-bool-pref ( "userChrome.tab.photon_like_padding" ) {
@ supports -moz-bool-pref ( "userChrome.tab.lepton_like_padding" ) {
. tabbrowser-tab {
padding-inline : 1px ! important ;
}
}
2022-10-17 19:50:35 +02:00
# TabsToolbar : not ( [ multibar ] ) . tabbrowser-tab : not ( [ last-visible-tab ] ) {
2022-08-29 19:20:12 +02:00
margin-inline-end : -1px ! important ;
2022-05-11 21:19:02 +02:00
}
}
@ supports -moz-bool-pref ( "userChrome.tab.photon_like_padding" ) {
. tabbrowser-tab {
padding-inline : 0 ! important ;
}
}
}
/*= Tab Bar - Reduce Height, Show more contents ==============================*/
@ supports -moz-bool-pref ( "userChrome.padding.drag_space" ) {
/* for Extra Drag Space */
: root {
2022-12-04 09:37:08 +01:00
--uc-space-above-tabbar : 8px ; /* If the option is not specified, it is equivalent to 0px. */
2022-05-11 21:19:02 +02:00
}
@ media ( -moz-os-version : windows-win10 ) , ( -moz-platform : windows-win10 ) {
: root [ tabsintitlebar ] [ sizemode = "normal" ] # toolbar-menubar [ autohide = "true" ] {
2022-10-17 19:50:35 +02:00
height : calc ( var ( --tab-min-height ) + var ( --uc-space-above-tabbar ) - var ( --tabs-navbar-shadow-size ) ) ;
2022-05-11 21:19:02 +02:00
}
@ supports -moz-bool-pref ( "userChrome.padding.drag_space.maximized" ) {
: root [ tabsintitlebar ] [ sizemode = "maximized" ] # toolbar-menubar [ autohide = "true" ] {
2022-10-17 19:50:35 +02:00
height : calc ( var ( --tab-min-height ) + var ( --uc-space-above-tabbar ) - var ( --tabs-navbar-shadow-size ) ) ;
2022-05-11 21:19:02 +02:00
}
}
}
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) ,
( -moz-gtk-csd-available ) {
: root [ tabsintitlebar ] [ sizemode = "normal" ] # toolbar-menubar [ autohide = "true" ] {
2022-10-17 19:50:35 +02:00
height : calc ( var ( --tab-min-height ) + var ( --uc-space-above-tabbar ) ) ;
2022-05-11 21:19:02 +02:00
}
@ supports -moz-bool-pref ( "userChrome.padding.drag_space.maximized" ) {
: root [ tabsintitlebar ] [ sizemode = "maximized" ] # toolbar-menubar [ autohide = "true" ] {
2022-10-17 19:50:35 +02:00
height : calc ( var ( --tab-min-height ) + var ( --uc-space-above-tabbar ) ) ;
2022-05-11 21:19:02 +02:00
}
}
}
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
# TabsToolbar > . toolbar-items {
2022-10-17 19:50:35 +02:00
padding-top : var ( --uc-space-above-tabbar ) ! important ;
2022-05-11 21:19:02 +02:00
}
}
@ media ( -moz-os-version : windows-win7 ) , ( -moz-platform : windows-win7 ) {
/* Add 4px extra margin on top of the tabs toolbar on Windows 7. */
/* Add extra space to titlebar for dragging */
: root [ sizemode = "normal" ] [ chromehidden ~ = "menubar" ] # TabsToolbar > . toolbar-items ,
: root [ sizemode = "normal" ] # toolbar-menubar [ autohide = "true" ] [ inactive ] + # TabsToolbar > . toolbar-items {
2022-10-17 19:50:35 +02:00
padding-top : calc ( var ( --uc-space-above-tabbar ) + 4px ) ! important ;
2022-05-11 21:19:02 +02:00
}
@ supports -moz-bool-pref ( "userChrome.padding.drag_space.maximized" ) {
: root [ sizemode = "maximized" ] [ chromehidden ~ = "menubar" ] # TabsToolbar > . toolbar-items ,
: root [ sizemode = "maximized" ] # toolbar-menubar [ autohide = "true" ] [ inactive ] + # TabsToolbar > . toolbar-items {
2022-10-17 19:50:35 +02:00
padding-top : calc ( var ( --uc-space-above-tabbar ) + 4px ) ! important ;
2022-05-11 21:19:02 +02:00
}
}
}
@ media ( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) ,
( -moz-os-version : windows-win10 ) ,
( -moz-platform : windows-win10 ) ,
( -moz-gtk-csd-available ) {
/* Add extra space to titlebar for dragging */
: root [ sizemode = "normal" ] [ chromehidden ~ = "menubar" ] # TabsToolbar > . toolbar-items ,
: root [ sizemode = "normal" ] # toolbar-menubar [ autohide = "true" ] [ inactive ] + # TabsToolbar > . toolbar-items {
2022-10-17 19:50:35 +02:00
padding-top : var ( --uc-space-above-tabbar ) ! important ;
2022-05-11 21:19:02 +02:00
}
@ supports -moz-bool-pref ( "userChrome.padding.drag_space.maximized" ) {
: root [ sizemode = "maximized" ] [ chromehidden ~ = "menubar" ] # TabsToolbar > . toolbar-items ,
: root [ sizemode = "maximized" ] # toolbar-menubar [ autohide = "true" ] [ inactive ] + # TabsToolbar > . toolbar-items {
2022-10-17 19:50:35 +02:00
padding-top : var ( --uc-space-above-tabbar ) ! important ;
2022-05-11 21:19:02 +02:00
}
}
}
}
@ supports -moz-bool-pref ( "userChrome.padding.tabbar_height" ) {
/* Toolbar Height */
@ supports -moz-bool-pref ( "userChrome.tab.lepton_like_padding" ) {
2022-08-29 19:20:12 +02:00
: root : not ( [ uidensity ] ) {
--tab-min-height : 36px ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
: root [ uidensity = "compact" ] {
--tab-min-height : 32px ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
: root [ uidensity = "touch" ] {
--tab-min-height : 41px ! important ;
2022-05-11 21:19:02 +02:00
}
}
@ supports -moz-bool-pref ( "userChrome.tab.photon_like_padding" ) {
2022-08-29 19:20:12 +02:00
: root : not ( [ uidensity ] ) {
--tab-min-height : 32px ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
: root [ uidensity = "compact" ] {
--tab-min-height : 29px ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
: root [ uidensity = "touch" ] {
--tab-min-height : 41px ! important ;
2022-05-11 21:19:02 +02:00
}
/* Top Margin */
. tab-background ,
. tab-content {
margin-top : 0 ! important ;
}
}
@ supports not -moz-bool-pref ( "userChrome.tab.lepton_like_padding" ) {
@ supports not -moz-bool-pref ( "userChrome.tab.photon_like_padding" ) {
2022-08-29 19:20:12 +02:00
: root : not ( [ uidensity ] ) {
2022-12-04 09:37:08 +01:00
--tab-min-height : 36px ! important ; /* 38px -> 36px */
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
: root [ uidensity = "compact" ] {
2022-12-04 09:37:08 +01:00
--tab-min-height : 29px ! important ; /* 36px -> 29px */
2022-05-11 21:19:02 +02:00
}
}
}
2022-10-17 19:50:35 +02:00
: root {
/* Works with TabMixPlus */
--tab-min-height_mlt : calc (
var ( --tab-min-height ) + 2 * ( var ( --tab-block-margin , var ( --proton-tab-block-margin , 0px ) ) )
) ! important ;
}
# TabsToolbar [ multibar ] . tabbrowser-tab {
2022-12-04 09:37:08 +01:00
height : unset ! important ; /* Original: var(--tab-min-height_mlt) */
2022-10-17 19:50:35 +02:00
}
2022-05-11 21:19:02 +02:00
@ supports -moz-bool-pref ( "userChrome.tab.connect_to_window" ) {
2022-10-17 19:50:35 +02:00
: root {
--tab-min-height_mlt : calc (
var ( --tab-min-height ) + var ( --tab-block-margin , var ( --proton-tab-block-margin , 0px ) )
) ! important ;
}
2022-05-11 21:19:02 +02:00
# TabsToolbar {
2022-12-04 09:37:08 +01:00
--toolbarbutton-inner-padding : calc (
( var ( --tab-min-height ) - 18px ) / 2
) ! important ; /* Prevent overflow pinned tab bottom margin */
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
: root : not ( [ uidensity = "compact" ] ) # TabsToolbar : not ( [ multibar ] ) # tabbrowser-arrowscrollbox ,
# TabsToolbar : not ( [ multibar ] ) # tabbrowser-arrowscrollbox [ overflowing = "true" ] > . tabbrowser-tab [ pinned = "true" ] ,
# TabsToolbar : not ( [ multibar ] )
# tabbrowser-arrowscrollbox [ overflowing = "true" ]
> . tabbrowser-tab [ pinned = "true" ]
. tab-stack ,
# TabsToolbar : not ( [ multibar ] )
# tabbrowser-arrowscrollbox [ overflowing = "true" ]
> . tabbrowser-tab [ pinned = "true" ]
. tab-content {
2022-12-04 09:37:08 +01:00
max-height : var ( --tab-min-height ) ! important ; /* Force apply height */
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
: root [ uidensity = "compact" ] # TabsToolbar : not ( [ multibar ] ) # tabbrowser-arrowscrollbox {
2022-05-11 21:19:02 +02:00
height : var ( --tab-min-height ) ! important ;
}
}
/* Scroll Button - Size Fix */
: root # tabbrowser-arrowscrollbox {
--scrollbtn-vertical-padding : 3px ;
--scrollbtn-vertical-border : 2px ;
--scrollbtn-border-radius : 7px ;
}
# scrollbutton-up ,
# scrollbutton-down {
/* Original: var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) - 6px) = 9px */
/* https://github.com/mozilla/gecko-dev/blob/71b1259afd1cdaf41871ae675c2dadb967ea5b34/browser/themes/shared/toolbarbuttons.inc.css#L142 */
padding-top : var ( --scrollbtn-vertical-padding , var ( --toolbarbutton-inner-padding ) ) ! important ;
padding-bottom : var ( --scrollbtn-vertical-padding , var ( --toolbarbutton-inner-padding ) ) ! important ;
/* Original: 4px */
border-top-width : var ( --scrollbtn-vertical-border , 4px ) ! important ;
border-bottom-width : var ( --scrollbtn-vertical-border , 4px ) ! important ;
/* Original: calc(var(--tab-border-radius) + 4px) = 8px */
border-radius : var ( --scrollbtn-border-radius , calc ( var ( --tab-border-radius ) + 4px ) ) ! important ;
}
: root [ tabsintitlebar ] : not ( [ uidensity = "compact" ] ) # toolbar-menubar [ autohide = "true" ] {
2022-12-04 09:37:08 +01:00
height : calc (
var ( --tab-min-height ) - var ( --tabs-navbar-shadow-size ) - 2px
) ; /* Compact: 28px, Normal: 33px, Touch: 38px */
2022-05-11 21:19:02 +02:00
}
}
/*= Tool Bar - Button Padding ================================================*/
@ supports -moz-bool-pref ( "userChrome.padding.toolbar_button" ) {
: root [ uidensity = "compact" ] {
2022-12-04 09:37:08 +01:00
--toolbarbutton-outer-padding : 2px ! important ; /* Original: 3px, General is 2px */
2022-05-11 21:19:02 +02:00
}
}
/*= Nav Bar - Reduce Width ===================================================*/
@ supports -moz-bool-pref ( "userChrome.padding.navbar_width" ) {
# nav-bar : not ( [ customizing ] ) toolbarspring {
min-width : 1px ! important ;
max-width : 100px ! important ;
}
}
/*= URL Bar - Reduce Padding =================================================*/
@ supports -moz-bool-pref ( "userChrome.padding.urlbar" ) {
: root : not ( [ uidensity = "touch" ] ) # urlbar-container ,
: root : not ( [ uidensity = "touch" ] ) # search-container {
2022-12-04 09:37:08 +01:00
padding-block : 3px ! important ; /* Original: 4px */
margin-inline : 5px ! important ; /* Original: 5px */
2022-05-11 21:19:02 +02:00
}
: root : not ( [ uidensity = "compact" ] ) # urlbar-container ,
: root : not ( [ uidensity = "compact" ] ) # search-container {
padding-block : 2px ! important ;
}
/* spread menu */
: root : not ( [ uidensity ] ) . urlbarView-row {
2022-12-04 09:37:08 +01:00
padding-block : 1px ! important ; /* Original: 2px */
2022-05-11 21:19:02 +02:00
}
: root [ uidensity = "compact" ] . urlbarView-row {
padding-block : 0px ! important ;
}
: root : not ( [ uidensity ] ) # urlbar . search-one-offs : not ( [ hidden ] ) {
2022-12-04 09:37:08 +01:00
padding-block : 8px ! important ; /* Original: 10px */
2022-05-11 21:19:02 +02:00
}
: root [ uidensity = "compact" ] # urlbar . search-one-offs : not ( [ hidden ] ) {
padding-block : 2px ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.padding.urlView_expanding" ) {
# urlbar [ breakout ] [ breakout-extend ] {
top : calc ( ( var ( --urlbar-toolbar-height ) - var ( --urlbar-height ) ) / 2 ) ! important ;
left : 0 ! important ;
width : 100 % ! important ;
}
# urlbar [ breakout ] [ breakout-extend ] > # urlbar-input-container {
height : var ( --urlbar-height ) ! important ;
padding-block : 0 ! important ;
2022-12-04 09:37:08 +01:00
padding-inline : var ( --urlbar-container-padding , 0px ) ! important ;
2022-05-11 21:19:02 +02:00
}
# urlbar [ breakout ] [ breakout-extend ] > # urlbar-background {
animation-name : none ! important ;
box-shadow : 0 1px 4px rgba ( 0 , 0 , 0 , 0 . 05 ) ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.padding.urlView_result" ) {
. urlbarView {
margin-inline : 0 ! important ;
width : 100 % ! important ;
}
. urlbarView-row {
padding-block : 0 ! important ;
}
}
/*= BookMark Bar - Reduce Height =============================================*/
@ supports -moz-bool-pref ( "userChrome.padding.bookmarkbar" ) {
: root [ uidensity = "compact" ] # PersonalToolbar toolbarbutton {
2022-12-04 09:37:08 +01:00
margin-top : 0px ! important ; /* Original: 2px */
2022-05-11 21:19:02 +02:00
}
}
/*= Info Bar - Reduce Padding ================================================*/
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.padding.infobar" ) or -moz-bool-pref ( "userChrome.autohide.infobar" ) {
2022-05-11 21:19:02 +02:00
# tab-notification-deck notification-message [ message-bar-type = "infobar" ] : not ( [ style * = "margin-top" ] ) {
2022-08-29 19:20:12 +02:00
margin : var ( --infobar-message-margin , 0 4px var ( --infobar-message-vertical-margin , 8px ) ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
}
@ supports -moz-bool-pref ( "userChrome.padding.infobar" ) {
2022-12-04 09:37:08 +01:00
: root : not ( [ uidensity ] ) notification-message {
2022-08-29 19:20:12 +02:00
--infobar-message-vertical-margin : 3px ;
2022-05-11 21:19:02 +02:00
--infobar-vertical-margin : 7px ;
--infobar-button-vertical-margin : 3px ;
}
2022-12-04 09:37:08 +01:00
: root [ uidensity = "compact" ] notification-message {
2022-08-29 19:20:12 +02:00
--infobar-message-vertical-margin : 2px ;
2022-05-11 21:19:02 +02:00
--infobar-vertical-margin : 6px ;
--infobar-button-vertical-margin : 2px ;
}
2022-12-04 09:37:08 +01:00
: root [ uidensity = "touch" ] notification-message {
2022-08-29 19:20:12 +02:00
--infobar-message-vertical-margin : 4px ;
--infobar-vertical-margin : 8px ;
--infobar-button-vertical-margin : 4px ;
}
2022-05-11 21:19:02 +02:00
. infobar > . icon {
2022-12-04 09:37:08 +01:00
margin-block : var ( --infobar-vertical-margin ) ! important ; /* Original: 8px */
2022-05-11 21:19:02 +02:00
}
. notification-message {
2022-12-04 09:37:08 +01:00
padding-block : var ( --infobar-vertical-margin ) ! important ; /* Original: 8px */
2022-05-11 21:19:02 +02:00
}
. notification-button-container > . notification-button {
2022-12-04 09:37:08 +01:00
margin-block : var ( --infobar-button-vertical-margin ) ! important ; /* Original: 4px */
2022-05-11 21:19:02 +02:00
}
. notification-close {
2022-12-04 09:37:08 +01:00
margin : var ( --infobar-button-vertical-margin ) 8px ! important ; /* Original: 4px 8px */
2022-05-11 21:19:02 +02:00
}
/* Hard coded for compatibility - Disappearing phenomenon */
. container . infobar :: before {
content : "" ;
display : block ;
width : 2px ;
position : absolute ;
background-image : linear-gradient ( 0 , # 9059ff 0 % , # ff4aa2 52 . 08 % , # ffbd4f 100 % ) ;
top : 0 ;
inset-inline-start : 0 ;
height : 100 % ;
border-start-start-radius : 4px ;
border-end-start-radius : 4px ;
}
}
/*= Menu - Reduce Padding ====================================================*/
@ supports -moz-bool-pref ( "userChrome.padding.menu" ) {
: root {
2022-12-04 09:37:08 +01:00
--menu-padding : 0 . 35em ; /* Win7, 8: 0px */
2022-05-11 21:19:02 +02:00
}
: root [ uidensity = "compact" ] {
--menu-padding : 0 . 25em ;
}
: root [ uidensity = "touch" ] {
--menu-padding : 0 . 5em ;
}
@ supports -moz-bool-pref ( "userChrome.padding.menu_compact" ) {
: root {
--menu-padding : 2px ;
}
: root [ uidensity = "compact" ] {
--menu-padding : 0px ;
}
}
menupopup : not ( . in-menulist ) > menuitem ,
menupopup > menu {
/* Original: 0.5em */
padding-block : var ( --menu-padding ) ! important ;
}
# ContentSelectDropdown > menupopup > menucaption ,
# ContentSelectDropdown > menupopup > menuitem {
padding-block : 0 ! important ;
}
2022-07-27 15:53:22 +02:00
@ media ( -moz-gtk-csd-available ) {
# ContentSelectDropdown > menupopup > menucaption ,
# ContentSelectDropdown > menupopup > menuitem {
padding-block : var ( --menu-padding ) ! important ;
}
}
2022-05-11 21:19:02 +02:00
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
: root : not ( [ uidensity = "touch" ] ) . menu-text ,
: root : not ( [ uidensity = "touch" ] ) . menu-iconic-text {
2022-12-04 09:37:08 +01:00
padding-inline-end : 0 ! important ; /* Original: 2px */
2022-05-11 21:19:02 +02:00
}
: root : not ( [ uidensity = "touch" ] ) . menupopup-arrowscrollbox {
2022-12-04 09:37:08 +01:00
padding-block : 1px ! important ; /* Original: 4px*/
2022-05-11 21:19:02 +02:00
}
: root : not ( [ uidensity = "touch" ] ) # context-navigation : not ( [ hidden ] ) {
2022-12-04 09:37:08 +01:00
padding : 0 0 1px ! important ; /* Original: 0 0 4px*/
2022-05-11 21:19:02 +02:00
}
: root : not ( [ uidensity = "touch" ] ) . menu-right {
2022-12-04 09:37:08 +01:00
margin-right : 6px ! important ; /* Original: 12px */
2022-05-11 21:19:02 +02:00
}
}
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) {
/* Remove border */
menupopup > menuitem ,
menupopup > menu {
padding-block : calc ( var ( --menu-padding ) - 2px ) ! important ;
}
/* Make to original */
: root : not ( [ uidensity = "touch" ] ) # context-navigation : not ( [ hidden ] ) {
padding : 0 0 4px ! important ;
}
}
@ media ( -moz-gtk-csd-available ) {
menupopup > menu {
padding-inline-start : 0 . 5em ;
}
}
/* Arrow Icon Align to Right */
. bookmark-item . subviewbutton > . menu-right {
margin-inline-end : 0 ! important ;
}
}
/*= Bookmark Menu - Reduce Padding ===========================================*/
@ supports -moz-bool-pref ( "userChrome.padding.bookmark_menu" ) {
: root {
--bookmark-menu-padding : 3px ;
}
: root [ uidensity = "compact" ] {
--bookmark-menu-padding : 1 . 5px ;
}
@ supports -moz-bool-pref ( "userChrome.padding.menu_compact" ) {
: root {
--bookmark-menu-padding : 2px ;
}
: root [ uidensity = "compact" ] {
--bookmark-menu-padding : 0px ;
}
}
: root : not ( [ uidensity = "touch" ] ) # BMB_bookmarksPopup . subviewbutton ,
: root : not ( [ uidensity = "touch" ] ) # PlacesToolbar menupopup [ placespopup ] . bookmark-item ,
: root : not ( [ uidensity = "touch" ] ) # PlacesToolbar menupopup [ placespopup ] . openintabs-menuitem {
padding-block : var ( --bookmark-menu-padding ) ! important ;
}
@ supports -moz-bool-pref ( "userChrome.padding.menu_compact" ) or -moz-bool-pref ( "userChrome.padding.bookmark_menu.compact" ) {
: root : not ( [ uidensity = "touch" ] ) # BMB_bookmarksPopup . bookmark-item ,
: root : not ( [ uidensity = "touch" ] ) # PlacesToolbar menupopup [ placespopup ] . bookmark-item {
2022-12-04 09:37:08 +01:00
min-height : unset ! important ; /* Original: 24px */
2022-05-11 21:19:02 +02:00
}
}
}
/*= Global Menu - Set Padding ================================================*/
@ supports -moz-bool-pref ( "userChrome.padding.global_menubar" ) {
/* Vertical Align - Center & Height: 100% */
# main-menubar {
-moz-box-flex : 1 ! important ;
}
/* Rounding */
# main-menubar > menu {
border-radius : 4px ;
}
/* Menubar item padding */
: root {
--global-menubar-padding : 2px ;
}
: root [ uidensity = "compact" ] {
--global-menubar-padding : 1px ;
}
: root [ uidensity = "touch" ] {
--global-menubar-padding : 4px ;
}
# main-menubar > menu {
padding-block : var ( --global-menubar-padding ) ! important ;
}
/* Reduce items */
# main-menubar > menu > menupopup menuitem ,
# main-menubar > menu > menupopup menu {
padding-block : var ( --bookmark-menu-padding ) ! important ;
}
}
/*= Panel - Reduce padding ===================================================*/
@ supports -moz-bool-pref ( "userChrome.padding.panel" ) {
: root {
2022-12-04 09:37:08 +01:00
--arrowpanel-menuitem-margin : 0 var ( --arrowpanel-menuicon-padding , 8px ) ! important ; /* Original: 0 8px */
--arrowpanel-menuitem-padding-block : 5px ! important ; /* Original: 8px */
--arrowpanel-menuitem-padding-inline : 5px ! important ; /* Original: 8px */
--arrowpanel-menuitem-padding : var ( --arrowpanel-menuitem-padding-block ) var ( --arrowpanel-menuitem-padding-inline ) ! important ; /* Compatibility */
--arrowpanel-padding : 0 . 8em ! important ; /* Original: 16px or .cui-widget-panel, .cui-widget-panel::part(arrowcontent) => 4px 0 */
2022-05-11 21:19:02 +02:00
}
: root [ uidensity = "compact" ] {
--arrowpanel-menuitem-padding-block : 3px ! important ;
--arrowpanel-menuitem-padding-inline : 3px ! important ;
}
: root [ uidensity = "touch" ] {
2022-12-04 09:37:08 +01:00
--arrowpanel-menuitem-padding-block : 8px ! important ; /* Original: 8px */
--arrowpanel-menuitem-padding-inline : 8px ! important ; /* Original: 8px */
}
@ supports not -moz-bool-pref ( "userChrome.icon.disabled" ) {
@ supports not -moz-bool-pref ( "userChrome.icon.panel" ) {
. subviewbutton {
min-height : calc ( 16px + var ( --arrowpanel-menuitem-padding-block ) * 2 ) ! important ;
}
}
2022-05-11 21:19:02 +02:00
}
}
@ supports -moz-bool-pref ( "userChrome.padding.panel_header" ) {
. panel-header {
padding : unset ! important ;
padding-top : 4px ! important ;
}
}
/*= Popup Panel - Reduce padding =============================================*/
@ supports -moz-bool-pref ( "userChrome.padding.popup_panel" ) {
# protections-popup-main-header-label {
2022-12-04 09:37:08 +01:00
height : unset ! important ; /* Original: 37.6px */
2022-05-11 21:19:02 +02:00
}
# identity-popup ,
# permission-popup ,
# protections-popup {
2022-12-04 09:37:08 +01:00
--vertical-section-padding : 0 . 8em ; /* Original: 0.9em */
2022-05-11 21:19:02 +02:00
}
. protections-popup-footer-button ,
. protections-popup-category {
2022-12-04 09:37:08 +01:00
min-height : 24px ; /* Original: 32px */
2022-05-11 21:19:02 +02:00
height : unset ! important ;
}
/** Popup panel - Compact mode */
/* Footer Button Height */
: root [ uidensity = "compact" ] . panel-footer . panel-footer-menulike > button {
padding : 3px 8px ! important ;
}
/* Footer Button Height */
: root [ uidensity = "compact" ] # protections-popup-trackersView-settings-button {
margin : 4px 8px 0 ! important ;
}
/* not cut off for Protection popup Footer on windows */
: root [ uidensity = "compact" ] # protections-popup-multiView # protections-popup-footer {
2022-12-04 09:37:08 +01:00
padding : 0 ! important ;
2022-05-11 21:19:02 +02:00
}
/* Button and disabled category in Protection popup */
: root [ uidensity = "compact" ] # protections-popup-multiView . protections-popup-footer-button ,
: root [ uidensity = "compact" ] # protections-popup-multiView . protections-popup-category {
height : 20px ! important ;
min-height : 20px ! important ;
}
/* Footer Button in Tracking Content Panel */
: root [ uidensity = "compact" ] # protections-popup-multiView . panel-footer . panel-footer-menulike {
margin : 0 0 3px ! important ;
}
/* Identity popup header padding */
: root [ uidensity = "compact" ] # identity-popup-multiView # identity-popup-mainView-panel-header {
padding : 2px 5px ! important ;
}
/* Text When There is no trackers */
: root [ uidensity = "compact" ] # protections-popup-no-trackers-found-description {
margin : 2em 4em ! important ;
}
/* Download Item margin */
: root [ uidensity = "compact" ] # downloadsListBox {
margin : 0 ! important ;
}
}
/** Tab Bar UI ****************************************************************/
/*= Tabs on Bottom ===========================================================*/
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) or -moz-bool-pref ( "userChrome.fullscreen.overlap" ) {
2022-05-11 21:19:02 +02:00
/* Don't use display: flex at not fullscreen!! side effect #372 */
: root [ sizemode = "fullscreen" ] # navigator-toolbox {
2022-12-04 09:37:08 +01:00
display : flex ! important ; /* Needed for content to take up entire height, compatibility with tabs on bottom */
2022-05-11 21:19:02 +02:00
flex-wrap : wrap ;
}
: root [ sizemode = "fullscreen" ] # titlebar ,
: root [ sizemode = "fullscreen" ] # nav-bar ,
: root [ sizemode = "fullscreen" ] # PersonalToolbar ,
: root [ sizemode = "fullscreen" ] # tab-notification-deck ,
: root [ sizemode = "fullscreen" ] # tab-notification-deck-template {
flex-basis : 100 % ;
}
/* -moz-default-appearance: -moz-window-titlebar */
: root [ sizemode = "fullscreen" ] # titlebar {
-moz-appearance : none ! important ;
}
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
/ * Source file https : / / github . com / MrOtherGuy / firefox-csshacks / tree / master / chrome / tabs_on_bottom . css made available under Mozilla Public License v . 2 . 0
See the above repository for updates as well as full license text . * /
/*= Tabbar - Move to bottom ==================================================*/
# titlebar {
2022-12-04 09:37:08 +01:00
order : 2 ; /* When userChrome.fullscreen.overlap */
2022-08-29 19:20:12 +02:00
-moz-box-ordinal-group : 2 ;
--tabs-navbar-shadow-size : 0px ;
}
# tab-notification-deck {
2022-12-04 09:37:08 +01:00
order : 2 ; /* When userChrome.fullscreen.overlap */
2022-05-11 21:19:02 +02:00
-moz-box-ordinal-group : 2 ;
}
2022-08-29 19:20:12 +02:00
# TabsToolbar . titlebar-spacer {
display : none ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# TabsToolbar-customization-target > . toolbarbutton-1 : last-child {
padding-inline-end : var ( --toolbar-start-end-padding , 8px ) ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom.above_bookmark" ) {
# PersonalToolbar {
2022-12-04 09:37:08 +01:00
order : 2 ; /* When userChrome.fullscreen.overlap */
2022-08-29 19:20:12 +02:00
-moz-box-ordinal-group : 2 ;
}
}
@ supports not -moz-bool-pref ( "userChrome.tabbar.on_bottom.above_bookmark" ) {
@ supports -moz-bool-pref ( "userChrome.tab.connect_to_window" ) {
@ supports -moz-bool-pref ( "userChrome.tab.color_like_toolbar" ) {
# navigator-toolbox {
2022-12-04 09:37:08 +01:00
border-bottom-color : var (
--toolbar-bgcolor
) ! important ; /* Original: 1px solid var(--chrome-content-separator-color); */
2022-08-29 19:20:12 +02:00
}
}
}
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
/*= Tabbar - Hidden at single tab ===========================================*/
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom.hidden_single_tab" ) {
# tabbrowser-tabs . tabbrowser-tab : only-of-type {
display : none ! important ;
}
# tabbrowser-tabs ,
# tabbrowser-tabs arrowscrollbox {
height : auto ! important ;
min-height : auto ! important ;
}
@ media ( prefers-reduced-motion : no-preference ) {
# tabbrowser-tabs {
transition : height 0 . 25s var ( --animation-easing-function ) var ( --uc-autohide-toolbar-delay ) ;
}
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
/*= Menubar - Always on top ==================================================*/
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom.menubar_on_top" ) {
/ * Source file https : / / github . com / MrOtherGuy / firefox-csshacks / tree / master / chrome / tabs_on_bottom_menubar_on_top_patch . css made available under Mozilla Public License v . 2 . 0
See the above repository for updates as well as full license text . * /
: root {
/* height if native titlebar is enabled, assumes empty menubar */
--uc-menubar-height : 20px ;
2022-12-04 09:37:08 +01:00
--uc-menubar-padding : 1px ; /* FF's menubar padding */
2022-08-29 19:20:12 +02:00
--uc-menubar-container-height : calc ( var ( --uc-menubar-height ) - ( 2 * var ( --uc-menubar-padding ) ) ) ;
}
: root [ tabsintitlebar ] {
/* height when native titlebar is disabled, more roomy so can fit buttons etc. */
--uc-menubar-height : 30px ;
}
/* Menubar on top patch - use with tabs_on_bottom.css */
/* Only really useful if menubar is ALWAYS visible */
: root : not ( [ sizemode = "fullscreen" ] ) {
--uc-window-control-width : 0px ! important ;
}
/* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */
: root : not ( [ sizemode = "fullscreen" ] ) # nav-bar {
border-inline-width : 0 ;
}
# navigator-toolbox {
-moz-window-dragging : drag ;
}
: root [ sizemode = "fullscreen" ] # navigator-toolbox {
padding-top : 0px ! important ;
}
# toolbar-menubar {
position : fixed ;
display : flex ;
top : var ( --uc-titlebar-padding ) ;
height : var ( --uc-menubar-height ) ;
width : 100 % ;
overflow : hidden ;
}
: root [ tabsintitlebar ] # toolbar-menubar [ autohide = "true" ] : not ( [ inactive = "true" ] ) {
2022-12-04 09:37:08 +01:00
height : var ( --uc-menubar-height ) ! important ; /* calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) */
2022-08-29 19:20:12 +02:00
}
# toolbar-menubar > . titlebar-buttonbox-container {
height : 100 % ;
order : 100 ;
}
# toolbar-menubar > [ flex ] {
flex-grow : 100 ;
}
# toolbar-menubar > spacer [ flex ] {
order : 99 ;
flex-grow : 1 ;
min-width : var ( --uc-window-drag-space-post ) ;
}
# toolbar-menubar . toolbarbutton-1 {
--toolbarbutton-inner-padding : 3px ;
}
# toolbar-menubar [ autohide = "true" ] > . titlebar-buttonbox-container ,
# TabsToolbar > . titlebar-buttonbox-container {
height : var ( --uc-menubar-container-height ) ;
}
: root : not ( [ chromehidden ~ = "menubar" ] , [ sizemode = "fullscreen" ] )
# toolbar-menubar : not ( [ autohide = "true" ] )
+ # TabsToolbar
> . titlebar-buttonbox-container {
visibility : collapse ! important ;
}
: root : not ( [ chromehidden ~ = "menubar" ] ) : not ( [ sizemode = "fullscreen" ] )
# toolbar-menubar : not ( [ autohide = "true" ] )
. titlebar-buttonbox-container {
visibility : visible ;
}
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ media screen and ( max-width : 1100px ) {
/ * Source file https : / / github . com / MrOtherGuy / firefox-csshacks / tree / master / chrome / tabs_on_bottom . css made available under Mozilla Public License v . 2 . 0
See the above repository for updates as well as full license text . * /
/*= Tabbar - Move to bottom ==================================================*/
# titlebar {
2022-12-04 09:37:08 +01:00
order : 2 ; /* When userChrome.fullscreen.overlap */
2022-08-29 19:20:12 +02:00
-moz-box-ordinal-group : 2 ;
--tabs-navbar-shadow-size : 0px ;
}
# tab-notification-deck {
2022-12-04 09:37:08 +01:00
order : 2 ; /* When userChrome.fullscreen.overlap */
2022-08-29 19:20:12 +02:00
-moz-box-ordinal-group : 2 ;
}
# TabsToolbar . titlebar-spacer {
display : none ;
}
# TabsToolbar-customization-target > . toolbarbutton-1 : last-child {
padding-inline-end : var ( --toolbar-start-end-padding , 8px ) ;
}
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom.above_bookmark" ) {
# PersonalToolbar {
2022-12-04 09:37:08 +01:00
order : 2 ; /* When userChrome.fullscreen.overlap */
2022-08-29 19:20:12 +02:00
-moz-box-ordinal-group : 2 ;
}
}
@ supports not -moz-bool-pref ( "userChrome.tabbar.on_bottom.above_bookmark" ) {
@ supports -moz-bool-pref ( "userChrome.tab.connect_to_window" ) {
@ supports -moz-bool-pref ( "userChrome.tab.color_like_toolbar" ) {
# navigator-toolbox {
2022-12-04 09:37:08 +01:00
border-bottom-color : var (
--toolbar-bgcolor
) ! important ; /* Original: 1px solid var(--chrome-content-separator-color); */
2022-08-29 19:20:12 +02:00
}
}
}
}
2022-10-17 19:50:35 +02:00
/*= Tabbar - Hidden at single tab ===========================================*/
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom.hidden_single_tab" ) {
# tabbrowser-tabs . tabbrowser-tab : only-of-type {
display : none ! important ;
}
# tabbrowser-tabs ,
# tabbrowser-tabs arrowscrollbox {
height : auto ! important ;
min-height : auto ! important ;
}
@ media screen and ( max-width : 1100px ) and ( prefers-reduced-motion : no-preference ) {
# tabbrowser-tabs {
transition : height 0 . 25s var ( --animation-easing-function ) var ( --uc-autohide-toolbar-delay ) ;
}
}
}
/*= Menubar - Always on top ==================================================*/
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom.menubar_on_top" ) {
/ * Source file https : / / github . com / MrOtherGuy / firefox-csshacks / tree / master / chrome / tabs_on_bottom_menubar_on_top_patch . css made available under Mozilla Public License v . 2 . 0
See the above repository for updates as well as full license text . * /
: root {
/* height if native titlebar is enabled, assumes empty menubar */
--uc-menubar-height : 20px ;
2022-12-04 09:37:08 +01:00
--uc-menubar-padding : 1px ; /* FF's menubar padding */
2022-08-29 19:20:12 +02:00
--uc-menubar-container-height : calc ( var ( --uc-menubar-height ) - ( 2 * var ( --uc-menubar-padding ) ) ) ;
}
: root [ tabsintitlebar ] {
/* height when native titlebar is disabled, more roomy so can fit buttons etc. */
--uc-menubar-height : 30px ;
}
/* Menubar on top patch - use with tabs_on_bottom.css */
/* Only really useful if menubar is ALWAYS visible */
: root : not ( [ sizemode = "fullscreen" ] ) {
--uc-window-control-width : 0px ! important ;
}
/* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */
: root : not ( [ sizemode = "fullscreen" ] ) # nav-bar {
border-inline-width : 0 ;
}
# navigator-toolbox {
-moz-window-dragging : drag ;
}
: root [ sizemode = "fullscreen" ] # navigator-toolbox {
padding-top : 0px ! important ;
}
# toolbar-menubar {
position : fixed ;
display : flex ;
top : var ( --uc-titlebar-padding ) ;
height : var ( --uc-menubar-height ) ;
width : 100 % ;
overflow : hidden ;
}
: root [ tabsintitlebar ] # toolbar-menubar [ autohide = "true" ] : not ( [ inactive = "true" ] ) {
2022-12-04 09:37:08 +01:00
height : var ( --uc-menubar-height ) ! important ; /* calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) */
2022-08-29 19:20:12 +02:00
}
# toolbar-menubar > . titlebar-buttonbox-container {
height : 100 % ;
order : 100 ;
}
# toolbar-menubar > [ flex ] {
flex-grow : 100 ;
}
# toolbar-menubar > spacer [ flex ] {
order : 99 ;
flex-grow : 1 ;
min-width : var ( --uc-window-drag-space-post ) ;
}
# toolbar-menubar . toolbarbutton-1 {
--toolbarbutton-inner-padding : 3px ;
}
# toolbar-menubar [ autohide = "true" ] > . titlebar-buttonbox-container ,
# TabsToolbar > . titlebar-buttonbox-container {
height : var ( --uc-menubar-container-height ) ;
}
: root : not ( [ chromehidden ~ = "menubar" ] , [ sizemode = "fullscreen" ] )
# toolbar-menubar : not ( [ autohide = "true" ] )
+ # TabsToolbar
> . titlebar-buttonbox-container {
visibility : collapse ! important ;
}
: root : not ( [ chromehidden ~ = "menubar" ] ) : not ( [ sizemode = "fullscreen" ] )
# toolbar-menubar : not ( [ autohide = "true" ] )
. titlebar-buttonbox-container {
visibility : visible ;
}
}
}
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
}
/*= Tab Bar - Oneliner =======================================================*/
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
2022-05-11 21:19:02 +02:00
: root {
2022-08-29 19:20:12 +02:00
--uc-navbar-width-origin : 40vw ;
--uc-navbar-width : var ( --uc-navbar-width-origin ) ;
--uc-tabbar-width : calc ( 100vw - var ( --uc-navbar-width ) ) ;
--uc-navbar-margin : calc ( var ( --uc-navbar-width ) + var ( --uc-navbar-gap , 0px ) ) ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.autohide.fill_urlbar" ) {
: root {
--uc-navbar-width-origin : 50vw ;
--uc-navbar-width : 24em ;
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# nav-bar {
--uc-navbar-double-block : calc ( 2 * var ( --uc-navbar-block , 0px ) ) ;
height : calc ( var ( --uc-tabbar-height ) - var ( --uc-navbar-double-block ) ) ! important ;
margin-top : calc ( var ( --uc-tabbar-hide-height ) + var ( --uc-navbar-double-block ) ) ! important ;
margin-bottom : var ( --uc-navbar-block , 0px ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# titlebar {
transform : translateY ( var ( --uc-navbar-block , 0px ) ) ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# TabsToolbar > . titlebar-buttonbox-container {
transform : translateY ( calc ( -1 * var ( --uc-navbar-block , 0px ) ) ) ;
2022-05-11 21:19:02 +02:00
}
2022-09-21 21:21:27 +02:00
# navigator-toolbox {
2022-10-17 19:50:35 +02:00
position : relative ;
2022-09-21 21:21:27 +02:00
z-index : 2 ;
}
2022-08-29 19:20:12 +02:00
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.combine_navbar" ) {
: root {
--uc-navbar-gap : 10px ;
--uc-navbar-block : 1 . 5px ;
}
: root [ uidensity = "compact" ] {
--uc-navbar-block : 1px ;
}
: root [ uidensity = "touch" ] {
--uc-navbar-block : 3px ;
}
# nav-bar {
2022-12-04 09:37:08 +01:00
--toolbarbutton-inner-padding : 6px ; /* Original: 8px */
2022-08-29 19:20:12 +02:00
border-radius : var ( --tab-border-radius , 4px ) ;
}
# nav-bar ,
# nav-bar-customization-target {
-moz-box-align : center ;
}
2022-12-04 09:37:08 +01:00
# urlbar-container {
min-height : calc ( var ( --urlbar-container-height ) - 2px ) ! important ;
2022-08-29 19:20:12 +02:00
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.combine_navbar" ) {
# navigator-toolbox {
background-color : var ( --toolbar-bgcolor ) ! important ;
}
# nav-bar {
--lwt-tabs-border-color : transparent ;
background-color : unset ! important ;
background-image : unset ! important ;
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# urlbar-container {
2022-10-17 19:50:35 +02:00
min-width : calc (
var ( --uc-oneliner-urlbar-base-width , 50px ) + 24px + 2 * var ( --toolbarbutton-inner-padding )
) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-12-04 09:37:08 +01:00
# urlbar [ breakout ] [ breakout-extend ] {
min-width : calc ( 310px + 2 * ( 24px + 2 * var ( --toolbarbutton-inner-padding ) ) ) ! important ;
}
2022-08-29 19:20:12 +02:00
# PersonalToolbar {
position : relative ;
z-index : -1 ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
toolbarspring . chromeclass-toolbar-additional {
display : none ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
# TabsToolbar {
margin-inline-start : var ( --uc-navbar-margin ) ! important ;
}
# nav-bar {
margin-inline-end : var ( --uc-tabbar-width ) ! important ;
}
. titlebar-spacer [ type = "pre-tabs" ] {
display : none ! important ;
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
# TabsToolbar {
margin-inline-end : var ( --uc-navbar-margin ) ! important ;
}
# nav-bar {
margin-inline-start : var ( --uc-tabbar-width ) ! important ;
}
. titlebar-spacer [ type = "post-tabs" ] {
display : none ! important ;
}
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ media screen and ( min-width : 1100px ) {
: root {
--uc-navbar-width-origin : 40vw ;
--uc-navbar-width : var ( --uc-navbar-width-origin ) ;
--uc-tabbar-width : calc ( 100vw - var ( --uc-navbar-width ) ) ;
--uc-navbar-margin : calc ( var ( --uc-navbar-width ) + var ( --uc-navbar-gap , 0px ) ) ;
}
@ supports -moz-bool-pref ( "userChrome.autohide.fill_urlbar" ) {
: root {
--uc-navbar-width-origin : 50vw ;
--uc-navbar-width : 24em ;
}
}
# nav-bar {
--uc-navbar-double-block : calc ( 2 * var ( --uc-navbar-block , 0px ) ) ;
height : calc ( var ( --uc-tabbar-height ) - var ( --uc-navbar-double-block ) ) ! important ;
margin-top : calc ( var ( --uc-tabbar-hide-height ) + var ( --uc-navbar-double-block ) ) ! important ;
margin-bottom : var ( --uc-navbar-block , 0px ) ! important ;
}
# titlebar {
transform : translateY ( var ( --uc-navbar-block , 0px ) ) ;
}
# TabsToolbar > . titlebar-buttonbox-container {
transform : translateY ( calc ( -1 * var ( --uc-navbar-block , 0px ) ) ) ;
}
2022-09-21 21:21:27 +02:00
# navigator-toolbox {
2022-10-17 19:50:35 +02:00
position : relative ;
2022-09-21 21:21:27 +02:00
z-index : 2 ;
}
2022-08-29 19:20:12 +02:00
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.combine_navbar" ) {
: root {
--uc-navbar-gap : 10px ;
--uc-navbar-block : 1 . 5px ;
}
: root [ uidensity = "compact" ] {
--uc-navbar-block : 1px ;
}
: root [ uidensity = "touch" ] {
--uc-navbar-block : 3px ;
}
# nav-bar {
2022-12-04 09:37:08 +01:00
--toolbarbutton-inner-padding : 6px ; /* Original: 8px */
2022-08-29 19:20:12 +02:00
border-radius : var ( --tab-border-radius , 4px ) ;
}
# nav-bar ,
# nav-bar-customization-target {
-moz-box-align : center ;
}
2022-12-04 09:37:08 +01:00
# urlbar-container {
min-height : calc ( var ( --urlbar-container-height ) - 2px ) ! important ;
2022-08-29 19:20:12 +02:00
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.combine_navbar" ) {
# navigator-toolbox {
background-color : var ( --toolbar-bgcolor ) ! important ;
}
# nav-bar {
--lwt-tabs-border-color : transparent ;
background-color : unset ! important ;
background-image : unset ! important ;
}
}
# urlbar-container {
2022-10-17 19:50:35 +02:00
min-width : calc (
var ( --uc-oneliner-urlbar-base-width , 50px ) + 24px + 2 * var ( --toolbarbutton-inner-padding )
) ! important ;
2022-08-29 19:20:12 +02:00
}
2022-12-04 09:37:08 +01:00
# urlbar [ breakout ] [ breakout-extend ] {
min-width : calc ( 310px + 2 * ( 24px + 2 * var ( --toolbarbutton-inner-padding ) ) ) ! important ;
}
2022-08-29 19:20:12 +02:00
# PersonalToolbar {
position : relative ;
z-index : -1 ;
}
toolbarspring . chromeclass-toolbar-additional {
display : none ! important ;
}
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
# TabsToolbar {
margin-inline-start : var ( --uc-navbar-margin ) ! important ;
}
# nav-bar {
margin-inline-end : var ( --uc-tabbar-width ) ! important ;
}
. titlebar-spacer [ type = "pre-tabs" ] {
display : none ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
# TabsToolbar {
margin-inline-end : var ( --uc-navbar-margin ) ! important ;
}
# nav-bar {
margin-inline-start : var ( --uc-tabbar-width ) ! important ;
}
. titlebar-spacer [ type = "post-tabs" ] {
display : none ! important ;
}
}
}
}
}
/*= Tab Bar - Shared Layout ==================================================*/
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) or -moz-bool-pref ( "userChrome.tabbar.one_liner" ) or -moz-bool-pref (
"userChrome.hidden.tabbar"
)
or -moz-bool-pref ( "userChrome.tabbar.as_titlebar" ) {
: root {
2022-12-04 09:37:08 +01:00
--uc-window-control-width : 0px ; /* Same as .titlebar-buttonbox-container - Space reserved for window controls */
--uc-window-drag-space-pre : 0px ; /* Same as .titlebar-spacer[type="pre-tabs"] - Extra space reserved on both sides of the nav-bar to be able to drag the window */
--uc-window-drag-space-post : 0px ; /* Same as .titlebar-spacer[type="post-tabs"] */
2022-09-21 21:21:27 +02:00
--uc-window-control-space : calc ( var ( --uc-window-control-width ) + var ( --uc-window-drag-space-post ) ) ;
2022-08-29 19:20:12 +02:00
}
: root : is ( [ tabsintitlebar ] , [ sizemode = "fullscreen" ] ) {
--uc-window-drag-space-pre : var ( --uc-title-pre-spacer , 40px ) ;
--uc-window-drag-space-post : var ( --uc-title-post-spacer , 40px ) ;
}
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) {
: root : is ( [ tabsintitlebar ] , [ sizemode = "fullscreen" ] ) {
--uc-window-control-width : 105px ;
}
}
@ media ( -moz-os-version : windows-win10 ) , ( -moz-platform : windows-win10 ) {
: root : is ( [ tabsintitlebar ] , [ sizemode = "fullscreen" ] ) {
--uc-window-control-width : 138px ;
}
}
2022-09-21 21:21:27 +02:00
@ media ( -moz-gtk-csd-available ) {
2022-08-29 19:20:12 +02:00
: root : is ( [ tabsintitlebar ] , [ sizemode = "fullscreen" ] ) {
2022-09-21 21:21:27 +02:00
/* 84px is default value of linux */
}
@ media ( -moz-gtk-csd-minimize-button ) , ( -moz-gtk-csd-maximize-button ) , ( -moz-gtk-csd-close-button ) {
: root : is ( [ tabsintitlebar ] , [ sizemode = "fullscreen" ] ) {
--uc-window-control-width : 28px ;
}
}
@ media ( -moz-gtk-csd-minimize-button ) and ( -moz-gtk-csd-maximize-button ) ,
( -moz-gtk-csd-minimize-button ) and ( -moz-gtk-csd-close-button ) ,
( -moz-gtk-csd-maximize-button ) and ( -moz-gtk-csd-close-button ) {
: root : is ( [ tabsintitlebar ] , [ sizemode = "fullscreen" ] ) {
--uc-window-control-width : 56px ;
}
}
@ media ( -moz-gtk-csd-minimize-button ) and ( -moz-gtk-csd-maximize-button ) and ( -moz-gtk-csd-close-button ) {
: root : is ( [ tabsintitlebar ] , [ sizemode = "fullscreen" ] ) {
--uc-window-control-width : 84px ;
}
2022-08-29 19:20:12 +02:00
}
}
2022-09-21 21:21:27 +02:00
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
: root [ tabsintitlebar ] {
--uc-window-control-width : 72px ;
}
: root [ sizemode = "fullscreen" ] {
--uc-window-control-space : 0px ;
}
}
2022-08-29 19:20:12 +02:00
: root : is ( [ tabsintitlebar ] [ sizemode = "maximized" ] , [ sizemode = "fullscreen" ] ) {
--uc-window-drag-space-pre : 0px ;
2022-09-21 21:21:27 +02:00
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) ,
( -moz-os-version : windows-win10 ) ,
( -moz-platform : windows-win10 ) {
: root : is ( [ tabsintitlebar ] , [ sizemode = "fullscreen" ] ) {
--uc-window-drag-space-pre : 0px ;
}
}
@ media ( -moz-gtk-csd-available ) {
@ media ( -moz-gtk-csd-reversed-placement : 0 ) {
: root : is ( [ tabsintitlebar ] , [ sizemode = "fullscreen" ] ) {
--uc-window-drag-space-pre : 0px ;
}
}
}
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
: root : is ( [ tabsintitlebar ] , [ sizemode = "fullscreen" ] ) {
--uc-window-control-space : 0px ;
}
}
@ media ( -moz-gtk-csd-available ) {
@ media ( -moz-gtk-csd-reversed-placement ) {
: root : is ( [ tabsintitlebar ] , [ sizemode = "fullscreen" ] ) {
--uc-window-control-space : 0px ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.as_titlebar" ) {
: root : is ( [ tabsintitlebar ] , [ sizemode = "fullscreen" ] ) # tabbrowser-tabs {
--uc-window-control-space : 0px ;
}
}
}
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.as_titlebar" ) {
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) ,
( -moz-os-version : windows-win10 ) ,
( -moz-platform : windows-win10 ) {
: root : is ( [ tabsintitlebar ] , [ sizemode = "fullscreen" ] ) {
--uc-window-control-space : 0px ;
}
}
@ media ( -moz-gtk-csd-available ) {
@ media ( -moz-gtk-csd-reversed-placement : 0 ) {
: root : is ( [ tabsintitlebar ] , [ sizemode = "fullscreen" ] ) {
--uc-window-control-space : 0px ;
}
}
}
}
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ media screen and ( max-width : 1100px ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) or not -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
: root : is ( [ tabsintitlebar ] , [ sizemode = "fullscreen" ] ) {
--uc-window-drag-space-pre : 0px ;
--uc-window-control-space : 0px ;
}
}
}
@ media screen and ( min-width : 1100px ) {
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) ,
( -moz-os-version : windows-win10 ) ,
( -moz-platform : windows-win10 ) {
: root : is ( [ tabsintitlebar ] , [ sizemode = "fullscreen" ] ) {
--uc-window-drag-space-pre : 0px ;
}
}
@ media ( -moz-gtk-csd-available ) {
@ media screen and ( min-width : 1100px ) and ( -moz-gtk-csd-reversed-placement : 0 ) {
: root : is ( [ tabsintitlebar ] , [ sizemode = "fullscreen" ] ) {
--uc-window-drag-space-pre : 0px ;
}
}
}
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
: root : is ( [ tabsintitlebar ] , [ sizemode = "fullscreen" ] ) {
--uc-window-control-space : 0px ;
}
}
@ media ( -moz-gtk-csd-available ) {
@ media screen and ( min-width : 1100px ) and ( -moz-gtk-csd-reversed-placement ) {
: root : is ( [ tabsintitlebar ] , [ sizemode = "fullscreen" ] ) {
--uc-window-control-space : 0px ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.as_titlebar" ) {
: root : is ( [ tabsintitlebar ] , [ sizemode = "fullscreen" ] ) # tabbrowser-tabs {
--uc-window-control-space : 0px ;
}
}
}
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.as_titlebar" ) {
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) ,
( -moz-os-version : windows-win10 ) ,
( -moz-platform : windows-win10 ) {
: root : is ( [ tabsintitlebar ] , [ sizemode = "fullscreen" ] ) {
--uc-window-control-space : 0px ;
}
}
@ media ( -moz-gtk-csd-available ) {
@ media screen and ( min-width : 1100px ) and ( -moz-gtk-csd-reversed-placement : 0 ) {
: root : is ( [ tabsintitlebar ] , [ sizemode = "fullscreen" ] ) {
--uc-window-control-space : 0px ;
}
}
}
}
}
}
}
}
@ supports selector ( : has ( a ) ) {
# navigator-toolbox : has ( # toolbar-menubar [ autohide = "false" ] ) {
--uc-window-drag-space-pre : 0px ;
--uc-window-control-space : 0px ;
}
2022-08-29 19:20:12 +02:00
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) or -moz-bool-pref ( "userChrome.tabbar.one_liner" ) or -moz-bool-pref (
"userChrome.hidden.tabbar"
) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) or -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
/*= Windows Control - Move to toolbar ========================================*/
/ * Source file https : / / github . com / MrOtherGuy / firefox-csshacks / tree / master / chrome / tabs_on_bottom . css made available under Mozilla Public License v . 2 . 0
See the above repository for updates as well as full license text . * /
2022-09-21 21:21:27 +02:00
/* Titlebar Button Box */
2022-08-29 19:20:12 +02:00
: root {
--uc-titlebar-padding : 0px ;
}
2022-09-21 21:21:27 +02:00
# navigator-toolbox {
padding-top : calc ( var ( --uc-menubar-height , 0px ) + var ( --uc-titlebar-padding ) ) ! important ;
2022-08-29 19:20:12 +02:00
}
# toolbar-menubar [ autohide = "true" ] > . titlebar-buttonbox-container ,
# TabsToolbar > . titlebar-buttonbox-container {
position : fixed ;
display : block ;
2022-09-21 21:21:27 +02:00
top : 0 ;
2022-08-29 19:20:12 +02:00
right : 0 ;
z-index : 1 ;
}
2022-09-21 21:21:27 +02:00
# toolbar-menubar [ autohide = "true" ] > . titlebar-buttonbox-container {
height : var ( --uc-titlebar-buttonbox-height , var ( --uc-navbar-height , 36px ) ) ;
}
@ media ( -moz-os-version : windows-win10 ) , ( -moz-platform : windows-win10 ) {
}
. titlebar-buttonbox-container > . titlebar-buttonbox {
height : 100 % ;
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
2022-09-21 21:21:27 +02:00
. titlebar-buttonbox-container > . titlebar-buttonbox {
margin-block : 10px ;
2022-08-29 19:20:12 +02:00
}
2022-09-21 21:21:27 +02:00
}
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
2022-08-29 19:20:12 +02:00
. titlebar-buttonbox-container {
left : 0 ;
right : unset ! important ;
}
}
2022-09-21 21:21:27 +02:00
@ media ( -moz-gtk-csd-available ) {
@ media ( -moz-gtk-csd-reversed-placement ) {
. titlebar-buttonbox-container {
left : 0 ;
right : unset ! important ;
}
}
2022-08-29 19:20:12 +02:00
}
2022-09-21 21:21:27 +02:00
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) ,
( -moz-os-version : windows-win10 ) ,
( -moz-platform : windows-win10 ) {
: root [ sizemode = "maximized" ] [ tabsintitlebar ] {
--uc-titlebar-padding : 8px ;
}
: root [ sizemode = "maximized" ] [ tabsintitlebar ] # navigator-toolbox-background {
margin-top : calc ( -1 * var ( --uc-titlebar-padding ) ) ;
}
: root [ sizemode = "normal" ] [ tabsintitlebar ] # titlebar ,
: root [ sizemode = "maximized" ] [ tabsintitlebar ] # titlebar {
appearance : none ! important ;
}
. browser-toolbar : not ( . titlebar-color ) {
background-clip : border-box ! important ;
}
}
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
# toolbar-menubar : not ( [ autohide = "true" ] ) {
visibility : visible ! important ;
height : 0 ;
}
}
2022-08-29 19:20:12 +02:00
@ supports not -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
opacity : 0 ;
visibility : collapse ;
}
}
@ supports -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
opacity : 1 ;
visibility : visible ;
}
@ supports -moz-bool-pref ( "userChrome.autohide.navbar" ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
opacity : 0 ;
visibility : collapse ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
@ supports -moz-bool-pref ( "userChrome.autohide.navbar" ) {
# navigator-toolbox : is ( : hover , : focus-within )
# toolbar-menubar [ inactive ] : not ( [ customizing ] )
> . titlebar-buttonbox-container {
opacity : 1 ;
visibility : visible ;
}
}
}
@ media ( prefers-reduced-motion : no-preference ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
transition : opacity 0 . 25s var ( --animation-easing-function ) var ( --uc-autohide-toolbar-delay , 600ms ) ,
visibility 100ms var ( --animation-easing-function ) 0 . 25s ! important ;
}
# navigator-toolbox : is ( : hover , : focus-within )
# toolbar-menubar [ inactive ] : not ( [ customizing ] )
> . titlebar-buttonbox-container {
transition-delay : 0s ! important ;
}
}
@ supports -moz-bool-pref ( "browser.fullscreen.autohide" ) {
: root [ sizemode = "fullscreen" ] # navigator-toolbox : not ( : hover ) . titlebar-buttonbox-container {
visibility : hidden ;
}
}
@ supports -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
: root [ inFullscreen ] : not ( [ macOSNativeFullscreen ] ) # toolbar-menubar {
visibility : visible ! important ;
min-height : 0 ! important ;
max-height : 0 ! important ;
}
: root [ inFullscreen ] : not ( [ macOSNativeFullscreen ] ) # menubar-items {
visibility : collapse ! important ;
}
}
/* At Activated Menubar */
: root : not ( [ chromehidden ~ = "menubar" ] , [ sizemode = "fullscreen" ] )
# toolbar-menubar : not ( [ autohide = "true" ] )
+ # TabsToolbar
> . titlebar-buttonbox-container {
display : block ! important ;
}
@ supports not -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
: root : not ( [ chromehidden ~ = "menubar" ] ) # toolbar-menubar : not ( [ autohide = "true" ] ) . titlebar-buttonbox-container {
visibility : hidden ;
}
}
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
/*= Windows Control - Move to toolbar ========================================*/
/ * Source file https : / / github . com / MrOtherGuy / firefox-csshacks / tree / master / chrome / tabs_on_bottom . css made available under Mozilla Public License v . 2 . 0
See the above repository for updates as well as full license text . * /
2022-09-21 21:21:27 +02:00
/* Titlebar Button Box */
2022-08-29 19:20:12 +02:00
: root {
--uc-titlebar-padding : 0px ;
}
2022-09-21 21:21:27 +02:00
# navigator-toolbox {
padding-top : calc ( var ( --uc-menubar-height , 0px ) + var ( --uc-titlebar-padding ) ) ! important ;
2022-08-29 19:20:12 +02:00
}
# toolbar-menubar [ autohide = "true" ] > . titlebar-buttonbox-container ,
# TabsToolbar > . titlebar-buttonbox-container {
position : fixed ;
display : block ;
2022-09-21 21:21:27 +02:00
top : 0 ;
2022-08-29 19:20:12 +02:00
right : 0 ;
z-index : 1 ;
}
2022-09-21 21:21:27 +02:00
# toolbar-menubar [ autohide = "true" ] > . titlebar-buttonbox-container {
height : var ( --uc-titlebar-buttonbox-height , var ( --uc-navbar-height , 36px ) ) ;
}
@ media ( -moz-os-version : windows-win10 ) , ( -moz-platform : windows-win10 ) {
}
. titlebar-buttonbox-container > . titlebar-buttonbox {
height : 100 % ;
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
2022-09-21 21:21:27 +02:00
. titlebar-buttonbox-container > . titlebar-buttonbox {
margin-block : 10px ;
2022-08-29 19:20:12 +02:00
}
2022-09-21 21:21:27 +02:00
}
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
2022-08-29 19:20:12 +02:00
. titlebar-buttonbox-container {
left : 0 ;
right : unset ! important ;
}
}
2022-09-21 21:21:27 +02:00
@ media ( -moz-gtk-csd-available ) {
@ media ( -moz-gtk-csd-reversed-placement ) {
. titlebar-buttonbox-container {
left : 0 ;
right : unset ! important ;
}
}
}
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) ,
( -moz-os-version : windows-win10 ) ,
( -moz-platform : windows-win10 ) {
: root [ sizemode = "maximized" ] [ tabsintitlebar ] {
--uc-titlebar-padding : 8px ;
}
: root [ sizemode = "maximized" ] [ tabsintitlebar ] # navigator-toolbox-background {
margin-top : calc ( -1 * var ( --uc-titlebar-padding ) ) ;
}
: root [ sizemode = "normal" ] [ tabsintitlebar ] # titlebar ,
: root [ sizemode = "maximized" ] [ tabsintitlebar ] # titlebar {
appearance : none ! important ;
}
. browser-toolbar : not ( . titlebar-color ) {
background-clip : border-box ! important ;
}
}
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
# toolbar-menubar : not ( [ autohide = "true" ] ) {
visibility : visible ! important ;
height : 0 ;
}
}
2022-08-29 19:20:12 +02:00
@ supports not -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
opacity : 0 ;
visibility : collapse ;
}
}
@ supports -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
opacity : 1 ;
visibility : visible ;
}
@ supports -moz-bool-pref ( "userChrome.autohide.navbar" ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
opacity : 0 ;
visibility : collapse ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
@ supports -moz-bool-pref ( "userChrome.autohide.navbar" ) {
# navigator-toolbox : is ( : hover , : focus-within )
# toolbar-menubar [ inactive ] : not ( [ customizing ] )
> . titlebar-buttonbox-container {
opacity : 1 ;
visibility : visible ;
}
}
}
@ media ( prefers-reduced-motion : no-preference ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
transition : opacity 0 . 25s var ( --animation-easing-function ) var ( --uc-autohide-toolbar-delay , 600ms ) ,
visibility 100ms var ( --animation-easing-function ) 0 . 25s ! important ;
}
# navigator-toolbox : is ( : hover , : focus-within )
# toolbar-menubar [ inactive ] : not ( [ customizing ] )
> . titlebar-buttonbox-container {
transition-delay : 0s ! important ;
}
}
2022-09-21 21:21:27 +02:00
@ supports -moz-bool-pref ( "browser.fullscreen.autohide" ) {
: root [ sizemode = "fullscreen" ] # navigator-toolbox : not ( : hover ) . titlebar-buttonbox-container {
visibility : hidden ;
}
}
@ supports -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
: root [ inFullscreen ] : not ( [ macOSNativeFullscreen ] ) # toolbar-menubar {
visibility : visible ! important ;
min-height : 0 ! important ;
max-height : 0 ! important ;
}
: root [ inFullscreen ] : not ( [ macOSNativeFullscreen ] ) # menubar-items {
visibility : collapse ! important ;
}
}
/* At Activated Menubar */
: root : not ( [ chromehidden ~ = "menubar" ] , [ sizemode = "fullscreen" ] )
# toolbar-menubar : not ( [ autohide = "true" ] )
+ # TabsToolbar
> . titlebar-buttonbox-container {
display : block ! important ;
}
@ supports not -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
: root : not ( [ chromehidden ~ = "menubar" ] ) # toolbar-menubar : not ( [ autohide = "true" ] ) . titlebar-buttonbox-container {
visibility : hidden ;
}
}
}
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
/*= Windows Control - Move to toolbar ========================================*/
/ * Source file https : / / github . com / MrOtherGuy / firefox-csshacks / tree / master / chrome / tabs_on_bottom . css made available under Mozilla Public License v . 2 . 0
See the above repository for updates as well as full license text . * /
/* Titlebar Button Box */
: root {
--uc-titlebar-padding : 0px ;
}
# navigator-toolbox {
padding-top : calc ( var ( --uc-menubar-height , 0px ) + var ( --uc-titlebar-padding ) ) ! important ;
}
# toolbar-menubar [ autohide = "true" ] > . titlebar-buttonbox-container ,
# TabsToolbar > . titlebar-buttonbox-container {
position : fixed ;
display : block ;
top : 0 ;
right : 0 ;
z-index : 1 ;
}
# toolbar-menubar [ autohide = "true" ] > . titlebar-buttonbox-container {
height : var ( --uc-titlebar-buttonbox-height , var ( --uc-navbar-height , 36px ) ) ;
}
@ media ( -moz-os-version : windows-win10 ) , ( -moz-platform : windows-win10 ) {
}
2022-08-29 19:20:12 +02:00
. titlebar-buttonbox-container > . titlebar-buttonbox {
height : 100 % ;
}
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
. titlebar-buttonbox-container > . titlebar-buttonbox {
margin-block : 10px ;
}
}
2022-09-21 21:21:27 +02:00
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
. titlebar-buttonbox-container {
left : 0 ;
right : unset ! important ;
}
}
@ media ( -moz-gtk-csd-available ) {
@ media ( -moz-gtk-csd-reversed-placement ) {
. titlebar-buttonbox-container {
left : 0 ;
right : unset ! important ;
}
}
}
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) ,
( -moz-os-version : windows-win10 ) ,
( -moz-platform : windows-win10 ) {
: root [ sizemode = "maximized" ] [ tabsintitlebar ] {
--uc-titlebar-padding : 8px ;
}
: root [ sizemode = "maximized" ] [ tabsintitlebar ] # navigator-toolbox-background {
margin-top : calc ( -1 * var ( --uc-titlebar-padding ) ) ;
}
: root [ sizemode = "normal" ] [ tabsintitlebar ] # titlebar ,
: root [ sizemode = "maximized" ] [ tabsintitlebar ] # titlebar {
appearance : none ! important ;
}
. browser-toolbar : not ( . titlebar-color ) {
background-clip : border-box ! important ;
}
}
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
# toolbar-menubar : not ( [ autohide = "true" ] ) {
visibility : visible ! important ;
height : 0 ;
}
}
@ supports not -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
opacity : 0 ;
visibility : collapse ;
}
}
@ supports -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
opacity : 1 ;
visibility : visible ;
}
@ supports -moz-bool-pref ( "userChrome.autohide.navbar" ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
opacity : 0 ;
visibility : collapse ;
}
}
2022-08-29 19:20:12 +02:00
}
2022-09-21 21:21:27 +02:00
@ supports -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
@ supports -moz-bool-pref ( "userChrome.autohide.navbar" ) {
# navigator-toolbox : is ( : hover , : focus-within )
# toolbar-menubar [ inactive ] : not ( [ customizing ] )
> . titlebar-buttonbox-container {
opacity : 1 ;
visibility : visible ;
}
}
2022-08-29 19:20:12 +02:00
}
2022-09-21 21:21:27 +02:00
@ media ( prefers-reduced-motion : no-preference ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
transition : opacity 0 . 25s var ( --animation-easing-function ) var ( --uc-autohide-toolbar-delay , 600ms ) ,
visibility 100ms var ( --animation-easing-function ) 0 . 25s ! important ;
}
# navigator-toolbox : is ( : hover , : focus-within )
# toolbar-menubar [ inactive ] : not ( [ customizing ] )
> . titlebar-buttonbox-container {
transition-delay : 0s ! important ;
}
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "browser.fullscreen.autohide" ) {
: root [ sizemode = "fullscreen" ] # navigator-toolbox : not ( : hover ) . titlebar-buttonbox-container {
visibility : hidden ;
}
}
@ supports -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
: root [ inFullscreen ] : not ( [ macOSNativeFullscreen ] ) # toolbar-menubar {
visibility : visible ! important ;
min-height : 0 ! important ;
max-height : 0 ! important ;
}
: root [ inFullscreen ] : not ( [ macOSNativeFullscreen ] ) # menubar-items {
visibility : collapse ! important ;
}
}
/* At Activated Menubar */
: root : not ( [ chromehidden ~ = "menubar" ] , [ sizemode = "fullscreen" ] )
# toolbar-menubar : not ( [ autohide = "true" ] )
+ # TabsToolbar
> . titlebar-buttonbox-container {
display : block ! important ;
}
@ supports not -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
: root : not ( [ chromehidden ~ = "menubar" ] ) # toolbar-menubar : not ( [ autohide = "true" ] ) . titlebar-buttonbox-container {
visibility : hidden ;
}
}
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) or -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
@ media screen and ( max-width : 1100px ) {
/*= Windows Control - Move to toolbar ========================================*/
/ * Source file https : / / github . com / MrOtherGuy / firefox-csshacks / tree / master / chrome / tabs_on_bottom . css made available under Mozilla Public License v . 2 . 0
See the above repository for updates as well as full license text . * /
2022-09-21 21:21:27 +02:00
/* Titlebar Button Box */
2022-08-29 19:20:12 +02:00
: root {
--uc-titlebar-padding : 0px ;
}
2022-09-21 21:21:27 +02:00
# navigator-toolbox {
padding-top : calc ( var ( --uc-menubar-height , 0px ) + var ( --uc-titlebar-padding ) ) ! important ;
2022-08-29 19:20:12 +02:00
}
# toolbar-menubar [ autohide = "true" ] > . titlebar-buttonbox-container ,
# TabsToolbar > . titlebar-buttonbox-container {
position : fixed ;
display : block ;
2022-09-21 21:21:27 +02:00
top : 0 ;
2022-08-29 19:20:12 +02:00
right : 0 ;
z-index : 1 ;
}
2022-09-21 21:21:27 +02:00
# toolbar-menubar [ autohide = "true" ] > . titlebar-buttonbox-container {
height : var ( --uc-titlebar-buttonbox-height , var ( --uc-navbar-height , 36px ) ) ;
}
@ media ( -moz-os-version : windows-win10 ) , ( -moz-platform : windows-win10 ) {
}
. titlebar-buttonbox-container > . titlebar-buttonbox {
height : 100 % ;
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
2022-09-21 21:21:27 +02:00
. titlebar-buttonbox-container > . titlebar-buttonbox {
margin-block : 10px ;
2022-08-29 19:20:12 +02:00
}
2022-09-21 21:21:27 +02:00
}
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
2022-08-29 19:20:12 +02:00
. titlebar-buttonbox-container {
left : 0 ;
right : unset ! important ;
}
}
2022-09-21 21:21:27 +02:00
@ media ( -moz-gtk-csd-available ) {
@ media screen and ( max-width : 1100px ) and ( -moz-gtk-csd-reversed-placement ) {
. titlebar-buttonbox-container {
left : 0 ;
right : unset ! important ;
}
}
2022-08-29 19:20:12 +02:00
}
2022-09-21 21:21:27 +02:00
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) ,
( -moz-os-version : windows-win10 ) ,
( -moz-platform : windows-win10 ) {
: root [ sizemode = "maximized" ] [ tabsintitlebar ] {
--uc-titlebar-padding : 8px ;
}
: root [ sizemode = "maximized" ] [ tabsintitlebar ] # navigator-toolbox-background {
margin-top : calc ( -1 * var ( --uc-titlebar-padding ) ) ;
}
: root [ sizemode = "normal" ] [ tabsintitlebar ] # titlebar ,
: root [ sizemode = "maximized" ] [ tabsintitlebar ] # titlebar {
appearance : none ! important ;
}
. browser-toolbar : not ( . titlebar-color ) {
background-clip : border-box ! important ;
}
}
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
# toolbar-menubar : not ( [ autohide = "true" ] ) {
visibility : visible ! important ;
height : 0 ;
}
}
2022-08-29 19:20:12 +02:00
@ supports not -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
opacity : 0 ;
visibility : collapse ;
}
}
@ supports -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
opacity : 1 ;
visibility : visible ;
}
@ supports -moz-bool-pref ( "userChrome.autohide.navbar" ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
opacity : 0 ;
visibility : collapse ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
@ supports -moz-bool-pref ( "userChrome.autohide.navbar" ) {
# navigator-toolbox : is ( : hover , : focus-within )
# toolbar-menubar [ inactive ] : not ( [ customizing ] )
> . titlebar-buttonbox-container {
opacity : 1 ;
visibility : visible ;
}
}
}
/* At Activated Menubar */
}
@ media screen and ( max-width : 1100px ) and ( prefers-reduced-motion : no-preference ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
transition : opacity 0 . 25s var ( --animation-easing-function ) var ( --uc-autohide-toolbar-delay , 600ms ) ,
visibility 100ms var ( --animation-easing-function ) 0 . 25s ! important ;
}
# navigator-toolbox : is ( : hover , : focus-within )
# toolbar-menubar [ inactive ] : not ( [ customizing ] )
> . titlebar-buttonbox-container {
transition-delay : 0s ! important ;
}
}
@ media screen and ( max-width : 1100px ) {
@ supports -moz-bool-pref ( "browser.fullscreen.autohide" ) {
: root [ sizemode = "fullscreen" ] # navigator-toolbox : not ( : hover ) . titlebar-buttonbox-container {
visibility : hidden ;
}
}
}
@ media screen and ( max-width : 1100px ) {
@ supports -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
: root [ inFullscreen ] : not ( [ macOSNativeFullscreen ] ) # toolbar-menubar {
visibility : visible ! important ;
min-height : 0 ! important ;
max-height : 0 ! important ;
}
: root [ inFullscreen ] : not ( [ macOSNativeFullscreen ] ) # menubar-items {
visibility : collapse ! important ;
}
}
}
@ media screen and ( max-width : 1100px ) {
: root : not ( [ chromehidden ~ = "menubar" ] , [ sizemode = "fullscreen" ] )
# toolbar-menubar : not ( [ autohide = "true" ] )
+ # TabsToolbar
> . titlebar-buttonbox-container {
display : block ! important ;
}
}
@ media screen and ( max-width : 1100px ) {
@ supports not -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
: root : not ( [ chromehidden ~ = "menubar" ] ) # toolbar-menubar : not ( [ autohide = "true" ] ) . titlebar-buttonbox-container {
visibility : hidden ;
}
}
}
}
2022-09-21 21:21:27 +02:00
@ media screen and ( min-width : 1100px ) {
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
2022-08-29 19:20:12 +02:00
/*= Windows Control - Move to toolbar ========================================*/
/ * Source file https : / / github . com / MrOtherGuy / firefox-csshacks / tree / master / chrome / tabs_on_bottom . css made available under Mozilla Public License v . 2 . 0
See the above repository for updates as well as full license text . * /
2022-09-21 21:21:27 +02:00
/* Titlebar Button Box */
2022-08-29 19:20:12 +02:00
: root {
--uc-titlebar-padding : 0px ;
}
2022-09-21 21:21:27 +02:00
# navigator-toolbox {
padding-top : calc ( var ( --uc-menubar-height , 0px ) + var ( --uc-titlebar-padding ) ) ! important ;
2022-08-29 19:20:12 +02:00
}
# toolbar-menubar [ autohide = "true" ] > . titlebar-buttonbox-container ,
# TabsToolbar > . titlebar-buttonbox-container {
position : fixed ;
display : block ;
2022-09-21 21:21:27 +02:00
top : 0 ;
2022-08-29 19:20:12 +02:00
right : 0 ;
z-index : 1 ;
}
2022-09-21 21:21:27 +02:00
# toolbar-menubar [ autohide = "true" ] > . titlebar-buttonbox-container {
height : var ( --uc-titlebar-buttonbox-height , var ( --uc-navbar-height , 36px ) ) ;
}
@ media ( -moz-os-version : windows-win10 ) , ( -moz-platform : windows-win10 ) {
}
. titlebar-buttonbox-container > . titlebar-buttonbox {
height : 100 % ;
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
2022-09-21 21:21:27 +02:00
. titlebar-buttonbox-container > . titlebar-buttonbox {
margin-block : 10px ;
2022-08-29 19:20:12 +02:00
}
2022-09-21 21:21:27 +02:00
}
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
2022-08-29 19:20:12 +02:00
. titlebar-buttonbox-container {
left : 0 ;
right : unset ! important ;
}
}
2022-09-21 21:21:27 +02:00
@ media ( -moz-gtk-csd-available ) {
@ media screen and ( min-width : 1100px ) and ( -moz-gtk-csd-reversed-placement ) {
. titlebar-buttonbox-container {
left : 0 ;
right : unset ! important ;
}
}
2022-08-29 19:20:12 +02:00
}
2022-09-21 21:21:27 +02:00
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) ,
( -moz-os-version : windows-win10 ) ,
( -moz-platform : windows-win10 ) {
: root [ sizemode = "maximized" ] [ tabsintitlebar ] {
--uc-titlebar-padding : 8px ;
}
: root [ sizemode = "maximized" ] [ tabsintitlebar ] # navigator-toolbox-background {
margin-top : calc ( -1 * var ( --uc-titlebar-padding ) ) ;
}
: root [ sizemode = "normal" ] [ tabsintitlebar ] # titlebar ,
: root [ sizemode = "maximized" ] [ tabsintitlebar ] # titlebar {
appearance : none ! important ;
}
. browser-toolbar : not ( . titlebar-color ) {
background-clip : border-box ! important ;
}
}
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
# toolbar-menubar : not ( [ autohide = "true" ] ) {
visibility : visible ! important ;
height : 0 ;
}
}
2022-08-29 19:20:12 +02:00
@ supports not -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
opacity : 0 ;
visibility : collapse ;
}
}
@ supports -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
opacity : 1 ;
visibility : visible ;
}
@ supports -moz-bool-pref ( "userChrome.autohide.navbar" ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
opacity : 0 ;
visibility : collapse ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
@ supports -moz-bool-pref ( "userChrome.autohide.navbar" ) {
# navigator-toolbox : is ( : hover , : focus-within )
# toolbar-menubar [ inactive ] : not ( [ customizing ] )
> . titlebar-buttonbox-container {
opacity : 1 ;
visibility : visible ;
}
}
}
2022-09-21 21:21:27 +02:00
@ media screen and ( min-width : 1100px ) and ( prefers-reduced-motion : no-preference ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
transition : opacity 0 . 25s var ( --animation-easing-function ) var ( --uc-autohide-toolbar-delay , 600ms ) ,
visibility 100ms var ( --animation-easing-function ) 0 . 25s ! important ;
}
# navigator-toolbox : is ( : hover , : focus-within )
# toolbar-menubar [ inactive ] : not ( [ customizing ] )
> . titlebar-buttonbox-container {
transition-delay : 0s ! important ;
}
}
@ supports -moz-bool-pref ( "browser.fullscreen.autohide" ) {
: root [ sizemode = "fullscreen" ] # navigator-toolbox : not ( : hover ) . titlebar-buttonbox-container {
visibility : hidden ;
}
}
@ supports -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
: root [ inFullscreen ] : not ( [ macOSNativeFullscreen ] ) # toolbar-menubar {
visibility : visible ! important ;
min-height : 0 ! important ;
max-height : 0 ! important ;
}
: root [ inFullscreen ] : not ( [ macOSNativeFullscreen ] ) # menubar-items {
visibility : collapse ! important ;
}
}
2022-08-29 19:20:12 +02:00
/* At Activated Menubar */
2022-09-21 21:21:27 +02:00
: root : not ( [ chromehidden ~ = "menubar" ] , [ sizemode = "fullscreen" ] )
# toolbar-menubar : not ( [ autohide = "true" ] )
+ # TabsToolbar
> . titlebar-buttonbox-container {
display : block ! important ;
2022-08-29 19:20:12 +02:00
}
2022-09-21 21:21:27 +02:00
@ supports not -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
: root : not ( [ chromehidden ~ = "menubar" ] ) # toolbar-menubar : not ( [ autohide = "true" ] ) . titlebar-buttonbox-container {
visibility : hidden ;
}
2022-08-29 19:20:12 +02:00
}
}
2022-09-21 21:21:27 +02:00
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
/*= Windows Control - Move to toolbar ========================================*/
/ * Source file https : / / github . com / MrOtherGuy / firefox-csshacks / tree / master / chrome / tabs_on_bottom . css made available under Mozilla Public License v . 2 . 0
See the above repository for updates as well as full license text . * /
/* Titlebar Button Box */
: root {
--uc-titlebar-padding : 0px ;
}
# navigator-toolbox {
padding-top : calc ( var ( --uc-menubar-height , 0px ) + var ( --uc-titlebar-padding ) ) ! important ;
}
# toolbar-menubar [ autohide = "true" ] > . titlebar-buttonbox-container ,
# TabsToolbar > . titlebar-buttonbox-container {
position : fixed ;
display : block ;
top : 0 ;
right : 0 ;
z-index : 1 ;
}
# toolbar-menubar [ autohide = "true" ] > . titlebar-buttonbox-container {
height : var ( --uc-titlebar-buttonbox-height , var ( --uc-navbar-height , 36px ) ) ;
}
@ media ( -moz-os-version : windows-win10 ) , ( -moz-platform : windows-win10 ) {
}
2022-08-29 19:20:12 +02:00
. titlebar-buttonbox-container > . titlebar-buttonbox {
height : 100 % ;
}
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
. titlebar-buttonbox-container > . titlebar-buttonbox {
margin-block : 10px ;
}
}
2022-09-21 21:21:27 +02:00
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
. titlebar-buttonbox-container {
left : 0 ;
right : unset ! important ;
}
}
@ media ( -moz-gtk-csd-available ) {
@ media screen and ( min-width : 1100px ) and ( -moz-gtk-csd-reversed-placement ) {
. titlebar-buttonbox-container {
left : 0 ;
right : unset ! important ;
}
}
}
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) ,
( -moz-os-version : windows-win10 ) ,
( -moz-platform : windows-win10 ) {
: root [ sizemode = "maximized" ] [ tabsintitlebar ] {
--uc-titlebar-padding : 8px ;
}
: root [ sizemode = "maximized" ] [ tabsintitlebar ] # navigator-toolbox-background {
margin-top : calc ( -1 * var ( --uc-titlebar-padding ) ) ;
}
: root [ sizemode = "normal" ] [ tabsintitlebar ] # titlebar ,
: root [ sizemode = "maximized" ] [ tabsintitlebar ] # titlebar {
appearance : none ! important ;
}
. browser-toolbar : not ( . titlebar-color ) {
background-clip : border-box ! important ;
}
}
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
# toolbar-menubar : not ( [ autohide = "true" ] ) {
visibility : visible ! important ;
height : 0 ;
}
}
@ supports not -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
opacity : 0 ;
visibility : collapse ;
}
}
@ supports -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
opacity : 1 ;
visibility : visible ;
}
@ supports -moz-bool-pref ( "userChrome.autohide.navbar" ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
opacity : 0 ;
visibility : collapse ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
@ supports -moz-bool-pref ( "userChrome.autohide.navbar" ) {
# navigator-toolbox : is ( : hover , : focus-within )
# toolbar-menubar [ inactive ] : not ( [ customizing ] )
> . titlebar-buttonbox-container {
opacity : 1 ;
visibility : visible ;
}
}
2022-08-29 19:20:12 +02:00
}
2022-09-21 21:21:27 +02:00
@ media screen and ( min-width : 1100px ) and ( prefers-reduced-motion : no-preference ) {
# toolbar-menubar [ inactive ] > . titlebar-buttonbox-container {
transition : opacity 0 . 25s var ( --animation-easing-function ) var ( --uc-autohide-toolbar-delay , 600ms ) ,
visibility 100ms var ( --animation-easing-function ) 0 . 25s ! important ;
}
# navigator-toolbox : is ( : hover , : focus-within )
# toolbar-menubar [ inactive ] : not ( [ customizing ] )
> . titlebar-buttonbox-container {
transition-delay : 0s ! important ;
}
2022-08-29 19:20:12 +02:00
}
@ supports -moz-bool-pref ( "browser.fullscreen.autohide" ) {
: root [ sizemode = "fullscreen" ] # navigator-toolbox : not ( : hover ) . titlebar-buttonbox-container {
visibility : hidden ;
}
}
@ supports -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
: root [ inFullscreen ] : not ( [ macOSNativeFullscreen ] ) # toolbar-menubar {
visibility : visible ! important ;
min-height : 0 ! important ;
max-height : 0 ! important ;
}
: root [ inFullscreen ] : not ( [ macOSNativeFullscreen ] ) # menubar-items {
visibility : collapse ! important ;
}
}
2022-09-21 21:21:27 +02:00
/* At Activated Menubar */
2022-08-29 19:20:12 +02:00
: root : not ( [ chromehidden ~ = "menubar" ] , [ sizemode = "fullscreen" ] )
# toolbar-menubar : not ( [ autohide = "true" ] )
+ # TabsToolbar
> . titlebar-buttonbox-container {
display : block ! important ;
}
@ supports not -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
: root : not ( [ chromehidden ~ = "menubar" ] ) # toolbar-menubar : not ( [ autohide = "true" ] ) . titlebar-buttonbox-container {
visibility : hidden ;
}
}
}
}
}
}
/*= Navbar - Padding for window controls =====================================*/
/* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */
2022-09-21 21:21:27 +02:00
# nav-bar {
border-inline-style : solid ! important ;
border-inline-color : transparent ;
}
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) ,
( -moz-os-version : windows-win10 ) ,
( -moz-platform : windows-win10 ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
# nav-bar {
border-inline-start-width : var ( --uc-window-drag-space-pre ) ;
border-inline-end-width : var ( --uc-window-control-space ) ;
2022-08-29 19:20:12 +02:00
}
2022-09-21 21:21:27 +02:00
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.combine_navbar" ) {
# nav-bar {
border-inline-start-width : var ( --uc-window-drag-space-pre ) ;
border-inline-end-width : var ( --uc-window-control-space ) ;
2022-08-29 19:20:12 +02:00
}
}
2022-09-21 21:21:27 +02:00
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.combine_navbar" ) {
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) or -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
@ media screen and ( max-width : 1100px ) {
# nav-bar {
border-inline-start-width : var ( --uc-window-drag-space-pre ) ;
border-inline-end-width : var ( --uc-window-control-space ) ;
}
2022-08-29 19:20:12 +02:00
}
}
}
2022-09-21 21:21:27 +02:00
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.combine_navbar" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
# nav-bar {
margin-inline-start : var ( --uc-window-drag-space-pre ) ! important ;
}
2022-08-29 19:20:12 +02:00
}
2022-09-21 21:21:27 +02:00
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
# nav-bar {
margin-inline-end : var ( --uc-window-control-space ) ! important ;
2022-08-29 19:20:12 +02:00
}
}
}
2022-09-21 21:21:27 +02:00
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ media screen and ( min-width : 1100px ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
# nav-bar {
margin-inline-start : var ( --uc-window-drag-space-pre ) ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
# nav-bar {
margin-inline-end : var ( --uc-window-control-space ) ! important ;
}
2022-08-29 19:20:12 +02:00
}
}
}
}
}
}
2022-09-21 21:21:27 +02:00
@ media ( -moz-gtk-csd-available ) {
@ media ( -moz-gtk-csd-reversed-placement : 0 ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
# nav-bar {
border-inline-start-width : var ( --uc-window-drag-space-pre ) ;
border-inline-end-width : var ( --uc-window-control-space ) ;
2022-08-29 19:20:12 +02:00
}
}
2022-09-21 21:21:27 +02:00
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.combine_navbar" ) {
2022-08-29 19:20:12 +02:00
# nav-bar {
2022-09-21 21:21:27 +02:00
border-inline-start-width : var ( --uc-window-drag-space-pre ) ;
border-inline-end-width : var ( --uc-window-control-space ) ;
2022-08-29 19:20:12 +02:00
}
}
2022-09-21 21:21:27 +02:00
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.combine_navbar" ) {
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) or -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
@ media screen and ( -moz-gtk-csd-reversed-placement : 0 ) and ( max-width : 1100px ) {
# nav-bar {
border-inline-start-width : var ( --uc-window-drag-space-pre ) ;
border-inline-end-width : var ( --uc-window-control-space ) ;
}
}
2022-08-29 19:20:12 +02:00
}
}
}
2022-09-21 21:21:27 +02:00
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.combine_navbar" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
# nav-bar {
margin-inline-start : var ( --uc-window-drag-space-pre ) ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
# nav-bar {
margin-inline-end : var ( --uc-window-control-space ) ! important ;
}
2022-08-29 19:20:12 +02:00
}
}
2022-09-21 21:21:27 +02:00
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ media screen and ( -moz-gtk-csd-reversed-placement : 0 ) and ( min-width : 1100px ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
# nav-bar {
margin-inline-start : var ( --uc-window-drag-space-pre ) ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
# nav-bar {
margin-inline-end : var ( --uc-window-control-space ) ! important ;
}
}
2022-08-29 19:20:12 +02:00
}
}
}
}
}
}
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
2022-09-21 21:21:27 +02:00
# nav-bar {
border-inline-start-width : var ( --uc-window-control-space ) ;
2022-08-29 19:20:12 +02:00
border-inline-end-width : var ( --uc-window-drag-space-pre ) ;
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.combine_navbar" ) {
2022-09-21 21:21:27 +02:00
# nav-bar {
border-inline-start-width : var ( --uc-window-control-space ) ;
2022-08-29 19:20:12 +02:00
border-inline-end-width : var ( --uc-window-drag-space-pre ) ;
}
}
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.combine_navbar" ) {
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) or -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
@ media screen and ( max-width : 1100px ) {
2022-09-21 21:21:27 +02:00
# nav-bar {
border-inline-start-width : var ( --uc-window-control-space ) ;
2022-08-29 19:20:12 +02:00
border-inline-end-width : var ( --uc-window-drag-space-pre ) ;
}
}
}
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.combine_navbar" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
2022-09-21 21:21:27 +02:00
# nav-bar {
margin-inline-start : var ( --uc-window-control-space , 0px ) ! important ;
2022-08-29 19:20:12 +02:00
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
2022-09-21 21:21:27 +02:00
# nav-bar {
margin-inline-end : var ( --uc-window-drag-space-pre , 0px ) ! important ;
2022-08-29 19:20:12 +02:00
}
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ media screen and ( min-width : 1100px ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
2022-09-21 21:21:27 +02:00
# nav-bar {
margin-inline-start : var ( --uc-window-control-space , 0px ) ! important ;
2022-08-29 19:20:12 +02:00
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
2022-09-21 21:21:27 +02:00
# nav-bar {
margin-inline-end : var ( --uc-window-drag-space-pre , 0px ) ! important ;
}
}
}
}
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.combine_navbar" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
# TabsToolbar {
margin-inline-end : var ( --uc-window-drag-space-pre , 0px ) ! important ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ media screen and ( min-width : 1100px ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
# TabsToolbar {
margin-inline-end : var ( --uc-window-drag-space-pre , 0px ) ! important ;
2022-08-29 19:20:12 +02:00
}
}
}
}
}
2022-09-21 21:21:27 +02:00
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
# TabsToolbar {
margin-inline-start : var ( --uc-window-control-width , 0px ) ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ media screen and ( min-width : 1100px ) {
# TabsToolbar {
margin-inline-start : var ( --uc-window-control-width , 0px ) ! important ;
}
}
}
}
2022-08-29 19:20:12 +02:00
}
2022-09-21 21:21:27 +02:00
}
@ media ( -moz-gtk-csd-available ) {
@ media ( -moz-gtk-csd-reversed-placement ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
# nav-bar {
border-inline-start-width : var ( --uc-window-control-space ) ;
border-inline-end-width : var ( --uc-window-drag-space-pre ) ;
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.combine_navbar" ) {
# nav-bar {
border-inline-start-width : var ( --uc-window-control-space ) ;
border-inline-end-width : var ( --uc-window-drag-space-pre ) ;
}
}
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.combine_navbar" ) {
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) or -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
@ media screen and ( -moz-gtk-csd-reversed-placement ) and ( max-width : 1100px ) {
# nav-bar {
border-inline-start-width : var ( --uc-window-control-space ) ;
border-inline-end-width : var ( --uc-window-drag-space-pre ) ;
}
}
}
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.combine_navbar" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
# nav-bar {
margin-inline-start : var ( --uc-window-control-space , 0px ) ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
# nav-bar {
margin-inline-end : var ( --uc-window-drag-space-pre , 0px ) ! important ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ media screen and ( -moz-gtk-csd-reversed-placement ) and ( min-width : 1100px ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
# nav-bar {
margin-inline-start : var ( --uc-window-control-space , 0px ) ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
# nav-bar {
margin-inline-end : var ( --uc-window-drag-space-pre , 0px ) ! important ;
}
}
}
}
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.combine_navbar" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
# TabsToolbar {
margin-inline-end : var ( --uc-window-drag-space-pre , 0px ) ! important ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ media screen and ( -moz-gtk-csd-reversed-placement ) and ( min-width : 1100px ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
# TabsToolbar {
margin-inline-end : var ( --uc-window-drag-space-pre , 0px ) ! important ;
}
}
}
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
# TabsToolbar {
margin-inline-start : var ( --uc-window-control-width , 0px ) ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ media screen and ( -moz-gtk-csd-reversed-placement ) and ( min-width : 1100px ) {
# TabsToolbar {
margin-inline-start : var ( --uc-window-control-width , 0px ) ! important ;
}
}
}
}
}
}
}
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
2022-08-29 19:20:12 +02:00
: root [ sizemode = "fullscreen" ] # TabsToolbar > . titlebar-buttonbox-container : last-child ,
: root [ sizemode = "fullscreen" ] # window-controls {
right : unset ;
}
}
}
/*= Tab Bar - Show only current tab ==========================================*/
@ supports -moz-bool-pref ( "userChrome.tabbar.as_titlebar" ) {
: root : not ( [ tabsintitlebar = "true" ] ) # tabbrowser-tabs ,
# scrollbutton-up ,
# scrollbutton-down ,
. titlebar-spacer [ type = "pre-tabs" ] ,
spacer : is ( [ part = "overflow-start-indicator" ] , [ part = "overflow-end-indicator" ] ) ,
. tabbrowser-tab : not ( [ selected = "true" ] ) ,
. tabbrowser-tab [ selected = "true" ] . tab-background ,
. tabbrowser-tab [ selected = "true" ] . tab-stack : is ( :: before , :: after ) ,
. tabbrowser-tab [ selected = "true" ] . tab-close-button ,
# tabs-newtab-button {
display : none ! important ;
}
. tabbrowser-tab [ selected = "true" ] {
-moz-window-dragging : drag ;
--tab-max-width : 100vw ;
2022-09-21 21:21:27 +02:00
min-width : calc ( var ( --uc-tabbar-width , 100vw ) - var ( --uc-window-control-space ) ) ! important ;
2022-08-29 19:20:12 +02:00
max-width : var ( --tab-max-width ) ! important ;
margin-inline-start : calc ( var ( --tab-shadow-max-size ) * -1 ) ! important ;
}
. tabbrowser-tab [ selected = "true" ] [ pinned = "true" ] {
-moz-box-flex : 100 ;
max-width : var ( --tab-max-width ) ! important ;
}
. tabbrowser-tab [ selected = "true" ] . tab-label-container {
margin-inline : 0 ! important ;
}
. tab-content {
margin-inline : auto ;
width : 100 % ;
}
/* Pinned */
# tabbrowser-tabs [ positionpinnedtabs ] > # tabbrowser-arrowscrollbox > . tabbrowser-tab [ pinned ] [ selected = "true" ] {
position : relative ! important ;
}
# tabbrowser-tabs {
--tab-overflow-pinned-tabs-width : 0 ! important ;
2022-12-04 09:37:08 +01:00
padding-inline : 0 ! important ; /* Original: var(--tab-overflow-pinned-tabs-width) 0; */
2022-08-29 19:20:12 +02:00
}
. tab-throbber [ pinned ] ,
. tab-icon-pending [ pinned ] ,
. tab-icon-image [ pinned ] ,
. tab-sharing-icon-overlay [ pinned ] ,
. tab-icon-overlay [ pinned ] {
margin-inline-end : 5 . 5px ;
}
. tab-label-container [ pinned ] {
width : unset ! important ;
}
/* Padding */
@ supports not -moz-bool-pref ( "userChrome.centered.tab" ) {
# tabbrowser-arrowscrollbox {
margin-inline : 2px ! important ;
}
: root [ sizemode = "normal" ] # tabbrowser-arrowscrollbox {
margin-inline : 6px ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.centered.tab" ) {
@ supports -moz-bool-pref ( "userChrome.centered.tab.label" ) {
# tabbrowser-arrowscrollbox {
margin-inline : 2px ! important ;
}
: root [ sizemode = "normal" ] # tabbrowser-arrowscrollbox {
margin-inline : 6px ! important ;
}
}
}
@ supports -moz-bool-pref ( "browser.tabs.tabmanager.enabled" ) {
: root : not ( [ tabsintitlebar = "true" ] ) # tabbrowser-tabs : not ( [ overflow = "true" ] , [ hashiddentabs ] ) ~ # alltabs-button ,
: root : not ( [ tabsintitlebar = "true" ] )
# tabbrowser-tabs [ hasadjacentnewtabbutton ] : not ( [ overflow = "true" ] )
~ # new-tab-button {
display : -moz-box ! important ;
}
}
}
2022-10-17 19:50:35 +02:00
/** Tab UI ********************************************************************/
2022-08-29 19:20:12 +02:00
/*= Tab - Connect to window ==============================================*/
2022-05-11 21:19:02 +02:00
@ supports -moz-bool-pref ( "userChrome.tab.connect_to_window" ) {
. tab-background {
border-radius : var ( --tab-border-radius ) var ( --tab-border-radius ) 0px 0px ! important ;
margin-bottom : 0px ! important ;
}
. tab-content {
margin-top : var ( --tab-block-margin ) ;
}
. tab-stack {
margin-top : 0px ! important ;
margin-bottom : 0px ! important ;
}
/* Remove line at Toolbar's top */
# tabbrowser-tabs {
z-index : 1 ! important ;
}
2022-10-17 19:50:35 +02:00
# TabsToolbar : not ( [ multibar ] ) {
2022-12-04 09:37:08 +01:00
overflow : clip ; /* Prevent toolbar area over */
2022-05-11 21:19:02 +02:00
}
/* Pinned Tab - tabbrowser-arrowscrollbox overflowing */
# tabbrowser-tabs [ positionpinnedtabs ] > # tabbrowser-arrowscrollbox > . tabbrowser-tab [ pinned ] {
z-index : 0 ! important ;
}
}
/*= Selected Tab =============================================================*/
/*= Selected Tab - Color like toolbar ========================================*/
@ supports -moz-bool-pref ( "userChrome.tab.color_like_toolbar" ) {
: root : not ( : -moz-lwtheme ) {
/* Fix for windows's system default theme. Using --toolbar-bgcolor, --toolbar-bgimage fallback */
2022-12-04 09:37:08 +01:00
--tab-selected-bgcolor : unset ! important ; /* Original: rgb(255,255,255); */
--tab-selected-bgimage : unset ! important ; /* Above FF v101 */
2022-05-11 21:19:02 +02:00
}
# tabbrowser-tabs : not ( [ movingtab ] )
> # tabbrowser-arrowscrollbox
> . tabbrowser-tab
> . tab-stack
> . tab-background [ selected = "true" ] : -moz-lwtheme {
/ * Original : linear-gradient ( var ( --lwt-selected-tab-background-color , transparent ) , var ( --lwt-selected-tab-background-color , transparent ) ) , linear-gradient ( var ( --toolbar-bgcolor ) , var ( --toolbar-bgcolor ) ) , var ( --lwt-header-image , none )
* /
background-image : linear-gradient ( transparent , transparent ) ,
linear-gradient ( var ( --toolbar-bgcolor ) , var ( --toolbar-bgcolor ) ) , var ( --lwt-header-image , none ) ! important ;
}
}
/*= Multi Selected Color - More Contrast =====================================*/
@ supports -moz-bool-pref ( "userChrome.tab.multi_selected" ) {
# tabbrowser-tabs : not ( [ movingtab ] )
> # tabbrowser-arrowscrollbox
> . tabbrowser-tab
> . tab-stack
> . tab-background [ multiselected ] : not ( [ selected ] ) : -moz-lwtheme {
background-image : linear-gradient ( var ( --toolbar-bgcolor , transparent ) , var ( --toolbar-bgcolor , transparent ) ) ,
linear-gradient ( var ( --toolbar-bgcolor ) , var ( --toolbar-bgcolor ) ) , var ( --lwt-header-image , none ) ! important ;
}
2022-08-29 19:20:12 +02:00
. tab-background [ multiselected = "true" ] : not ( [ selected = "true" ] ) > . tab-loading-burst : not ( [ bursting ] ) {
background : color-mix ( in srgb , currentColor 65 % , transparent ) ;
opacity : 0 . 3 ;
}
# TabsToolbar [ brighttext ]
. tab-background [ multiselected = "true" ] : not ( [ selected = "true" ] )
> . tab-loading-burst : not ( [ bursting ] ) {
opacity : 0 . 15 ;
}
@ supports -moz-bool-pref ( "userChrome.tab.connect_to_window" ) {
. tab-background [ multiselected = "true" ] {
outline : none ! important ;
}
}
@ supports not -moz-bool-pref ( "userChrome.tab.connect_to_window" ) {
/* Backport from FF 99 */
. tab-background [ multiselected = "true" ] {
outline : 1px solid color-mix ( in srgb , var ( --focus-outline-color , currentColor ) 40 % , transparent ) ;
outline-offset : -1px ;
}
. tab-background [ multiselected = "true" ] [ selected = "true" ] {
outline-width : 2px ;
outline-offset : -2px ;
}
}
}
/*= Selected Tab - Box Shadow ================================================*/
@ supports -moz-bool-pref ( "userChrome.tab.box_shadow" ) {
# TabsToolbar [ brighttext ]
# tabbrowser-tabs : not ( [ noshadowfortests ] )
. tabbrowser-tab [ visuallyselected = "true" ] : not ( : focus )
> . tab-stack
> . tab-background : -moz-lwtheme {
2022-10-17 19:50:35 +02:00
/ * Original : 0 0 1px var ( --tab-line-color , rgba ( 128 , 128 , 142 , 0 . 9 ) )
2022-08-29 19:20:12 +02:00
Bright : 0 0 1px var ( --tab-line-color , rgba ( 128 , 128 , 142 , 0 . 9 ) ) , 0 0 4px rgba ( 128 , 128 , 142 , 0 . 5 ) * /
box-shadow : 0 0 1px var ( --toolbar-color ) ! important ;
}
# TabsToolbar [ brighttext ]
# tabbrowser-tabs : not ( [ noshadowfortests ] )
. tabbrowser-tab [ multiselected ] : not ( [ visuallyselected ] )
> . tab-stack
> . tab-background : -moz-lwtheme {
box-shadow : 0 0 1px color-mix ( in srgb , var ( --toolbar-color ) 80 % , transparent ) ! important ;
}
/* Consider 0 0 4px rgba(128,128,142,0.9) -> 0 0 4px rgba(0,0,0,.4) new default */
# TabsToolbar : not ( [ brighttext ] )
# tabbrowser-tabs : not ( [ noshadowfortests ] )
. tabbrowser-tab : is ( [ visuallyselected = "true" ] , [ multiselected ] )
> . tab-stack
> . tab-background {
box-shadow : 0 0 1px var ( --tab-line-color , var ( --lwt-tab-line-color , rgba ( 128 , 128 , 142 , 0 . 9 ) ) ) ,
0 0 4px rgba ( 128 , 128 , 142 , 0 . 5 ) ! important ;
}
# TabsToolbar [ brighttext ]
# tabbrowser-tabs : not ( [ noshadowfortests ] )
. tabbrowser-tab : is ( [ visuallyselected = "true" ] , [ multiselected ] )
> . tab-stack
> . tab-background : -moz-lwtheme {
box-shadow : 0 0 1px var ( --tab-line-color , var ( --lwt-tab-line-color , rgba ( 128 , 128 , 142 , 0 . 9 ) ) ) ! important ;
}
/ * For themes outside of Light and Dark ( which are curated by Mozilla ) , show a thicker border
around the tab to help themes that are dependent on tab_line to show the selected tab . * /
: root : not ( [ lwtheme-mozlightdark ] , [ style * = "--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);" ] )
# TabsToolbar : not ( [ brighttext ] )
# tabbrowser-tabs : not ( [ noshadowfortests ] )
. tabbrowser-tab : is ( [ visuallyselected = "true" ] , [ multiselected ] )
> . tab-stack
> . tab-background : -moz-lwtheme {
box-shadow : 0 0 0 1px
var ( --tab-line-color , var ( --lwt-tab-line-color , var ( --tabs-border-color , rgba ( 128 , 128 , 142 , 0 . 9 ) ) ) ) ,
0 0 4px rgba ( 128 , 128 , 142 , 0 . 5 ) ! important ;
}
: root : not ( [ lwtheme-mozlightdark ] , [ style * = "--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);" ] )
# TabsToolbar [ brighttext ]
# tabbrowser-tabs : not ( [ noshadowfortests ] )
. tabbrowser-tab : is ( [ visuallyselected = "true" ] , [ multiselected ] )
> . tab-stack
> . tab-background : -moz-lwtheme {
box-shadow : 0 0 0 1px
var ( --tab-line-color , var ( --lwt-tab-line-color , var ( --tabs-border-color , rgba ( 128 , 128 , 142 , 0 . 9 ) ) ) ) ! important ;
}
}
/*= Selected Tab - Bottom Rounded Corner =====================================*/
@ supports -moz-bool-pref ( "userChrome.tab.bottom_rounded_corner" ) {
# tabbrowser-tabs {
2022-12-04 09:37:08 +01:00
--tab-corner-rounding : 3px ; /* 10px looks about like chromium - 17px looks close to Australis tabs */
2022-08-29 19:20:12 +02:00
--tab-corner-padding : 0px ;
--tab-corner-position : calc ( var ( --tab-corner-padding ) - var ( --tab-corner-rounding ) ) ;
}
: root : not ( [ customizing = "true" ] ) tab [ visuallyselected ] > stack :: before ,
: root : not ( [ customizing = "true" ] ) tab [ visuallyselected ] > stack :: after {
content : "" ! important ;
/* Box */
display : block ! important ;
position : absolute ! important ;
z-index : 1 ! important ;
/* Shape */
width : var ( --tab-corner-rounding ) ! important ;
height : 100 % ! important ;
/* Color */
fill : var ( --toolbar-bgcolor ) ! important ;
stroke : var ( --tab-line-color , var ( --tabs-border-color , rgba ( 128 , 128 , 142 , 0 . 9 ) ) ) ! important ;
-moz-context-properties : fill , stroke ! important ;
/* Image */
background-size : var ( --tab-corner-rounding ) ;
background-repeat : no-repeat ;
background-position-y : bottom ;
}
: root : not ( [ customizing = "true" ] ) : is ( [ lwtheme-mozlightdark ] , [ style * = "--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);" ] )
# TabsToolbar [ brighttext ]
# tabbrowser-tabs : not ( [ noshadowfortests ] )
tab [ visuallyselected ]
> stack : -moz-lwtheme :: before ,
: root : not ( [ customizing = "true" ] ) : is ( [ lwtheme-mozlightdark ] , [ style * = "--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);" ] )
# TabsToolbar [ brighttext ]
# tabbrowser-tabs : not ( [ noshadowfortests ] )
tab [ visuallyselected ]
> stack : -moz-lwtheme :: after {
/* As Selected Tab - Box Shadow */
stroke : var ( --toolbar-color ) ! important ;
}
tab [ visuallyselected ] > stack :: before {
left : var ( --tab-corner-position ) ! important ;
background-image : url ( "../icons/tab-bottom-corner-left.svg" ) ;
}
tab [ visuallyselected ] > stack :: after {
left : auto ;
right : var ( --tab-corner-position ) ;
background-image : url ( "../icons/tab-bottom-corner-right.svg" ) ;
}
@ media ( -moz-gtk-csd-available ) {
/* Fill color for GTK */
: root : not ( [ customizing = "true" ] ) : not ( [ lwtheme = "true" ] ) tab [ visuallyselected ] > stack :: before ,
: root : not ( [ customizing = "true" ] ) : not ( [ lwtheme = "true" ] ) tab [ visuallyselected ] > stack :: after {
2022-10-17 19:50:35 +02:00
/ * As GTK Toolbar ' s background-color + background-image
2022-08-29 19:20:12 +02:00
* --toolbar-non-lwt-bgcolor : -moz-dialog ;
* --toolbar-non-lwt-bgimage : linear-gradient ( rgba ( 255 , 255 , 255 , . 15 ) , rgba ( 255 , 255 , 255 , . 15 ) ) ;
* /
2022-12-04 09:37:08 +01:00
fill : color-mix ( in srgb , rgb ( 255 , 255 , 255 ) 15 % , -moz-dialog ) ! important ;
2022-08-29 19:20:12 +02:00
stroke : transparent ! important ;
}
: root : not ( [ customizing = "true" ] ) : not ( [ lwtheme = "true" ] )
# TabsToolbar [ brighttext ]
tab [ visuallyselected ]
> stack :: before ,
: root : not ( [ customizing = "true" ] ) : not ( [ lwtheme = "true" ] )
# TabsToolbar [ brighttext ]
tab [ visuallyselected ]
> stack :: after {
stroke : transparent ! important ;
}
}
@ supports not -moz-bool-pref ( "userChrome.tab.color_like_toolbar" ) {
: root : not ( [ customizing = "true" ] ) tab [ visuallyselected ] > stack :: before ,
: root : not ( [ customizing = "true" ] ) tab [ visuallyselected ] > stack :: after {
/ * Based on tab background
background-image : linear-gradient ( var ( --lwt-selected-tab-background-color , transparent ) , var ( --lwt-selected-tab-background-color , transparent ) ) , linear-gradient ( var ( --toolbar-bgcolor ) , var ( --toolbar-bgcolor ) ) , var ( --lwt-header-image , none ) ;
defaults
background-color : var ( --tab-selected-bgcolor , var ( --toolbar-bgcolor ) ) ;
background-image : var ( --tab-selected-bgimage , var ( --toolbar-bgimage ) ) ;
* /
fill : var ( --lwt-selected-tab-background-color , var ( --tab-selected-bgcolor , var ( --toolbar-bgcolor ) ) ) ! important ;
}
}
}
/*= Selected Tab - Photon like contextline ===================================*/
2022-12-04 09:37:08 +01:00
@ supports -moz-bool-pref ( "userChrome.tab.photon_like_contextline" ) or -moz-bool-pref ( "userChrome.tab.static_separator" ) {
2022-08-29 19:20:12 +02:00
: root [ lwtheme-mozlightdark ] # tabbrowser-tabs ,
: root [ style * = "--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);" ] ,
: root [ style * = "--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);" ] {
--tab-line-color : rgb ( 10 , 132 , 255 ) ! important ;
}
@ media ( -moz-gtk-csd-available ) {
: root : not ( : -moz-lwtheme ) # tabbrowser-tabs {
2022-12-04 09:37:08 +01:00
--tab-line-color : Highlight ! important ; /* -moz-accent-color */
2022-08-29 19:20:12 +02:00
}
}
2022-12-04 09:37:08 +01:00
}
@ supports -moz-bool-pref ( "userChrome.tab.photon_like_contextline" ) {
2022-08-29 19:20:12 +02:00
. tab-context-line {
display : -moz-inline-box ! important ;
height : 2px ! important ;
border-radius : var ( --tab-border-radius , 4px ) var ( --tab-border-radius , 4px ) 0 0 ! important ;
}
. tabbrowser-tab : is ( [ selected ] , [ multiselected ] ) . tab-context-line {
/ * Photon like color
Default : var ( --tab-line-color , rgb ( 10 , 132 , 255 ) )
Automatic : color-mix ( in srgb , var ( --button-primary-bgcolor ) 80 % , transparent )
FF v96 + replace by var ( --lwt-tab-line-color ) * /
2022-12-04 09:37:08 +01:00
background-color : var ( --tab-line-color , var ( --lwt-tab-line-color , rgb ( 10 , 132 , 255 ) ) ) ! important ;
2022-08-29 19:20:12 +02:00
}
. tabbrowser-tab : hover : not ( [ selected = "true" ] , [ multiselected ] ) > . tab-stack > . tab-background > . tab-context-line {
background-color : rgba ( 0 , 0 , 0 , 0 . 2 ) ! important ;
opacity : 1 ! important ;
transform : none ! important ;
}
# TabsToolbar [ brighttext ]
. tabbrowser-tab : hover : not ( [ selected = "true" ] , [ multiselected ] )
> . tab-stack
> . tab-background
> . tab-context-line {
background-color : rgba ( 255 , 255 , 255 , 0 . 2 ) ! important ;
}
2022-10-17 19:50:35 +02:00
/* Prevent identity color flashing */
2022-08-29 19:20:12 +02:00
. tabbrowser-tab [ usercontextid ] . tab-context-line {
--identity-icon-color : none ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
: root : not ( [ customizing = "true" ] ) # TabsToolbar [ brighttext ] tab [ visuallyselected ] > stack :: before ,
: root : not ( [ customizing = "true" ] ) # TabsToolbar [ brighttext ] tab [ visuallyselected ] > stack :: after {
/* As Selected Tab - Box Shadow */
stroke : var ( --toolbar-color ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
/* Animation */
. tabbrowser-tab : not ( [ selected = "true" ] , [ multiselected ] ) . tab-context-line {
opacity : 0 ! important ;
transform : scaleX ( 0 ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ media ( prefers-reduced-motion : no-preference ) {
. tabbrowser-tab : not ( [ selected = "true" ] , [ multiselected ] ) . tab-context-line {
2022-12-04 09:37:08 +01:00
transition : transform 250ms var ( --animation-easing-function ) , opacity 250ms var ( --animation-easing-function ) ! important ; /* --animation-easing-function: cubic-bezier(.07, .95, 0, 1); */
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
/* Remove side's background color border */
2022-05-11 21:19:02 +02:00
# TabsToolbar [ brighttext ]
# tabbrowser-tabs : not ( [ noshadowfortests ] )
2022-08-29 19:20:12 +02:00
. tabbrowser-tab : is ( [ visuallyselected = "true" ] , [ multiselected ] )
2022-05-11 21:19:02 +02:00
> . tab-stack
> . tab-background : -moz-lwtheme {
2022-08-29 19:20:12 +02:00
--tabs-border-color : rgba ( 0 , 0 , 0 , 0 . 3 ) ! important ;
2022-12-04 09:37:08 +01:00
box-shadow : 0 0 1px var ( --tabs-border-color ) ! important ; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) */
2022-05-11 21:19:02 +02:00
}
# TabsToolbar : not ( [ brighttext ] )
# tabbrowser-tabs : not ( [ noshadowfortests ] )
. tabbrowser-tab : is ( [ visuallyselected = "true" ] , [ multiselected ] )
> . tab-stack
> . tab-background {
2022-12-04 09:37:08 +01:00
box-shadow : 0 0 1px var ( --tabs-border-color ) , 0 0 4px rgba ( 128 , 128 , 142 , 0 . 5 ) ! important ; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
/* Container Tab */
. tabbrowser-tab [ usercontextid ] > . tab-stack > . tab-background > . tab-context-line {
margin : unset ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
}
/*= Unselected Tab - Divide line =============================================*/
/*= Unselected Tab - Dynamic Separator =======================================*/
2022-10-17 19:50:35 +02:00
@ supports -moz-bool-pref ( "userChrome.tab.dynamic_separator" ) or -moz-bool-pref ( "userChrome.tab.dynamic_separtor" ) {
2022-09-21 21:21:27 +02:00
# tabbrowser-arrowscrollbox {
--start-tab-separator-position-x : -1 . 5px ;
--end-tab-separator-position-x : 1 . 5px ;
--tab-separator-position-x : -2 . 5px ;
--tab-separator-position-y : calc ( -50 % + 1px ) ;
}
# tabbrowser-arrowscrollbox : -moz-locale-dir ( rtl ) {
--start-tab-separator-position-x : 1 . 5px ;
--end-tab-separator-position-x : -1 . 5px ;
--tab-separator-position-x : 2 . 5px ;
}
2022-10-17 19:50:35 +02:00
# tabbrowser-arrowscrollbox-periphery {
position : relative ;
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.tab.newtab_button_like_tab" ) {
. tab-background :: before ,
# tabs-newtab-button :: before {
/* Box Model */
content : "" ;
display : block ;
position : absolute ;
/* Position */
top : 50 % ;
/* Bar shape */
width : 1px ;
height : 20px ;
/* Bar Color */
opacity : 0 ;
background-color : var ( --toolbarseparator-color ) ;
/* More position */
2022-09-21 21:21:27 +02:00
transform : translateX ( var ( --tab-separator-position-x ) ) translateY ( var ( --tab-separator-position-y ) ) ;
2022-08-29 19:20:12 +02:00
}
@ supports -moz-bool-pref ( "userChrome.compatibility.dynamic_separator" ) {
. tab-background :: before ,
# tabs-newtab-button :: before {
background-color : var ( --tabs-border-color ) ;
}
}
}
@ supports not -moz-bool-pref ( "userChrome.tab.newtab_button_like_tab" ) {
. tab-background :: before ,
# tabbrowser-arrowscrollbox : not ( [ overflowing ] )
. tabbrowser-tab : not ( [ visuallyselected ] , [ multiselected ] , : hover ) [ last-visible-tab ]
. tab-background :: after {
/* Box Model */
content : "" ;
display : block ;
position : absolute ;
/* Position */
top : 50 % ;
/* Bar shape */
width : 1px ;
height : 20px ;
/* Bar Color */
opacity : 0 ;
background-color : var ( --toolbarseparator-color ) ;
}
@ supports -moz-bool-pref ( "userChrome.compatibility.dynamic_separator" ) {
. tab-background :: before ,
# tabbrowser-arrowscrollbox : not ( [ overflowing ] )
. tabbrowser-tab : not ( [ visuallyselected ] , [ multiselected ] , : hover ) [ last-visible-tab ]
. tab-background :: after {
background-color : var ( --tabs-border-color ) ;
}
}
. tab-background :: before {
2022-09-21 21:21:27 +02:00
transform : translateX ( var ( --tab-separator-position-x ) ) translateY ( var ( --tab-separator-position-y ) ) ! important ;
2022-08-29 19:20:12 +02:00
}
. tabbrowser-tab [ last-visible-tab ] . tab-background :: after {
right : 0 ;
2022-09-21 21:21:27 +02:00
transform : translateX ( var ( --end-tab-separator-position-x ) ) translateY ( var ( --tab-separator-position-y ) ) ! important ;
2022-08-29 19:20:12 +02:00
}
}
. tabbrowser-tab : not ( [ visuallyselected ] , [ multiselected ] , : hover , : first-child ) . tab-background :: before {
opacity : var ( --tab-separator-opacity ) ;
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.tabbar_first" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
. tabbrowser-tab : not ( [ visuallyselected ] , [ multiselected ] , : hover ) : first-child . tab-background :: before {
opacity : var ( --tab-separator-opacity ) ;
2022-09-21 21:21:27 +02:00
transform : translateX ( var ( --start-tab-separator-position-x ) ) translateY ( var ( --tab-separator-position-y ) ) ;
2022-08-29 19:20:12 +02:00
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ media screen and ( min-width : 1100px ) {
. tabbrowser-tab : not ( [ visuallyselected ] , [ multiselected ] , : hover ) : first-child . tab-background :: before {
opacity : var ( --tab-separator-opacity ) ;
2022-09-21 21:21:27 +02:00
transform : translateX ( var ( --start-tab-separator-position-x ) ) translateY ( var ( --tab-separator-position-y ) ) ;
2022-08-29 19:20:12 +02:00
}
}
}
}
}
@ supports -moz-bool-pref ( "userChrome.tab.newtab_button_like_tab" ) {
# tabs-newtab-button : not ( : hover , [ open ] ) :: before {
opacity : var ( --tab-separator-opacity ) ;
}
}
@ supports not -moz-bool-pref ( "userChrome.tab.newtab_button_like_tab" ) {
# tabbrowser-arrowscrollbox : not ( [ overflowing ] ) . tabbrowser-tab [ first-visible-unpinned-tab ] . tab-background :: before ,
# tabbrowser-arrowscrollbox : not ( [ overflowing ] )
. tabbrowser-tab : not ( [ visuallyselected ] , [ multiselected ] , : hover ) [ last-visible-tab ]
. tab-background :: after {
opacity : var ( --tab-separator-opacity ) ;
}
}
# navigator-toolbox : not ( [ movingtab ] )
. tabbrowser-tab [ first-visible-unpinned-tab ] : is ( [ visuallyselected ] , [ multiselected ] , : hover )
. tab-background :: before ,
# navigator-toolbox : not ( [ movingtab ] )
# tabbrowser-arrowscrollbox [ overflowing ]
tab . tabbrowser-tab [ first-visible-unpinned-tab ]
. tab-background :: before {
opacity : 0 ! important ;
}
@ supports -moz-bool-pref ( "userChrome.tab.newtab_button_like_tab" ) {
# navigator-toolbox : not ( [ movingtab ] )
. tabbrowser-tab : is ( [ visuallyselected ] , [ multiselected ] , : hover )
+ . tabbrowser-tab
. tab-background :: before ,
# navigator-toolbox : not ( [ movingtab ] )
. tabbrowser-tab : is ( [ visuallyselected ] , [ multiselected ] , : hover )
~ . tabbrowser-tab [ afterhovered ]
. tab-background :: before ,
# navigator-toolbox : not ( [ movingtab ] )
. tabbrowser-tab [ last-visible-tab ] : is ( [ visuallyselected ] , [ multiselected ] , : hover )
~ # tabs-newtab-button :: before ,
# navigator-toolbox : not ( [ movingtab ] )
. tabbrowser-tab [ last-visible-tab ] : is ( [ visuallyselected ] , [ multiselected ] , : hover )
~ # tabbrowser-arrowscrollbox-periphery
# tabs-newtab-button :: before {
opacity : 0 ! important ;
}
}
@ supports not -moz-bool-pref ( "userChrome.tab.newtab_button_like_tab" ) {
. tabbrowser-tab : is ( [ visuallyselected ] , [ multiselected ] , : hover )
+ . tabbrowser-tab : not ( [ visuallyselected ] )
. tab-background :: before {
opacity : 0 ! important ;
}
2022-12-04 09:37:08 +01:00
: root : not ( [ uidensity = "compact" ] ) # tabs-newtab-button > . toolbarbutton-icon {
margin-left : 2px ;
}
: root [ uidensity = "compact" ] # tabs-newtab-button > . toolbarbutton-icon {
margin-left : 1px ;
}
2022-08-29 19:20:12 +02:00
}
/* Animate */
@ media ( prefers-reduced-motion : no-preference ) {
. tab-background :: before {
2022-12-04 09:37:08 +01:00
transition : opacity 0 . 2s var ( --animation-easing-function ) ; /* cubic-bezier(.07, .95, 0, 1) */
2022-08-29 19:20:12 +02:00
}
@ supports -moz-bool-pref ( "userChrome.tab.newtab_button_like_tab" ) {
# tabs-newtab-button :: before {
2022-12-04 09:37:08 +01:00
transition : opacity 0 . 2s var ( --animation-easing-function ) ; /* cubic-bezier(.07, .95, 0, 1) */
2022-08-29 19:20:12 +02:00
}
}
@ supports not -moz-bool-pref ( "userChrome.tab.newtab_button_like_tab" ) {
# tabbrowser-arrowscrollbox : not ( [ overflowing ] )
. tabbrowser-tab : not ( [ visuallyselected ] , [ multiselected ] , : hover ) [ last-visible-tab ]
. tab-background :: after {
2022-12-04 09:37:08 +01:00
transition : opacity 0 . 2s var ( --animation-easing-function ) ; /* cubic-bezier(.07, .95, 0, 1) */
2022-08-29 19:20:12 +02:00
}
}
}
/* Latest Tab & New tab margin */
# tabbrowser-arrowscrollbox : not ( [ overflowing ] ) . tabbrowser-tab [ last-visible-tab ] {
margin-inline-end : 1px ! important ;
}
}
/*= Unselected Tab - Static Separator ========================================*/
@ supports -moz-bool-pref ( "userChrome.tab.static_separator" ) {
. tabbrowser-tab [ first-visible-tab = "true" ] . tab-background :: before ,
. tab-background :: after {
content : "" ;
}
. tab-background :: before ,
. tab-background :: after {
/* Box Model */
display : block ;
position : absolute ;
/* Position */
top : 50 % ;
transform : translateY ( -50 % ) ! important ;
/* Bar shape */
width : 0px ;
height : 100 % ;
/* Bar Color */
opacity : 0 . 3 ;
border-right : 1px solid var ( --lwt-background-tab-separator-color , currentColor ) ! important ;
}
. tab-background :: after {
right : 0 ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.tab.static_separator.selected_accent" ) {
. tabbrowser-tab [ visuallyselected ] . tab-background :: before ,
. tabbrowser-tab [ visuallyselected ] . tab-background :: after ,
. tabbrowser-tab [ beforeselected-visible ] . tab-background :: after {
--lwt-background-tab-separator-color : var ( --tab-line-color , var ( --lwt-tab-line-color , rgb ( 10 , 132 , 255 ) ) ) ;
opacity : 1 ;
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ supports not -moz-bool-pref ( "userChrome.tab.static_separator.selected_accent" ) {
. tabbrowser-tab [ visuallyselected ] . tab-background :: before ,
. tabbrowser-tab [ visuallyselected ] . tab-background :: after ,
. tabbrowser-tab [ beforeselected-visible ] . tab-background :: after {
opacity : 0 ;
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
/* Animate */
@ media ( prefers-reduced-motion : no-preference ) {
. tab-background :: before ,
. tab-background :: after {
2022-12-04 09:37:08 +01:00
transition : opacity 0 . 2s var ( --animation-easing-function ) ; /* cubic-bezier(.07, .95, 0, 1) */
2022-08-29 19:20:12 +02:00
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
}
/*= New tab button ============================================================*/
/*= New tab button - Looks like tab ==========================================*/
@ supports -moz-bool-pref ( "userChrome.tab.newtab_button_like_tab" ) {
# tabs-newtab-button {
/ * Original :
margin : 0 0 var ( --tabs-navbar-shadow-size ) ! important
2022-10-17 19:50:35 +02:00
= > Can ' t override style . Therefore , we should approach it by bypass .
2022-08-29 19:20:12 +02:00
* /
2022-12-04 09:37:08 +01:00
--tabs-navbar-shadow-size : -1px ; /* Original: 1px */
2022-08-29 19:20:12 +02:00
--tabs-navbar-original-shadow-size : 1px ;
2022-12-04 09:37:08 +01:00
--tab-corner-rounding : 4px ; /* Hardcoded */
2022-08-29 19:20:12 +02:00
/* Size */
-moz-box-align : stretch ! important ;
padding-top : var ( --tab-block-margin ) ! important ;
/* Corner Rounding Image */
--newtab-position : calc ( ( var ( --tab-corner-rounding ) / 2 ) * -1 ) ;
background-image : url ( "../icons/tab-bottom-corner-left.svg" ) , url ( "../icons/tab-bottom-corner-right.svg" ) ;
background-repeat : no-repeat ;
background-position : left var ( --newtab-position ) bottom var ( --tabs-navbar-original-shadow-size ) ,
right var ( --newtab-position ) bottom var ( --tabs-navbar-original-shadow-size ) ;
background-size : var ( --tab-corner-rounding ) ;
/* Corner Rounding Color */
fill : transparent ! important ;
-moz-context-properties : fill ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
/* Corner Rounding Color */
# tabs-newtab-button : hover {
fill : var ( --toolbarbutton-hover-background ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# tabs-newtab-button : hover : active {
fill : var ( --toolbarbutton-active-background ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ media ( -moz-windows-accent-color-in-titlebar ) {
: root [ tabsintitlebar ] : not ( : -moz-window-inactive , : -moz-lwtheme ) # tabs-newtab-button : hover ,
: root [ tabsintitlebar ] [ lwt-default-theme-in-dark-mode ] : not ( : -moz-window-inactive ) # tabs-newtab-button : hover {
2022-12-04 09:37:08 +01:00
fill : color-mix ( in srgb , AccentColorText 10 % , transparent ) ! important ; /* Hardcoded for compatibility */
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
: root [ tabsintitlebar ] : not ( : -moz-window-inactive , : -moz-lwtheme ) # tabs-newtab-button : hover : active ,
: root [ tabsintitlebar ] [ lwt-default-theme-in-dark-mode ] : not ( : -moz-window-inactive ) # tabs-newtab-button : hover : active {
2022-12-04 09:37:08 +01:00
fill : color-mix ( in srgb , AccentColorText 15 % , transparent ) ! important ; /* Hardcoded for compatibility */
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
: root [ tabsintitlebar ] : not ( : -moz-window-inactive , : -moz-lwtheme ) # tabs-newtab-button : hover ,
: root [ tabsintitlebar ] [ lwt-default-theme-in-dark-mode ] : not ( : -moz-window-inactive ) # tabs-newtab-button : hover {
2022-12-04 09:37:08 +01:00
fill : color-mix (
in srgb ,
-moz-accent-color-foreground 10 % ,
transparent
) ! important ; /* Hardcoded for compatibility */
2022-08-29 19:20:12 +02:00
}
: root [ tabsintitlebar ] : not ( : -moz-window-inactive , : -moz-lwtheme ) # tabs-newtab-button : hover : active ,
: root [ tabsintitlebar ] [ lwt-default-theme-in-dark-mode ] : not ( : -moz-window-inactive )
# tabs-newtab-button : hover : active {
2022-12-04 09:37:08 +01:00
fill : color-mix (
in srgb ,
-moz-accent-color-foreground 15 % ,
transparent
) ! important ; /* Hardcoded for compatibility */
2022-08-29 19:20:12 +02:00
}
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
/* '+'Icon */
# tabs-newtab-button . toolbarbutton-icon {
2022-12-04 09:37:08 +01:00
border-radius : var ( --tab-border-radius ) var ( --tab-border-radius ) 0 0 ! important ; /* Original: var(--tab-border-radius) */
2022-08-29 19:20:12 +02:00
padding : calc ( var ( --toolbarbutton-inner-padding ) - var ( --tab-block-margin ) / 4 ) var ( --toolbarbutton-inner-padding )
calc ( var ( --toolbarbutton-inner-padding ) + var ( --tab-block-margin ) / 4 + var ( --tabs-navbar-original-shadow-size ) ) ! important ;
-moz-context-properties : fill , fill-opacity ;
fill : var ( --toolbarbutton-icon-fill ) ;
fill-opacity : var ( --toolbarbutton-icon-fill-opacity ) ;
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
/*= New tab button - Smaller button ==========================================*/
@ supports -moz-bool-pref ( "userChrome.tab.newtab_button_smaller" ) {
# tabs-newtab-button > . toolbarbutton-icon {
2022-10-17 19:50:35 +02:00
--tab-border-radius : var ( --toolbarbutton-border-radius ) ;
2022-08-29 19:20:12 +02:00
margin-left : 1px ;
2022-10-17 19:50:35 +02:00
/* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */
2022-08-29 19:20:12 +02:00
--toolbarbutton-inner-padding : 6px ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
: root [ uidensity = "compact" ] # tabs-newtab-button > . toolbarbutton-icon {
2022-12-04 09:37:08 +01:00
--toolbarbutton-inner-padding : 4px ; /* Photon: 6px */
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
: root [ uidensity = "touch" ] # tabs-newtab-button > . toolbarbutton-icon {
2022-12-04 09:37:08 +01:00
--toolbarbutton-inner-padding : 9px ; /* Photon: 9px */
2022-08-29 19:20:12 +02:00
}
}
/*= New tab button - Proton like button ======================================*/
@ supports -moz-bool-pref ( "userChrome.tab.newtab_button_proton" ) {
: root : not ( [ uidensity = "touch" ] ) # tabs-newtab-button > . toolbarbutton-icon {
--toolbarbutton-inner-padding : calc ( ( var ( --tab-min-height ) - 16px ) / 2 - 1px ) ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
}
/*= Unloaded Tab - Contents Opacity ===========================================*/
@ supports -moz-bool-pref ( "userChrome.tab.unloaded" ) {
2022-12-04 09:37:08 +01:00
. tabbrowser-tab [ pending ] . tab-content {
2022-08-29 19:20:12 +02:00
opacity : 0 . 7 ;
}
}
/*= Clipped tabs =============================================================*/
/** Clipped tabs - Letters cleary *********************************************/
@ supports -moz-bool-pref ( "userChrome.tab.letters_cleary" ) {
# tabbrowser-tabs [ closebuttons = "activetab" ] {
2022-12-04 09:37:08 +01:00
--inline-tab-padding : 7px ! important ; /* Original: 8px */
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# tabbrowser-tabs [ overflow = "true" ] {
2022-12-04 09:37:08 +01:00
--inline-tab-padding : 6px ! important ; /* Original: 8px */
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
. tab-content [ pinned ] {
2022-12-04 09:37:08 +01:00
--inline-tab-padding : 10px ; /* Prevent overflow pinned tab's divide line not aligned */
2022-08-29 19:20:12 +02:00
padding-inline : var ( --inline-tab-padding ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
: root [ uidensity = "compact" ] . tab-content [ pinned ] {
--inline-tab-padding : 8px ;
}
. tabbrowser-tab . tab-label-container {
2022-12-04 09:37:08 +01:00
--tab-label-mask-size : 1 . 8em ; /* Original: 2em */
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# tabbrowser-tabs [ closebuttons = "activetab" ] . tabbrowser-tab . tab-label-container {
--tab-label-mask-size : 30 % ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# tabbrowser-tabs [ closebuttons = "activetab" ]
. tabbrowser-tab : is ( [ visuallyselected = "true" ] , [ multiselected = "true" ] )
. tab-label-container {
--tab-label-mask-size : 25 % ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
. tabbrowser-tab [ visuallyselected = "true" ] : not ( [ labelendaligned ] ) : hover . tab-label-container ,
# tabbrowser-tabs : not ( [ closebuttons = "activetab" ] )
> # tabbrowser-arrowscrollbox
> . tabbrowser-tab : not ( [ visuallyselected = "true" ] , [ labelendaligned ] ) : hover
. tab-label-container {
2022-12-04 09:37:08 +01:00
--tab-label-mask-size : 0 . 9em ; /* Original: 1em */
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
}
/** Clipped tabs - Show close button at hover *********************************/
@ supports -moz-bool-pref ( "userChrome.tab.close_button_at_hover" ) {
# tabbrowser-tabs [ closebuttons = "activetab" ]
> # tabbrowser-arrowscrollbox
> . tabbrowser-tab : not ( [ pinned ] )
2022-05-11 21:19:02 +02:00
> . tab-stack
2022-08-29 19:20:12 +02:00
> . tab-content
> . tab-close-button : not ( [ selected = "true" ] ) {
display : -moz-inline-box ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# tabbrowser-tabs [ closebuttons = "activetab" ] . tabbrowser-tab : not ( [ visuallyselected ] ) . tab-close-button {
visibility : collapse ! important ;
opacity : 0 ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# tabbrowser-tabs [ closebuttons = "activetab" ] . tabbrowser-tab : hover . tab-close-button {
visibility : visible ! important ;
opacity : 1 ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.tab.close_button_at_hover.always" ) {
. tabbrowser-tab : not ( [ visuallyselected ] ) . tab-close-button {
visibility : collapse ! important ;
2022-05-11 21:19:02 +02:00
opacity : 0 ;
}
2022-08-29 19:20:12 +02:00
. tabbrowser-tab : hover . tab-close-button {
visibility : visible ! important ;
opacity : 1 ;
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
/* Animate */
@ media ( prefers-reduced-motion : no-preference ) {
/* Fade out */
# tabbrowser-tabs [ closebuttons = "activetab" ] . tabbrowser-tab : not ( [ visuallyselected ] ) . tab-close-button {
transition : opacity 0 . 1s var ( --animation-easing-function ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
/* Fade in */
# tabbrowser-tabs [ closebuttons = "activetab" ] . tabbrowser-tab : hover . tab-close-button {
transition : opacity 0 . 25s var ( --animation-easing-function ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.tab.close_button_at_hover.always" ) {
/* Fade out */
. tabbrowser-tab : not ( [ visuallyselected ] ) . tab-close-button {
transition : opacity 0 . 1s var ( --animation-easing-function ) ! important ;
}
/* Fade in */
. tabbrowser-tab : hover . tab-close-button {
transition : opacity 0 . 25s var ( --animation-easing-function ) ! important ;
}
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
/* Closed Button's icon thicker */
. tabbrowser-tab . tab-content > . close-icon {
list-style-image : url ( "../icons/dismiss-filled.svg" ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
/* Closed Button's icon larger */
. tab-close-button {
2022-12-04 09:37:08 +01:00
padding : 6px ! important ; /* Original: 7px */
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
. tabbrowser-tab : not ( : hover , [ pinned ] ) > . tab-stack > . tab-content > . tab-close-button {
2022-12-04 09:37:08 +01:00
padding-inline-start : 1px ! important ; /* Original: 0px */
width : 19px ! important ; /* Original: 17px */
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
/* Closed Button's padding reduce */
# tabbrowser-tabs [ closebuttons = "activetab" ] . tab-content > . tab-close-button {
2022-12-04 09:37:08 +01:00
margin-inline-end : calc (
var ( --inline-tab-padding ) / -2 + 2px
) ! important ; /* Original: calc(var(--inline-tab-padding) / -2)*/
padding : 4px ! important ; /* Original: 7px */
width : 20px ! important ; /* Original: 24px */
height : 20px ! important ; /* Original: 24px */
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# tabbrowser-tabs [ closebuttons = "activetab" ]
. tabbrowser-tab : not ( : hover )
> . tab-stack
> . tab-content
> . tab-close-button {
2022-12-04 09:37:08 +01:00
padding-inline-start : 3px ! important ; /* Original: 0px */
width : 19px ! important ; /* Redefine from 19px !important, Original: 17px = (width - padding) */
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
}
/** Clipped tabs - Show close button at pinned tab ****************************/
@ supports -moz-bool-pref ( "userChrome.tab.close_button_at_pinned" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.as_titlebar" ) {
# tabbrowser-tabs {
--uc-close-button-size : 24px ;
--uc-close-button-padding : 6px ;
--uc-close-button-margin : calc ( ( var ( --uc-close-button-size ) - 16px ) / -2 ) ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# tabbrowser-tabs [ closebuttons = "activetab" ] {
--uc-close-button-size : 20px ;
--uc-close-button-padding : 4px ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
. tabbrowser-tab [ pinned ] [ visuallyselected ] : not ( [ style * = "transform: translateX" ] ) : hover : not ( [ busy ] )
. tab-close-button {
display : -moz-box ! important ;
-moz-box-ordinal-group : 0 ! important ;
/* Looks like hover */
width : var ( --uc-close-button-size ) ! important ;
height : var ( --uc-close-button-size ) ! important ;
padding : var ( --uc-close-button-padding ) ! important ;
margin-inline : var ( --uc-close-button-margin ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
. tabbrowser-tab [ pinned ] [ visuallyselected ] : not ( [ style * = "transform: translateX" ] ) : hover : not ( [ busy ] ) . tab-icon-stack {
width : 0 ! important ;
position : absolute ;
bottom : 8px ;
}
. tabbrowser-tab [ pinned ] [ visuallyselected ] : not ( [ style * = "transform: translateX" ] ) : hover . tab-icon-image {
display : none ! important ;
}
@ supports -moz-bool-pref ( "userChrome.tab.close_button_at_pinned.always" ) {
. tabbrowser-tab [ pinned ] [ visuallyselected ] : not ( [ busy ] ) . tab-close-button {
display : -moz-box ! important ;
-moz-box-ordinal-group : 0 ! important ;
/* Looks like hover */
width : var ( --uc-close-button-size ) ! important ;
height : var ( --uc-close-button-size ) ! important ;
padding : var ( --uc-close-button-padding ) ! important ;
margin-inline : var ( --uc-close-button-margin ) ! important ;
}
. tabbrowser-tab [ pinned ] [ visuallyselected ] : not ( [ busy ] ) . tab-icon-stack {
width : 0 ! important ;
position : absolute ;
bottom : 8px ;
}
. tabbrowser-tab [ pinned ] [ visuallyselected ] . tab-icon-image {
display : none ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.tab.close_button_at_pinned.background" ) {
. tabbrowser-tab [ pinned ] : not ( [ style * = "transform: translateX" ] ) : hover : not ( [ busy ] ) . tab-close-button {
display : -moz-box ! important ;
-moz-box-ordinal-group : 0 ! important ;
/* Looks like hover */
width : var ( --uc-close-button-size ) ! important ;
height : var ( --uc-close-button-size ) ! important ;
padding : var ( --uc-close-button-padding ) ! important ;
margin-inline : var ( --uc-close-button-margin ) ! important ;
}
. tabbrowser-tab [ pinned ] : not ( [ style * = "transform: translateX" ] ) : hover : not ( [ busy ] ) . tab-icon-stack {
width : 0 ! important ;
position : absolute ;
bottom : 8px ;
}
. tabbrowser-tab [ pinned ] : not ( [ style * = "transform: translateX" ] ) : hover . tab-icon-image {
display : none ! important ;
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
# tabbrowser-tabs [ closebuttons = "activetab" ]
. tabbrowser-tab [ pinned ] : not ( [ style * = "transform: translateX" ] ) : hover : not ( [ busy ] )
. tab-close-button {
margin-inline-end : var ( --uc-close-button-margin ) ! important ;
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
}
/** Clipped tabs - Always show tab icon ***************************************/
@ supports -moz-bool-pref ( "userChrome.tab.always_show_tab_icon" ) {
. tab-icon-image : not ( [ src ] , [ pinned ] , [ crashed ] , [ busy ] ) {
display : -moz-inline-box ! important ;
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
/*= Sound Tab ================================================================*/
/*= Sound Tab - Hide Label ===================================================*/
@ supports -moz-bool-pref ( "userChrome.tab.sound_hide_label" ) {
@ supports not -moz-bool-pref ( "userChrome.tab.sound_show_label" ) {
. tab-secondary-label : is ( [ soundplaying ] , [ muted ] , [ activemedia-blocked ] , [ pictureinpicture ] ) {
display : none ! important ;
}
}
}
/*= Sound Tab - Show Label ===================================================*/
@ supports -moz-bool-pref ( "userChrome.tab.sound_show_label" ) {
. tab-secondary-label : is ( [ soundplaying ] , [ muted ] , [ activemedia-blocked ] , [ pictureinpicture ] ) {
display : -moz-box ! important ;
}
}
/*= Sound Tab - Show with Favicons ===========================================*/
@ supports -moz-bool-pref ( "userChrome.tab.sound_with_favicons" ) {
/* Makes the favicons always visible (also on hover) */
. tab-icon-image : not ( [ pinned ] ) {
opacity : 1 ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
/* Makes the speaker icon to always appear if the tab is playing (not only on hover) */
2022-09-21 21:21:27 +02:00
. tabbrowser-tab {
--uc-sound-tab-icon-position-x : -0 . 5px ;
}
. tabbrowser-tab : -moz-locale-dir ( rtl ) {
--uc-sound-tab-icon-position-x : 0 . 5px ;
}
2022-08-29 19:20:12 +02:00
. tab-icon-overlay : not ( [ crashed ] ) ,
. tab-icon-overlay [ pinned ] [ crashed ] [ selected ] {
2022-05-11 21:19:02 +02:00
/* Position */
2022-08-29 19:20:12 +02:00
top : 0 ! important ;
inset-inline-end : -9px ! important ;
z-index : 1 ! important ;
2022-09-21 21:21:27 +02:00
transform : translateX ( var ( --uc-sound-tab-icon-position-x ) ) translateY ( -6px ) ;
2022-08-29 19:20:12 +02:00
/* Shape */
padding : 1 . 5px ! important ;
border-radius : 10px ! important ;
width : 17px ! important ;
height : 17px ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
. tab-icon-overlay : not ( [ sharing ] , [ crashed ] ) : is ( [ soundplaying ] , [ muted ] , [ activemedia-blocked ] ) {
/* Color */
color : currentColor ! important ;
stroke : transparent ! important ;
background : transparent ! important ;
fill-opacity : 0 . 8 ! important ;
opacity : 1 ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
/* Label */
@ supports not -moz-bool-pref ( "userChrome.hidden.tab_icon" ) {
2022-09-21 21:21:27 +02:00
. tabbrowser-tab : not ( [ pinned ] , [ sharing ] , [ crashed ] ) : is ( [ soundplaying ] , [ muted ] , [ activemedia-blocked ] )
. tab-label-container [ labeldirection = "ltr" ] ,
. tabbrowser-tab : not ( [ pinned ] , [ sharing ] , [ crashed ] ) : is ( [ soundplaying ] , [ muted ] , [ activemedia-blocked ] )
. tab-label-container : not ( [ labeldirection ] ) : -moz-locale-dir ( ltr ) {
--uc-sound-tab-label-position-x : 4px ;
}
. tabbrowser-tab : not ( [ pinned ] , [ sharing ] , [ crashed ] ) : is ( [ soundplaying ] , [ muted ] , [ activemedia-blocked ] )
. tab-label-container [ labeldirection = "rtl" ] ,
. tabbrowser-tab : not ( [ pinned ] , [ sharing ] , [ crashed ] ) : is ( [ soundplaying ] , [ muted ] , [ activemedia-blocked ] )
. tab-label-container
: not ( [ labeldirection ] ) : -moz-locale-dir ( rtl ) {
--uc-sound-tab-label-position-x : -4px ;
}
. tabbrowser-tab : not ( [ pinned ] , [ sharing ] , [ crashed ] ) : is ( [ soundplaying ] , [ muted ] , [ activemedia-blocked ] )
. tab-label-container
> * {
transform : translateX ( var ( --uc-sound-tab-label-position-x ) ) ;
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.hidden.tab_icon" ) {
@ supports not -moz-bool-pref ( "userChrome.hidden.tab_icon.always" ) {
. tabbrowser-tab : not ( [ pinned ] , [ sharing ] , [ crashed ] ) : is ( [ soundplaying ] , [ muted ] , [ activemedia-blocked ] )
2022-09-21 21:21:27 +02:00
. tab-label-container [ labeldirection = "ltr" ] ,
. tabbrowser-tab : not ( [ pinned ] , [ sharing ] , [ crashed ] ) : is ( [ soundplaying ] , [ muted ] , [ activemedia-blocked ] )
. tab-label-container : not ( [ labeldirection ] ) : -moz-locale-dir ( ltr ) {
--uc-sound-tab-label-position-x : 4px ;
}
. tabbrowser-tab : not ( [ pinned ] , [ sharing ] , [ crashed ] ) : is ( [ soundplaying ] , [ muted ] , [ activemedia-blocked ] )
. tab-label-container [ labeldirection = "rtl" ] ,
. tabbrowser-tab : not ( [ pinned ] , [ sharing ] , [ crashed ] ) : is ( [ soundplaying ] , [ muted ] , [ activemedia-blocked ] )
. tab-label-container
: not ( [ labeldirection ] ) : -moz-locale-dir ( rtl ) {
--uc-sound-tab-label-position-x : -4px ;
}
. tabbrowser-tab : not ( [ pinned ] , [ sharing ] , [ crashed ] ) : is ( [ soundplaying ] , [ muted ] , [ activemedia-blocked ] )
. tab-label-container
> * {
transform : translateX ( var ( --uc-sound-tab-label-position-x ) ) ;
2022-08-29 19:20:12 +02:00
}
2022-05-11 21:19:02 +02:00
}
}
/* Animate */
@ media ( prefers-reduced-motion : no-preference ) {
2022-08-29 19:20:12 +02:00
. tab-icon-overlay : not ( [ crashed ] ) ,
. tab-icon-overlay [ pinned ] [ crashed ] [ selected ] {
transition : 0 . 1s var ( --animation-easing-function ) ;
2022-05-11 21:19:02 +02:00
}
2022-09-21 21:21:27 +02:00
. tab-label-container > * {
2022-08-29 19:20:12 +02:00
transition : transform 0 . 25s var ( --animation-easing-function ) ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
}
/* None exist favicon - Size bigger */
@ supports not -moz-bool-pref ( "userChrome.tab.always_show_tab_icon" ) {
2022-09-21 21:21:27 +02:00
. tabbrowser-tab . tab-label-container [ labeldirection = "ltr" ] ,
. tabbrowser-tab . tab-label-container : not ( [ labeldirection ] ) : -moz-locale-dir ( ltr ) {
--uc-sound-tab-no-icon-position-x : -0 . 5px ;
--uc-sound-tab-no-icon-label-position-x : 3px ;
}
. tabbrowser-tab . tab-label-container [ labeldirection = "rtl" ] ,
2022-12-04 09:37:08 +01:00
. tabbrowser-tab . tab-label-container : not ( [ labeldirection ] ) : -moz-locale-dir ( rtl ) {
2022-09-21 21:21:27 +02:00
--uc-sound-tab-no-icon-position-x : 0 . 5px ;
--uc-sound-tab-no-icon-label-position-x : -3px ;
}
2022-08-29 19:20:12 +02:00
@ supports not -moz-bool-pref ( "userChrome.hidden.tab_icon" ) {
. tabbrowser-tab : not ( [ image ] ) . tab-icon-overlay : not ( [ pinned ] , [ sharing ] , [ crashed ] ) {
2022-09-21 21:21:27 +02:00
transform : translateX ( var ( --uc-sound-tab-no-icon-position-x ) ) translateY ( -1px ) ;
2022-08-29 19:20:12 +02:00
inset-inline-end : 0 ! important ;
margin-inline-end : 0 ! important ;
padding : 0 ! important ;
2022-07-27 15:53:22 +02:00
}
2022-08-29 19:20:12 +02:00
. tabbrowser-tab : not ( [ image ] ) : is ( [ soundplaying ] , [ muted ] , [ activemedia-blocked ] ) . tab-icon-image : not ( [ pinned ] ) {
2022-12-04 09:37:08 +01:00
opacity : 0 ! important ; /* Favicon hidden */
2022-08-29 19:20:12 +02:00
}
. tabbrowser-tab : not ( [ image ] ) : not ( [ image ] ) : not ( [ pinned ] , [ sharing ] , [ crashed ] ) : is ( [ soundplaying ] , [ muted ] , [ activemedia-blocked ] )
2022-09-21 21:21:27 +02:00
. tab-label-container
> * {
transform : translateX ( var ( --uc-sound-tab-no-icon-label-position-x ) ) ;
2022-08-29 19:20:12 +02:00
}
}
@ supports -moz-bool-pref ( "userChrome.hidden.tab_icon" ) {
@ supports not -moz-bool-pref ( "userChrome.hidden.tab_icon.always" ) {
. tabbrowser-tab . tab-icon-overlay : not ( [ pinned ] , [ sharing ] , [ crashed ] ) {
2022-09-21 21:21:27 +02:00
transform : translateX ( var ( --uc-sound-tab-no-icon-position-x ) ) translateY ( -1px ) ;
2022-08-29 19:20:12 +02:00
inset-inline-end : 0 ! important ;
margin-inline-end : 0 ! important ;
padding : 0 ! important ;
}
. tabbrowser-tab : is ( [ soundplaying ] , [ muted ] , [ activemedia-blocked ] ) . tab-icon-image : not ( [ pinned ] ) {
2022-12-04 09:37:08 +01:00
opacity : 0 ! important ; /* Favicon hidden */
2022-08-29 19:20:12 +02:00
}
. tabbrowser-tab : not ( [ image ] ) : not ( [ pinned ] , [ sharing ] , [ crashed ] ) : is ( [ soundplaying ] , [ muted ] , [ activemedia-blocked ] )
2022-09-21 21:21:27 +02:00
. tab-label-container
> * {
transform : translateX ( var ( --uc-sound-tab-no-icon-label-position-x ) ) ;
2022-08-29 19:20:12 +02:00
}
2022-07-27 15:53:22 +02:00
}
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
/* Busy - Show */
. tab-throbber [ busy ] ,
. tab-icon-pending [ busy ] {
opacity : 1 ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
/* Busy - Overlay Position */
. tabbrowser-tab : not ( [ pinned ] ) [ busy ] . tab-icon-overlay : is ( [ soundplaying ] , [ muted ] , [ activemedia-blocked ] ) {
2022-09-21 21:21:27 +02:00
transform : translateX ( var ( --uc-sound-tab-icon-position-x ) ) translateY ( -6px ) ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
. tabbrowser-tab : not ( [ image ] ) . tab-icon-overlay : not ( [ pinned ] , [ sharing ] , [ crashed ] ) [ busy ] {
inset-inline-end : -9px ! important ;
margin-inline-end : 9 . 5px ! important ;
padding : 1 . 5px ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
/* Hover */
. tab-icon-overlay : not ( [ crashed ] ) [ soundplaying ] : hover ,
. tab-icon-overlay : not ( [ crashed ] ) [ muted ] : hover ,
. tab-icon-overlay : not ( [ crashed ] ) [ activemedia-blocked ] : hover {
color : var ( --toolbar-bgcolor , white ) ! important ;
stroke : var ( --lwt-tab-text , var ( --toolbar-color ) ) ! important ;
background-color : var ( --lwt-tab-text , var ( --toolbar-color ) ) ! important ;
fill-opacity : 0 . 95 ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# TabsToolbar [ brighttext ] . tab-icon-overlay : not ( [ crashed ] ) [ soundplaying ] : hover ,
# TabsToolbar [ brighttext ] . tab-icon-overlay : not ( [ crashed ] ) [ muted ] : hover ,
# TabsToolbar [ brighttext ] . tab-icon-overlay : not ( [ crashed ] ) [ activemedia-blocked ] : hover {
color : var ( --toolbar-bgcolor , black ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
. tabbrowser-tab : not ( [ image ] ) . tab-icon-overlay : not ( [ pinned ] , [ sharing ] , [ crashed ] ) : hover {
padding : 0 ! important ;
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
/*= PictureInPicture Tab - Show PIP Icon =====================================*/
@ supports -moz-bool-pref ( "userChrome.tab.pip" ) {
# tabbrowser-tabs : not ( [ closebuttons = "activetab" ] ) . tabbrowser-tab [ pictureinpicture ] : not ( [ pinned ] ) . tab-content :: after ,
# tabbrowser-tabs [ closebuttons = "activetab" ]
. tabbrowser-tab [ pictureinpicture ] : not ( [ pinned ] , : hover )
. tab-content :: after {
content : "" ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
. tabbrowser-tab [ pictureinpicture ] : not ( [ pinned ] ) . tab-content :: after {
/* Shape */
display : -moz-inline-box ! important ;
width : 14px ;
height : 14px ;
background-size : 14px ;
-moz-box-ordinal-group : 1 ! important ;
/* Color */
fill : currentColor ;
opacity : 0 . 8 ;
-moz-context-properties : fill ;
/* Icon */
background-image : url ( "chrome://global/skin/media/picture-in-picture-open.svg" ) ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
. tabbrowser-tab [ pictureinpicture ] : not ( [ pinned ] ) [ selected ] . tab-content :: after {
opacity : 0 . 95 ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
/* Close Button's position */
. tabbrowser-tab [ pictureinpicture ] : not ( [ pinned ] ) . tab-close-button {
-moz-box-ordinal-group : 2 ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# tabbrowser-tabs : not ( [ closebuttons = "activetab" ] ) . tabbrowser-tab [ pictureinpicture ] : not ( [ pinned ] ) . tab-close-button {
margin-left : 7px ! important ;
2022-07-27 15:53:22 +02:00
}
# tabbrowser-tabs : not ( [ closebuttons = "activetab" ] )
2022-08-29 19:20:12 +02:00
. tabbrowser-tab [ pictureinpicture ] : not ( [ pinned ] ) : hover
. tab-close-button {
margin-left : 2px ! important ;
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
/*= Container Tab - Color line at icon's bottom ==============================*/
@ supports -moz-bool-pref ( "userChrome.tab.container" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.as_titlebar" ) {
@ supports not -moz-bool-pref ( "userChrome.tab.photon_like_contextline" ) {
. tab-context-line {
display : none ;
}
}
2022-12-04 09:37:08 +01:00
# tabbrowser-tabs {
--uc-container-position-x : 9px ;
--uc-container-position-y-default : 11 . 5px ;
--uc-container-position-y : calc ( 50 % + var ( --uc-container-position-y-default ) ) ;
--uc-titlechanged-container-position-x : 32 % , 50 % , 70 % ;
2022-08-29 19:20:12 +02:00
}
2022-12-04 09:37:08 +01:00
# tabbrowser-tabs : -moz-locale-dir ( rtl ) {
--uc-container-position-x : -9px ;
2022-09-21 21:21:27 +02:00
}
2022-12-04 09:37:08 +01:00
: root [ uidensity = "compact" ] # tabbrowser-tabs {
--uc-container-position-y-default : 10 . 5px ;
--uc-titlechanged-container-position-x : 30 % , 50 % , 70 % ;
2022-08-29 19:20:12 +02:00
}
2022-12-04 09:37:08 +01:00
: root [ uidensity = "touch" ] # tabbrowser-tabs {
--uc-container-position-y-default : 12 . 5px ;
2022-08-29 19:20:12 +02:00
}
. tab-content : not ( [ titlechanged ] ) :: before {
/* Box Model */
content : "" ;
display : block ;
2022-12-04 09:37:08 +01:00
position : absolute ;
top : 50 % ;
transform : translate ( var ( --uc-container-position-x ) , var ( --uc-container-position-y ) ) ;
2022-08-29 19:20:12 +02:00
/* Shape */
border-bottom : 2px solid var ( --identity-icon-color ) ;
width : 25 % ;
opacity : 0 . 75 ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
. tabbrowser-tab [ visuallyselected ] : not ( [ pinned ] ) . tab-content :: before {
width : calc ( 100 % - 30px ) ;
2022-05-11 21:19:02 +02:00
opacity : 1 ;
}
2022-08-29 19:20:12 +02:00
# tabbrowser-tabs [ closebuttons = "activetab" ] . tabbrowser-tab [ visuallyselected ] : not ( [ pinned ] ) . tab-content :: before {
width : calc ( 100 % - 33px ) ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
/* Animate */
@ media ( prefers-reduced-motion : no-preference ) {
. tab-content : not ( [ titlechanged ] ) :: before {
2022-12-04 09:37:08 +01:00
transition : 0 . 15s var ( --animation-easing-function ) ;
2022-08-29 19:20:12 +02:00
transition-property : width , opacity ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
}
/* Pinned Tab */
. tabbrowser-tab [ pinned ] . tab-content :: before {
2022-12-04 09:37:08 +01:00
transform : translateY ( var ( --uc-container-position-y ) ) ;
2022-08-29 19:20:12 +02:00
width : 16px ;
}
@ supports -moz-bool-pref ( "userChrome.tab.close_button_at_pinned" ) {
. tabbrowser-tab [ pinned ] [ visuallyselected ] : not ( [ busy ] ) : hover . tab-content :: before {
opacity : 0 ;
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
/* Pinned Tab - Titlechanged Indicator override */
. tabbrowser-tab : is ( [ image ] , [ pinned ] ) [ usercontextid ] > . tab-stack > . tab-content [ attention ] : not ( [ selected = "true" ] ) ,
. tabbrowser-tab [ usercontextid ] > . tab-stack > . tab-content [ pinned ] [ titlechanged ] : not ( [ selected = "true" ] ) {
/* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
--dotted-identity-image : radial-gradient (
circle ,
var ( --identity-icon-color ) ,
var ( --identity-icon-color ) 2px ,
transparent 2px
) ;
background-image : var ( --dotted-identity-image ) , var ( --dotted-identity-image ) , var ( --dotted-identity-image ) ! important ;
2022-12-04 09:37:08 +01:00
background-position-x : var ( --uc-titlechanged-container-position-x ) ! important ;
2022-08-29 19:20:12 +02:00
}
. tabbrowser-tab : is ( [ image ] , [ pinned ] ) > . tab-stack > . tab-content [ attention ] : not ( [ selected = "true" ] ) ,
. tabbrowser-tab > . tab-stack > . tab-content [ pinned ] [ titlechanged ] : not ( [ selected = "true" ] ) {
/* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
2022-12-04 09:37:08 +01:00
background-position-y : top var ( --uc-container-position-y ) ! important ;
2022-08-29 19:20:12 +02:00
}
/* Pinned Tab - Titlechanged & soundplaying */
. tabbrowser-tab : is ( [ image ] , [ pinned ] ) [ usercontextid ] : is ( [ soundplaying ] , [ muted ] , [ activemedia-blocked ] )
> . tab-stack
> . tab-content [ attention ] : not ( [ selected = "true" ] ) ,
. tabbrowser-tab [ usercontextid ] : is ( [ soundplaying ] , [ muted ] , [ activemedia-blocked ] )
> . tab-stack
> . tab-content [ pinned ] [ titlechanged ] : not ( [ selected = "true" ] ) {
2022-12-04 09:37:08 +01:00
--uc-titlechanged-container-position-x : calc ( 32 % - 1px ) , calc ( 50 % - 1px ) , calc ( 70 % - 1px ) ;
2022-08-29 19:20:12 +02:00
}
: root [ uidensity = "compact" ]
. tabbrowser-tab : is ( [ image ] , [ pinned ] ) [ usercontextid ] : is ( [ soundplaying ] , [ muted ] , [ activemedia-blocked ] )
> . tab-stack
> . tab-content [ attention ] : not ( [ selected = "true" ] ) ,
: root [ uidensity = "compact" ]
. tabbrowser-tab [ usercontextid ] : is ( [ soundplaying ] , [ muted ] , [ activemedia-blocked ] )
> . tab-stack
> . tab-content [ pinned ] [ titlechanged ] : not ( [ selected = "true" ] ) {
2022-12-04 09:37:08 +01:00
--uc-titlechanged-container-position-x : calc ( 30 % - 1px ) , calc ( 50 % - 1px ) , calc ( 70 % - 1px ) ;
2022-08-29 19:20:12 +02:00
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
}
/*= Crashed Tab - Don't show Favicons ========================================*/
@ supports -moz-bool-pref ( "userChrome.tab.crashed" ) {
. tab-icon-image [ crashed ] {
display : none ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
}
/** Url View UI ***************************************************************/
/*= Url View - Move icon to left =============================================*/
@ supports -moz-bool-pref ( "userChrome.urlView.move_icon_to_left" ) {
. urlbarView-type-icon {
min-width : 16px ! important ;
height : 16px ! important ;
margin-block : 0 ! important ;
margin-inline-start : 0 ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
. urlbarView-favicon {
margin-inline-start : 20px ! important ;
}
}
/*= Url View - Go button when typing =========================================*/
@ supports -moz-bool-pref ( "userChrome.urlView.go_button_when_typing" ) {
# urlbar-input-container [ pageproxystate = "invalid" ] # urlbar-go-button {
display : block ! important ;
}
}
/*= Url View - Always show page actions ======================================*/
@ supports -moz-bool-pref ( "userChrome.urlView.always_show_page_actions" ) {
# urlbar : not ( [ breakout-extend = "true" ] ) # pageActionButton {
display : block ! important ;
visibility : visible ! important ;
}
}
/** Panel UI ******************************************************************/
@ supports -moz-bool-pref ( "userChrome.panel.remove_strip" ) {
# appMenu-fxa-separator {
2022-12-04 09:37:08 +01:00
--panel-separator-zap-gradient : none ; /* Original: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%) */
2022-08-29 19:20:12 +02:00
}
}
@ supports -moz-bool-pref ( "userChrome.panel.full_width_separator" ) {
/* Full width separators */
: root {
/ * Original
--panel-separator-margin-vertical : 4px ;
--panel-separator-margin-horizontal : 8px ;
--panel-separator-margin : var ( --panel-separator-margin-vertical ) var ( --panel-separator-margin-horizontal ) ;
* /
--panel-separator-margin-horizontal : 0 ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.panel.full_width_padding" ) {
/ * Original
--arrowpanel-menuitem-margin : 0 8px ;
--arrowpanel-menuitem-padding-block : 8px ;
--arrowpanel-menuitem-padding-inline : 8px ;
--arrowpanel-menuitem-padding : var ( --arrowpanel-menuitem-padding-block ) var ( --arrowpanel-menuitem-padding-inline ) ;
* /
: root ,
: root : is ( [ uidensity = "compact" ] , [ uidensity = "touch" ] ) {
--arrowpanel-menuitem-margin : 0 ! important ;
--arrowpanel-menuitem-padding-inline : calc ( var ( --arrowpanel-menuitem-padding-block ) + 8px ) ! important ;
}
}
/** Sidebar UI ****************************************************************/
@ supports -moz-bool-pref ( "userChrome.sidebar.overlap" ) or -moz-bool-pref ( "userChrome.autohide.sidebar" ) {
# sidebar-box {
/ * Original
min-width : 14em ;
width : 18em ;
max-width : 36em ;
* /
--uc-sidebar-width : 40px ;
--uc-sidebar-activate-width : 18em ;
--uc-sidebar-activate-width-reverse : calc ( -1 * var ( --uc-sidebar-activate-width ) ) ;
--uc-sidebar-fullscreen-width : 4px ;
--uc-sidebar-shadow-color : # 28282f ;
2022-10-17 19:50:35 +02:00
--uc-autohide-sidebar-speed : 750ms ;
--uc-autohide-fullscreen-sidebar-speed : 1s ;
2022-12-04 09:37:08 +01:00
--uc-autohide-sidebar-delay : 600ms ; /* Wait 0.6s before hiding sidebar */
2022-08-29 19:20:12 +02:00
z-index : 1 ! important ;
position : relative ! important ;
box-shadow : 1px 0px 15px -10px var ( --uc-sidebar-shadow-color ) ;
}
# sidebar-box [ positionend = "true" ] {
box-shadow : -1px 0px 15px -10px var ( --uc-sidebar-shadow-color ) ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# sidebar {
display : block ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# sidebar-splitter {
display : none ! important ;
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.sidebar.overlap" ) {
# sidebar-box [ positionend = "true" ] {
direction : rtl ;
2022-05-11 21:19:02 +02:00
}
2022-09-21 21:21:27 +02:00
# sidebar-header ,
# sidebar {
2022-08-29 19:20:12 +02:00
background-color : var ( --sidebar-background-color ) ! important ;
color : var ( --sidebar-text-color ) ! important ;
overflow : hidden ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
# sidebar-header {
font-size : unset ! important ;
}
# sidebar-header > # sidebar-switcher-target {
font-size : 1 . 333em ;
}
2022-08-29 19:20:12 +02:00
@ supports not -moz-bool-pref ( "userChrome.autohide.sidebar" ) {
# sidebar-box ,
2022-10-17 19:50:35 +02:00
# sidebar-header ,
2022-08-29 19:20:12 +02:00
# sidebar {
min-width : var ( --uc-sidebar-activate-width ) ! important ;
max-width : var ( --uc-sidebar-activate-width ) ! important ;
}
# sidebar-box {
margin-inline-start : var ( --uc-sidebar-activate-width-reverse ) ! important ;
will-change : padding-inline ;
}
# sidebar-box : not ( [ hidden = "true" ] ) {
2022-10-17 19:50:35 +02:00
padding-inline-start : var ( --uc-sidebar-activate-width ) ! important ;
2022-08-29 19:20:12 +02:00
}
@ media ( prefers-reduced-motion : no-preference ) {
# sidebar-box {
transition : padding-inline-start 0 . 25s var ( --animation-easing-function ) , opacity 0 . 25s ease-in-out ,
visibility 0s linear ! important ;
}
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
}
/** Fullscreen - Overlap toolbar **********************************************/
@ supports -moz-bool-pref ( "userChrome.fullscreen.overlap" ) {
@ supports -moz-bool-pref ( "browser.fullscreen.autohide" ) {
: root [ sizemode = "fullscreen" ] # navigator-toolbox {
2022-12-04 09:37:08 +01:00
position : fixed ! important ; /* Needed for content to take up entire height */
z-index : 1000 ! important ; /* Puts the UI above the content */
2022-08-29 19:20:12 +02:00
}
: root [ sizemode = "fullscreen" ] : -moz-any ( # navigator-toolbox , # titlebar , # nav-bar , # PersonalToolbar ) {
2022-12-04 09:37:08 +01:00
width : 100 % ; /* Makes the UI take up the entire width */
2022-08-29 19:20:12 +02:00
}
@ media ( -moz-gtk-csd-available ) {
2022-10-17 19:50:35 +02:00
/* Fix transparent background */
2022-08-29 19:20:12 +02:00
: root [ tabsintitlebar ] [ sizemode = "fullscreen" ] # TabsToolbar : not ( : -moz-lwtheme ) {
appearance : auto ! important ;
}
}
}
}
@ supports -moz-bool-pref ( "userChrome.fullscreen.show_bookmarkbar" ) {
: root : not ( [ sizemode = "fullscreen" ] ) # PersonalToolbar [ initialized = "true" ] : not ( [ collapsed = "true" ] ) ,
: root [ sizemode = "fullscreen" ] # PersonalToolbar [ initialized = "true" ] {
2022-12-04 09:37:08 +01:00
visibility : unset ! important ; /* Makes the bookmarks toolbar visible if enabled */
2022-08-29 19:20:12 +02:00
}
}
/** Centered ******************************************************************/
/*= Centered - Tab ===========================================================*/
@ supports -moz-bool-pref ( "userChrome.centered.tab" ) {
. tabbrowser-tab [ selected ] : not ( : hover ) . tab-label-container : not ( [ textoverflow ] ) ,
. tabbrowser-tab : not ( : hover , [ pinned ] ) . tab-label-container : not ( [ textoverflow ] ) {
margin-inline-end : 5px ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.tab.close_button_at_hover" ) {
# tabbrowser-tabs [ closebuttons = "activetab" ]
. tabbrowser-tab : not ( : hover , [ pinned ] )
. tab-label-container : not ( [ textoverflow ] ) {
margin-inline-end : 1px ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# tabbrowser-tabs [ closebuttons = "activetab" ]
. tabbrowser-tab : not ( [ selected ] ) : not ( : hover , [ pinned ] )
. tab-label-container
label {
padding-inline-end : 18px ;
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
@ supports not -moz-bool-pref ( "userChrome.centered.tab.label" ) {
. tab-icon-stack {
-moz-box-flex : 1 ;
justify-content : end ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
}
@ supports -moz-bool-pref ( "userChrome.centered.tab.label" ) {
/* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_label.css */
. tab-label-container {
display : grid ;
justify-content : safe center ;
align-items : safe center ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
. tab-label ,
. tab-secondary-label {
overflow : hidden ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
. tabbrowser-tab [ selected ] : not ( : hover ) . tab-label-container : not ( [ textoverflow ] ) ,
. tabbrowser-tab : not ( : hover , [ pinned ] ) . tab-label-container : not ( [ textoverflow ] ) {
margin-inline-end : 5px ;
}
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
/*= Centered - URL Bar =======================================================*/
@ supports -moz-bool-pref ( "userChrome.centered.urlbar" ) {
# urlbar : not ( [ focused ] ) # urlbar-input ,
# urlbar : not ( [ focused ] ) . urlbar-input {
text-align : center ! important ;
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
/*= Centered - Bookmark Bar ==================================================*/
@ supports -moz-bool-pref ( "userChrome.centered.bookmarkbar" ) {
# PlacesToolbarItems {
display : flex ! important ;
justify-content : safe center ! important ;
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
/** Auto Hide *****************************************************************/
@ supports -moz-bool-pref ( "userChrome.autohide.back_button" ) {
# back-button [ disabled = "true" ] {
margin-left : -36px ! important ;
opacity : 0 ! important ;
pointer-events : none ;
}
@ media ( prefers-reduced-motion : no-preference ) {
# back-button {
transition-property : background-color , opacity , margin-left ! important ;
}
# back-button [ disabled = "true" ] {
transition : background-color 1s var ( --animation-easing-function ) , opacity 1s var ( --animation-easing-function ) ,
margin-left 0 . 5s ease ! important ;
}
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.autohide.forward_button" ) {
# forward-button [ disabled = "true" ] {
margin-left : -36px ! important ;
opacity : 0 ! important ;
pointer-events : none ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ media ( prefers-reduced-motion : no-preference ) {
# forward-button {
transition-property : background-color , opacity , margin-left ! important ;
}
# forward-button [ disabled = "true" ] {
transition : background-color 1s var ( --animation-easing-function ) , opacity 1s var ( --animation-easing-function ) ,
margin-left 0 . 5s ease ! important ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.autohide.page_action" ) {
# page-action-buttons > . urlbar-page-action {
margin-inline-end : calc ( -16px - 2 * var ( --urlbar-icon-padding ) ) ;
opacity : 0 ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# urlbar-container : is ( : hover , : focus-within ) # page-action-buttons > . urlbar-page-action ,
. urlbar-page-action [ open ] ,
. urlbar-page-action [ open ] ~ . urlbar-page-action {
margin-inline-end : 0px ! important ;
opacity : 1 ;
2022-05-11 21:19:02 +02:00
}
@ media ( prefers-reduced-motion : no-preference ) {
2022-08-29 19:20:12 +02:00
# page-action-buttons > . urlbar-page-action {
transition : margin-inline-end 50ms var ( --animation-easing-function ) 900ms ,
opacity 1 . 5s var ( --animation-easing-function ) 600ms ! important ;
}
@ supports -moz-bool-pref ( "userChrome.decoration.animate" ) {
# page-action-buttons > . urlbar-page-action {
transition : margin-inline-end 50ms var ( --animation-easing-function ) 900ms ,
opacity 1 . 5s var ( --animation-easing-function ) 600ms , background-color 2 . 5s var ( --animation-easing-function ) ! important ;
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# urlbar-container : is ( : hover , : focus-within ) # page-action-buttons > . urlbar-page-action ,
. urlbar-page-action [ open ] ,
. urlbar-page-action [ open ] ~ . urlbar-page-action {
transition-delay : 0s ! important ;
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
}
@ supports -moz-bool-pref ( "userChrome.autohide.tab" ) {
@ supports not -moz-bool-pref ( "userChrome.autohide.tab.opacity" ) {
@ supports not -moz-bool-pref ( "userChrome.autohide.tab.blur" ) {
. tabbrowser-tab : not ( [ multiselected ] ) . tab-content : not ( : hover ) : not ( [ selected ] ) {
margin-bottom : -64px ;
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
}
@ supports -moz-bool-pref ( "userChrome.autohide.tab.opacity" ) {
. tabbrowser-tab : not ( [ multiselected ] ) . tab-content : not ( : hover ) : not ( [ selected ] ) {
opacity : 0 % ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
}
@ supports -moz-bool-pref ( "userChrome.autohide.tab.blur" ) {
. tabbrowser-tab : not ( [ multiselected ] ) . tab-content : not ( : hover ) : not ( [ selected ] ) {
filter : blur ( 8px ) ;
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
@ media ( prefers-reduced-motion : no-preference ) {
. tabbrowser-tab : not ( [ multiselected ] ) . tab-content : not ( : hover ) : not ( [ selected ] ) {
transition-timing-function : var ( --animation-easing-function ) ;
transition-duration : 0 . 2s ;
transition-delay : 600ms ;
}
. tabbrowser-tab : not ( [ multiselected ] ) . tab-content : not ( : hover ) : not ( [ selected ] ) : is ( : hover , : focus-within ) {
transition-delay : 0s ;
}
@ supports not -moz-bool-pref ( "userChrome.autohide.tab.opacity" ) {
@ supports not -moz-bool-pref ( "userChrome.autohide.tab.blur" ) {
. tabbrowser-tab : not ( [ multiselected ] ) . tab-content : not ( : hover ) : not ( [ selected ] ) {
transition-property : margin-bottom ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.autohide.tab.opacity" ) {
. tabbrowser-tab : not ( [ multiselected ] ) . tab-content : not ( : hover ) : not ( [ selected ] ) {
transition-property : opacity ;
}
}
@ supports -moz-bool-pref ( "userChrome.autohide.tab.blur" ) {
. tabbrowser-tab : not ( [ multiselected ] ) . tab-content : not ( : hover ) : not ( [ selected ] ) {
transition-property : filter ;
}
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
}
2022-09-21 21:21:27 +02:00
: root {
--uc-autohide-toolbar-speed : 0 . 25s ;
--uc-autohide-toolbar-delay : 600ms ;
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.autohide.tabbar" ) or -moz-bool-pref ( "userChrome.autohide.navbar" ) or -moz-bool-pref (
"userChrome.autohide.bookmarkbar"
)
2022-09-21 21:21:27 +02:00
or -moz-bool-pref ( "userChrome.tabbar.one_liner" ) or -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
2022-08-29 19:20:12 +02:00
: root {
--uc-tabbar-height : var ( --tab-min-height ) ;
--uc-tabbar-hide-height : calc ( -1 * var ( --uc-tabbar-height ) ) ;
--uc-navbar-height : calc ( 16px + 2 * ( var ( --toolbarbutton-inner-padding ) + var ( --toolbarbutton-outer-padding ) ) ) ;
--uc-navbar-hide-height : calc ( -1 * var ( --uc-navbar-height ) ) ;
2022-12-04 09:37:08 +01:00
--uc-bm-height : calc ( 20px + ( 2 * var ( --bookmark-block-padding , 4px ) ) ) ; /* 20px = 16px + (2px * 2) [margin block] */
2022-08-29 19:20:12 +02:00
--uc-bm-hide-height : calc ( -1 * var ( --uc-bm-height ) ) ;
}
@ supports -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
: root {
--uc-tabbar-height : 0px ;
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ media screen and ( max-width : 1100px ) {
: root {
--uc-tabbar-height : 0px ;
}
}
}
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.hidden.navbar" ) {
: root {
--uc-navbar-height : 0px ;
}
}
2022-09-21 21:21:27 +02:00
@ supports selector ( : has ( a ) ) {
# navigator-toolbox : has ( # PersonalToolbar [ collapsed = "true" ] ) {
--uc-bm-height : 0px ;
}
}
2022-08-29 19:20:12 +02:00
}
@ supports -moz-bool-pref ( "userChrome.autohide.tabbar" ) or -moz-bool-pref ( "userChrome.autohide.navbar" ) or -moz-bool-pref (
"userChrome.autohide.bookmarkbar"
)
or -moz-bool-pref ( "userChrome.autohide.infobar" ) {
# navigator-toolbox {
position : relative ;
2022-12-04 09:37:08 +01:00
}
# navigator-toolbox : is ( : hover , : focus-within ) {
2022-08-29 19:20:12 +02:00
z-index : 2 ;
2022-05-11 21:19:02 +02:00
}
2022-12-04 09:37:08 +01:00
# navigator-toolbox : is ( : hover , : focus-within ) # PersonalToolbar {
z-index : -1 ;
}
# navigator-toolbox : not ( : hover ) : not ( : focus-within ) {
2022-08-29 19:20:12 +02:00
animation : 1s keepfront ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ keyframes keepfront {
from {
z-index : 3 ;
}
to {
z-index : 3 ;
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# sidebar-box : is ( : hover , : focus-within ) {
position : relative ;
z-index : 2 ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.autohide.toolbar_overlap" ) {
# navigator-toolbox {
--uc-toolbar-hide-height : calc ( -1 * var ( --uc-toolbar-height , 0 ) ) ;
margin-bottom : var ( --uc-toolbar-hide-height ) ! important ;
}
@ media ( prefers-reduced-motion : no-preference ) {
@ supports -moz-bool-pref ( "userChrome.decoration.animate" ) {
# navigator-toolbox {
transition : margin-top 1s ease ,
2022-09-21 21:21:27 +02:00
margin-bottom var ( --uc-autohide-toolbar-speed ) var ( --animation-easing-function )
var ( --uc-autohide-toolbar-delay ) ;
2022-08-29 19:20:12 +02:00
}
# navigator-toolbox : is ( : hover , : focus-within ) {
transition-delay : 0s ! important ;
}
# navigator-toolbox [ inFullscreen = "true" ] {
transition : margin-top 1 . 3s var ( --animation-easing-function ) 50ms ,
2022-09-21 21:21:27 +02:00
margin-bottom var ( --uc-autohide-toolbar-speed ) var ( --animation-easing-function )
var ( --uc-autohide-toolbar-delay ) ;
2022-08-29 19:20:12 +02:00
}
}
@ supports not -moz-bool-pref ( "userChrome.decoration.animate" ) {
# navigator-toolbox {
2022-09-21 21:21:27 +02:00
transition : margin-bottom var ( --uc-autohide-toolbar-speed ) var ( --animation-easing-function )
var ( --uc-autohide-toolbar-delay ) ;
2022-08-29 19:20:12 +02:00
}
# navigator-toolbox : is ( : hover , : focus-within ) {
transition-delay : 0s ! important ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.autohide.tabbar" ) or -moz-bool-pref ( "userChrome.autohide.navbar" ) {
@ supports -moz-bool-pref ( "userChrome.autohide.tabbar" ) or -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
# navigator-toolbox : is ( : hover , : focus-within ) {
--uc-toolbar-height : var ( --uc-tabbar-height ) ;
}
@ supports not -moz-bool-pref ( "userChrome.autohide.navbar" ) {
@ supports -moz-bool-pref ( "userChrome.autohide.bookmarkbar" ) {
# navigator-toolbox : is ( : hover , : focus-within ) {
--uc-toolbar-height : calc ( var ( --uc-tabbar-height ) + var ( --uc-bm-height ) ) ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.autohide.navbar" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports not -moz-bool-pref ( "userChrome.autohide.bookmarkbar" ) {
# navigator-toolbox : is ( : hover , : focus-within ) {
--uc-toolbar-height : calc ( var ( --uc-tabbar-height ) + var ( --uc-navbar-height ) ) ;
}
}
@ supports -moz-bool-pref ( "userChrome.autohide.bookmarkbar" ) {
# navigator-toolbox : is ( : hover , : focus-within ) {
--uc-toolbar-height : calc ( var ( --uc-tabbar-height ) + var ( --uc-navbar-height ) + var ( --uc-bm-height ) ) ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ media screen and ( max-width : 1100px ) {
@ supports not -moz-bool-pref ( "userChrome.autohide.bookmarkbar" ) {
# navigator-toolbox : is ( : hover , : focus-within ) {
--uc-toolbar-height : calc ( var ( --uc-tabbar-height ) + var ( --uc-navbar-height ) ) ;
}
}
@ supports -moz-bool-pref ( "userChrome.autohide.bookmarkbar" ) {
# navigator-toolbox : is ( : hover , : focus-within ) {
--uc-toolbar-height : calc ( var ( --uc-tabbar-height ) + var ( --uc-navbar-height ) + var ( --uc-bm-height ) ) ;
}
}
}
}
}
}
}
}
@ supports not -moz-bool-pref ( "userChrome.autohide.tabbar" ) {
@ supports not -moz-bool-pref ( "userChrome.autohide.navbar" ) {
@ supports -moz-bool-pref ( "userChrome.autohide.bookmarkbar" ) {
# navigator-toolbox : is ( : hover , : focus-within ) {
--uc-toolbar-height : var ( --uc-bm-height ) ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.autohide.navbar" ) or -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports -moz-bool-pref ( "userChrome.autohide.navbar" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports not -moz-bool-pref ( "userChrome.autohide.bookmarkbar" ) {
# navigator-toolbox : is ( : hover , : focus-within ) {
--uc-toolbar-height : var ( --uc-navbar-height ) ;
}
}
@ supports -moz-bool-pref ( "userChrome.autohide.bookmarkbar" ) {
# navigator-toolbox : is ( : hover , : focus-within ) {
--uc-toolbar-height : calc ( var ( --uc-navbar-height ) + var ( --uc-bm-height ) ) ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ media screen and ( max-width : 1100px ) {
@ supports not -moz-bool-pref ( "userChrome.autohide.bookmarkbar" ) {
# navigator-toolbox : is ( : hover , : focus-within ) {
--uc-toolbar-height : var ( --uc-navbar-height ) ;
}
}
@ supports -moz-bool-pref ( "userChrome.autohide.bookmarkbar" ) {
# navigator-toolbox : is ( : hover , : focus-within ) {
--uc-toolbar-height : calc ( var ( --uc-navbar-height ) + var ( --uc-bm-height ) ) ;
}
}
}
}
}
}
}
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
}
@ supports -moz-bool-pref ( "userChrome.autohide.tabbar" ) or -moz-bool-pref ( "userChrome.autohide.navbar" ) {
@ supports -moz-bool-pref ( "userChrome.autohide.tabbar" ) or -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
: root : not ( [ customizing ] ) # titlebar {
margin-bottom : var ( --uc-tabbar-hide-height ) ;
will-change : margin-bottom ;
}
2022-12-04 09:37:08 +01:00
# TabsToolbar : not ( [ customizing ] ) {
will-change : opacity ;
}
2022-08-29 19:20:12 +02:00
@ supports not -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) {
2022-12-04 09:37:08 +01:00
# TabsToolbar : not ( [ customizing ] ) ,
# TabsToolbar : not ( [ customizing ] ) . titlebar-buttonbox-container {
2022-08-29 19:20:12 +02:00
opacity : 0 ;
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) {
# TabsToolbar : not ( [ customizing ] ) > * : not ( . titlebar-buttonbox-container ) {
opacity : 0 ;
}
}
# navigator-toolbox : is ( : hover , : focus-within ) > # titlebar {
margin-bottom : 0px ;
}
@ supports not -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) {
2022-12-04 09:37:08 +01:00
# navigator-toolbox : is ( : hover , : focus-within ) # TabsToolbar ,
# navigator-toolbox : is ( : hover , : focus-within ) # TabsToolbar . titlebar-buttonbox-container {
2022-08-29 19:20:12 +02:00
opacity : 1 ;
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) {
# navigator-toolbox : is ( : hover , : focus-within ) # TabsToolbar > * : not ( . titlebar-buttonbox-container ) {
opacity : 1 ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ media screen and ( min-width : 1100px ) {
: root : not ( [ customizing ] ) # titlebar {
margin-bottom : var ( --uc-tabbar-hide-height ) ;
will-change : margin-bottom ;
}
2022-12-04 09:37:08 +01:00
# TabsToolbar : not ( [ customizing ] ) {
will-change : opacity ;
}
2022-08-29 19:20:12 +02:00
@ supports not -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) {
2022-12-04 09:37:08 +01:00
# TabsToolbar : not ( [ customizing ] ) ,
# TabsToolbar : not ( [ customizing ] ) . titlebar-buttonbox-container {
2022-08-29 19:20:12 +02:00
opacity : 0 ;
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) {
# TabsToolbar : not ( [ customizing ] ) > * : not ( . titlebar-buttonbox-container ) {
opacity : 0 ;
}
}
# navigator-toolbox : is ( : hover , : focus-within ) > # titlebar {
margin-bottom : 0px ;
}
@ supports not -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) {
2022-12-04 09:37:08 +01:00
# navigator-toolbox : is ( : hover , : focus-within ) # TabsToolbar ,
# navigator-toolbox : is ( : hover , : focus-within ) # TabsToolbar . titlebar-buttonbox-container {
2022-08-29 19:20:12 +02:00
opacity : 1 ;
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) {
# navigator-toolbox : is ( : hover , : focus-within ) # TabsToolbar > * : not ( . titlebar-buttonbox-container ) {
opacity : 1 ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.autohide.tabbar" ) {
: root : not ( [ customizing ] ) # titlebar {
margin-bottom : var ( --uc-tabbar-hide-height ) ;
will-change : margin-bottom ;
}
2022-12-04 09:37:08 +01:00
# TabsToolbar : not ( [ customizing ] ) {
will-change : opacity ;
}
2022-08-29 19:20:12 +02:00
@ supports not -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) {
2022-12-04 09:37:08 +01:00
# TabsToolbar : not ( [ customizing ] ) ,
# TabsToolbar : not ( [ customizing ] ) . titlebar-buttonbox-container {
2022-08-29 19:20:12 +02:00
opacity : 0 ;
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) {
# TabsToolbar : not ( [ customizing ] ) > * : not ( . titlebar-buttonbox-container ) {
opacity : 0 ;
}
}
# navigator-toolbox : is ( : hover , : focus-within ) > # titlebar {
margin-bottom : 0px ;
}
@ supports not -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) {
2022-12-04 09:37:08 +01:00
# navigator-toolbox : is ( : hover , : focus-within ) # TabsToolbar ,
# navigator-toolbox : is ( : hover , : focus-within ) # TabsToolbar . titlebar-buttonbox-container {
2022-08-29 19:20:12 +02:00
opacity : 1 ;
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) {
# navigator-toolbox : is ( : hover , : focus-within ) # TabsToolbar > * : not ( . titlebar-buttonbox-container ) {
opacity : 1 ;
}
}
}
}
@ media ( prefers-reduced-motion : no-preference ) {
# titlebar : not ( [ customizing ] ) {
2022-09-21 21:21:27 +02:00
transition : margin-bottom var ( --uc-autohide-toolbar-speed ) var ( --animation-easing-function )
var ( --uc-autohide-toolbar-delay ) ,
2022-08-29 19:20:12 +02:00
background-color 1s var ( --animation-easing-function ) ! important ;
}
@ supports not -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) {
2022-12-04 09:37:08 +01:00
# TabsToolbar : not ( [ customizing ] ) ,
# TabsToolbar : not ( [ customizing ] ) . titlebar-buttonbox-container {
2022-09-21 21:21:27 +02:00
transition : opacity var ( --uc-autohide-toolbar-speed ) var ( --animation-easing-function )
var ( --uc-autohide-toolbar-delay ) ! important ;
2022-08-29 19:20:12 +02:00
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) {
# TabsToolbar : not ( [ customizing ] ) > * : not ( . titlebar-buttonbox-container ) {
2022-09-21 21:21:27 +02:00
transition : opacity var ( --uc-autohide-toolbar-speed ) var ( --animation-easing-function )
var ( --uc-autohide-toolbar-delay ) ! important ;
2022-08-29 19:20:12 +02:00
}
}
# navigator-toolbox : is ( : hover , : focus-within ) {
transition-delay : 0s ! important ;
}
# navigator-toolbox : is ( : hover , : focus-within ) > # titlebar : not ( [ customizing ] ) {
transition-delay : 0s ! important ;
}
@ supports not -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) {
2022-12-04 09:37:08 +01:00
# navigator-toolbox : is ( : hover , : focus-within ) # TabsToolbar : not ( [ customizing ] ) ,
# navigator-toolbox : is ( : hover , : focus-within ) # TabsToolbar : not ( [ customizing ] ) . titlebar-buttonbox-container {
2022-08-29 19:20:12 +02:00
transition-delay : 0s ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.on_bottom" ) {
# navigator-toolbox : is ( : hover , : focus-within )
# TabsToolbar : not ( [ customizing ] )
> * : not ( . titlebar-buttonbox-container ) {
transition-delay : 0s ! important ;
}
}
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.autohide.navbar" ) or -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports -moz-bool-pref ( "userChrome.autohide.navbar" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
# nav-bar : not ( [ customizing ] ) {
margin-bottom : var ( --uc-navbar-hide-height ) ;
opacity : 0 ;
will-change : margin-bottom , opacity ;
}
# navigator-toolbox : is ( : hover , : focus-within ) # nav-bar : not ( [ customizing ] ) {
margin-bottom : 0 ;
opacity : 1 ;
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ media screen and ( max-width : 1100px ) {
# nav-bar : not ( [ customizing ] ) {
margin-bottom : var ( --uc-navbar-hide-height ) ;
opacity : 0 ;
will-change : margin-bottom , opacity ;
}
# navigator-toolbox : is ( : hover , : focus-within ) # nav-bar : not ( [ customizing ] ) {
margin-bottom : 0 ;
opacity : 1 ;
}
}
}
}
}
@ media ( prefers-reduced-motion : no-preference ) {
# nav-bar : not ( [ customizing ] ) {
2022-09-21 21:21:27 +02:00
transition : margin-bottom var ( --uc-autohide-toolbar-speed ) var ( --animation-easing-function )
var ( --uc-autohide-toolbar-delay ) ,
opacity var ( --uc-autohide-toolbar-speed ) var ( --animation-easing-function ) var ( --uc-autohide-toolbar-delay ) ,
2022-08-29 19:20:12 +02:00
var ( --ext-theme-background-transition ) ! important ;
}
@ supports -moz-bool-pref ( "userChrome.autohide.fill_urlbar" ) {
# nav-bar : not ( [ customizing ] ) {
2022-09-21 21:21:27 +02:00
transition : margin-inline var ( --uc-autohide-toolbar-speed ) var ( --animation-easing-function )
var ( --uc-autohide-toolbar-delay ) ,
margin-bottom var ( --uc-autohide-toolbar-speed ) var ( --animation-easing-function )
var ( --uc-autohide-toolbar-delay ) ,
opacity var ( --uc-autohide-toolbar-speed ) var ( --animation-easing-function ) var ( --uc-autohide-toolbar-delay ) ,
2022-08-29 19:20:12 +02:00
var ( --ext-theme-background-transition ) ! important ;
}
}
# navigator-toolbox : is ( : hover , : focus-within ) # nav-bar : not ( [ customizing ] ) {
transition-delay : 0s ! important ;
}
}
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.autohide.bookmarkbar" ) {
# PersonalToolbar : not ( [ customizing ] ) {
margin-bottom : var ( --uc-bm-hide-height ) ;
opacity : 0 ;
will-change : margin-bottom , opacity ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.autohide.toolbar_overlap" ) {
2022-09-21 21:21:27 +02:00
@ supports not -moz-bool-pref ( "userChrome.autohide.toolbar_overlap.allow_layout_shift" ) {
@ supports not selector ( : has ( a ) ) {
# PersonalToolbar : not ( [ customizing ] ) [ collapsed = "true" ] {
visibility : visible ! important ;
max-height : unset ! important ;
}
}
2022-08-29 19:20:12 +02:00
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# navigator-toolbox : is ( : hover , : focus-within ) # PersonalToolbar : not ( [ customizing ] ) {
margin-bottom : 0 ;
opacity : 1 ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ media ( prefers-reduced-motion : no-preference ) {
# PersonalToolbar : not ( [ customizing ] ) {
2022-09-21 21:21:27 +02:00
transition : margin-bottom var ( --uc-autohide-toolbar-speed ) var ( --animation-easing-function )
var ( --uc-autohide-toolbar-delay ) ,
opacity var ( --uc-autohide-toolbar-speed ) var ( --animation-easing-function ) var ( --uc-autohide-toolbar-delay ) ,
min-height 170ms ease-out , max-height 170ms ease-out , var ( --ext-theme-background-transition ) ! important ;
2022-08-29 19:20:12 +02:00
}
# navigator-toolbox : is ( : hover , : focus-within ) # PersonalToolbar : not ( [ customizing ] ) {
transition-delay : 0s ! important ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.autohide.infobar" ) {
# tab-notification-deck : not ( [ customizing ] ) > . notificationbox-stack {
--infobar-height : calc (
25px + ( var ( --infobar-button-vertical-margin , 4px ) * 2 ) + var ( --infobar-message-vertical-margin , 8px )
) ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# tab-notification-deck : not ( [ customizing ] ) > . notificationbox-stack [ slot = "selected" ] > notification-message {
--infobar-message-margin : 0 4px calc ( -1 * var ( --infobar-height ) ) ;
opacity : 0 ;
will-change : margin-bottom , opacity ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# navigator-toolbox : is ( : hover , : focus-within )
# tab-notification-deck : not ( [ customizing ] )
> . notificationbox-stack [ slot = "selected" ]
> notification-message {
--infobar-message-margin : 0 4px var ( --infobar-message-vertical-margin , 8px ) ;
2022-05-11 21:19:02 +02:00
opacity : 1 ;
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.autohide.toolbar_overlap" ) {
# tab-notification-deck : not ( [ customizing ] ) {
height : 0 ;
}
2022-05-11 21:19:02 +02:00
}
@ media ( prefers-reduced-motion : no-preference ) {
2022-08-29 19:20:12 +02:00
# tab-notification-deck : not ( [ customizing ] ) > . notificationbox-stack [ slot = "selected" ] > notification-message {
2022-09-21 21:21:27 +02:00
transition : margin-bottom var ( --uc-autohide-toolbar-speed ) var ( --animation-easing-function )
var ( --uc-autohide-toolbar-delay ) ,
opacity var ( --uc-autohide-toolbar-speed ) var ( --animation-easing-function ) var ( --uc-autohide-toolbar-delay ) ,
2022-08-29 19:20:12 +02:00
var ( --ext-theme-background-transition ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
# navigator-toolbox : is ( : hover , : focus-within )
# tab-notification-deck : not ( [ customizing ] )
> . notificationbox-stack [ slot = "selected" ]
> notification-message {
transition-delay : 0s ! important ;
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
}
@ supports -moz-bool-pref ( "userChrome.autohide.sidebar" ) {
# sidebar-box {
min-width : var ( --uc-sidebar-width ) ! important ;
max-width : var ( --uc-sidebar-width ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
: root [ inFullscreen = "true" ] # sidebar-box {
min-width : var ( --uc-sidebar-activate-width ) ! important ;
max-width : var ( --uc-sidebar-activate-width ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.sidebar.overlap" ) {
2022-10-17 19:50:35 +02:00
# sidebar-header ,
2022-08-29 19:20:12 +02:00
# sidebar {
min-width : var ( --uc-sidebar-width ) ! important ;
max-width : var ( --uc-sidebar-width ) ! important ;
will-change : min-width , max-width ;
}
2022-10-17 19:50:35 +02:00
# sidebar-box : is ( : hover , : focus-within ) > # sidebar-header ,
2022-08-29 19:20:12 +02:00
# sidebar-box : is ( : hover , : focus-within ) > # sidebar {
min-width : var ( --uc-sidebar-activate-width ) ! important ;
max-width : var ( --uc-sidebar-activate-width ) ! important ;
}
: root [ inFullscreen = "true" ] # sidebar-box {
margin-inline-start : var ( --uc-sidebar-activate-width-reverse ) ! important ;
padding-inline-start : var ( --uc-sidebar-fullscreen-width ) ;
will-change : padding-inline-start ;
}
: root [ inFullscreen = "true" ] # sidebar-box : is ( : hover , : focus-within ) {
padding-inline-start : var ( --uc-sidebar-activate-width ) ;
}
: root [ inFullscreen = "true" ] # sidebar-box # sidebar-header ,
: root [ inFullscreen = "true" ] # sidebar-box # sidebar {
min-width : calc ( var ( --uc-sidebar-activate-width ) ) ! important ;
max-width : calc ( var ( --uc-sidebar-activate-width ) ) ! important ;
will-change : unset ;
}
@ media ( prefers-reduced-motion : no-preference ) {
2022-10-17 19:50:35 +02:00
# sidebar-header ,
2022-08-29 19:20:12 +02:00
# sidebar {
2022-10-17 19:50:35 +02:00
transition : min-width var ( --uc-autohide-sidebar-speed ) var ( --animation-easing-function )
var ( --uc-autohide-sidebar-delay ) ! important ;
2022-08-29 19:20:12 +02:00
}
2022-10-17 19:50:35 +02:00
# sidebar-box : is ( : hover , : focus-within ) > # sidebar-header ,
2022-08-29 19:20:12 +02:00
# sidebar-box : is ( : hover , : focus-within ) > # sidebar {
transition-delay : 0ms ! important ;
}
: root [ inFullscreen = "true" ] # sidebar-box {
2022-10-17 19:50:35 +02:00
transition : padding-inline-start var ( --uc-autohide-fullscreen-sidebar-speed ) var ( --animation-easing-function )
var ( --uc-autohide-sidebar-delay ) ! important ;
2022-08-29 19:20:12 +02:00
}
: root [ inFullscreen = "true" ] # sidebar-box : is ( : hover , : focus-within ) {
transition-delay : 0ms ! important ;
}
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ supports not -moz-bool-pref ( "userChrome.sidebar.overlap" ) {
# sidebar-box {
--uc-sidebar-fullscreen-margin : calc (
var ( --uc-sidebar-fullscreen-width ) + var ( --uc-sidebar-activate-width-reverse )
) ;
overflow : hidden ;
will-change : min-width , max-width ;
}
# sidebar-box : is ( : hover , : focus-within ) {
min-width : var ( --uc-sidebar-activate-width ) ! important ;
max-width : var ( --uc-sidebar-activate-width ) ! important ;
}
: root [ inFullscreen = "true" ] # sidebar-box : not ( [ positionend = "true" ] ) {
margin-inline-start : var ( --uc-sidebar-fullscreen-margin ) ! important ;
will-change : margin-inline-start ;
}
: root [ inFullscreen = "true" ] # sidebar-box : not ( [ positionend = "true" ] ) : is ( : hover , : focus-within ) {
margin-inline-start : 0 ! important ;
}
: root [ inFullscreen = "true" ] # sidebar-box [ positionend = "true" ] {
margin-inline-end : var ( --uc-sidebar-fullscreen-margin ) ! important ;
will-change : margin-inline-end ;
}
: root [ inFullscreen = "true" ] # sidebar-box [ positionend = "true" ] : is ( : hover , : focus-within ) {
margin-inline-end : 0 ! important ;
}
@ media ( prefers-reduced-motion : no-preference ) {
# sidebar-box {
2022-10-17 19:50:35 +02:00
transition : min-width var ( --uc-autohide-sidebar-speed ) var ( --animation-easing-function )
var ( --uc-autohide-sidebar-delay ) ! important ;
2022-08-29 19:20:12 +02:00
}
# sidebar-box : is ( : hover , : focus-within ) {
transition-delay : 0ms ! important ;
}
: root [ inFullscreen = "true" ] # sidebar-box {
2022-10-17 19:50:35 +02:00
transition : margin-inline-start var ( --uc-autohide-fullscreen-sidebar-speed ) var ( --animation-easing-function )
var ( --uc-autohide-sidebar-delay ) ! important ;
2022-08-29 19:20:12 +02:00
}
: root [ inFullscreen = "true" ] # sidebar-box [ positionend = "true" ] {
transition-property : margin-inline-end ! important ;
}
: root [ inFullscreen = "true" ] # sidebar-box : is ( : hover , : focus-within ) {
transition-delay : 0ms ! important ;
}
}
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.autohide.fill_urlbar" ) {
# nav-bar : not ( : hover , : focus-within , [ urlbar-exceeds-toolbar-bounds = "true" ] ) # urlbar-container {
-moz-box-ordinal-group : 0 ;
min-width : calc (
var ( --uc-navbar-width , 100vw ) -
( 2 * var ( --urlbar-margin-inline ) + var ( --uc-window-drag-space-pre , 0px ) + var ( --uc-navbar-gap , 0px ) )
) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
# nav-bar : is ( : hover , : focus-within , [ urlbar-exceeds-toolbar-bounds = "true" ] ) {
--uc-tabbar-width : calc ( 100vw - var ( --uc-navbar-width-origin ) ) ;
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ media ( prefers-reduced-motion : no-preference ) {
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
# nav-bar {
2022-09-21 21:21:27 +02:00
transition : margin-inline var ( --uc-autohide-toolbar-speed ) var ( --animation-easing-function )
var ( --uc-autohide-toolbar-delay ) ,
2022-08-29 19:20:12 +02:00
var ( --ext-theme-background-transition ) ! important ;
}
# nav-bar : is ( : hover , : focus-within , [ urlbar-exceeds-toolbar-bounds = "true" ] ) {
transition-delay : 0s ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ media screen and ( prefers-reduced-motion : no-preference ) and ( min-width : 1100px ) {
# nav-bar {
2022-09-21 21:21:27 +02:00
transition : margin-inline var ( --uc-autohide-toolbar-speed ) var ( --animation-easing-function )
var ( --uc-autohide-toolbar-delay ) ,
2022-08-29 19:20:12 +02:00
var ( --ext-theme-background-transition ) ! important ;
}
# nav-bar : is ( : hover , : focus-within , [ urlbar-exceeds-toolbar-bounds = "true" ] ) {
transition-delay : 0s ! important ;
}
}
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
# urlbar-container {
2022-09-21 21:21:27 +02:00
transition : min-width var ( --uc-autohide-toolbar-speed ) var ( --animation-easing-function )
var ( --uc-autohide-toolbar-delay ) ;
2022-08-29 19:20:12 +02:00
}
# nav-bar : is ( : hover , : focus-within , [ urlbar-exceeds-toolbar-bounds = "true" ] ) # urlbar-container {
transition-delay : 0s ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ media screen and ( prefers-reduced-motion : no-preference ) and ( max-width : 1100px ) {
# urlbar-container {
2022-09-21 21:21:27 +02:00
transition : min-width var ( --uc-autohide-toolbar-speed ) var ( --animation-easing-function )
var ( --uc-autohide-toolbar-delay ) ;
2022-08-29 19:20:12 +02:00
}
# nav-bar : is ( : hover , : focus-within , [ urlbar-exceeds-toolbar-bounds = "true" ] ) # urlbar-container {
transition-delay : 0s ! important ;
}
}
}
2022-05-11 21:19:02 +02:00
}
}
}
2022-08-29 19:20:12 +02:00
/** Hidden ********************************************************************/
@ supports not -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
# TabsToolbar {
display : none ! important ;
}
2022-05-11 21:19:02 +02:00
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.hidden.navbar" ) {
# nav-bar {
2022-12-04 09:37:08 +01:00
visibility : collapse ; /* display: none is not work */
2022-08-29 19:20:12 +02:00
}
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner" ) {
@ supports -moz-bool-pref ( "userChrome.tabbar.one_liner.responsive" ) {
@ media screen and ( max-width : 1100px ) {
@ supports -moz-bool-pref ( "userChrome.hidden.tabbar" ) {
# TabsToolbar {
display : none ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.hidden.navbar" ) {
# nav-bar {
2022-12-04 09:37:08 +01:00
visibility : collapse ; /* display: none is not work */
2022-08-29 19:20:12 +02:00
}
}
}
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.hidden.tab_icon" ) {
@ supports not -moz-bool-pref ( "userChrome.hidden.tab_icon.always" ) {
. tabbrowser-tab : not ( [ pinned = "true" ] ) . tab-icon-image {
display : none ;
}
}
@ supports -moz-bool-pref ( "userChrome.hidden.tab_icon.always" ) {
. tabbrowser-tab : not ( [ pinned = "true" ] ) . tab-icon-stack {
display : none ;
}
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.hidden.sidebar_header" ) {
@ supports not -moz-bool-pref ( "userChrome.hidden.sidebar_header.vertical_tab_only" ) {
# sidebar-header {
display : none ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.hidden.sidebar_header.vertical_tab_only" ) {
# sidebar-box : is ( [ sidebarcommand = "treestyletab_piro_sakura_ne_jp-sidebar-action" ] , [ sidebarcommand = "tabcenter-reborn_ariasuni-sidebar-action" ] , [ sidebarcommand = "sidebartabs_asamuzak_jp-sidebar-action" ] )
# sidebar-header {
display : none ! important ;
}
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.hidden.urlbar_iconbox" ) {
# identity-box [ pageproxystate = "valid" ] . notSecureText # identity-icon-label ,
# identity-box [ pageproxystate = "valid" ] . chromeUI # identity-icon-box ,
# identity-box [ pageproxystate = "valid" ] . extensionPage # identity-icon-box {
display : none ;
}
# identity-box [ pageproxystate = "valid" ] . notSecureText # identity-icon-box {
2022-12-04 09:37:08 +01:00
padding-inline-end : 5px ; /* Original: 8px */
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.hidden.bookmarkbar_icon" ) {
# PlacesToolbarItems . bookmark-item > . toolbarbutton-icon {
display : none ;
}
}
@ supports -moz-bool-pref ( "userChrome.hidden.bookmarkbar_label" ) {
# PlacesToolbarItems . bookmark-item > . toolbarbutton-text {
2022-12-04 09:37:08 +01:00
visibility : collapse ; /* display: none is not work */
2022-05-11 21:19:02 +02:00
}
}
2022-08-29 19:20:12 +02:00
@ supports -moz-bool-pref ( "userChrome.hidden.disabled_menu" ) {
menu [ disabled = "true" ] ,
menuitem : not ( # context-back , # context-forward ) [ disabled = "true" ] {
2022-12-04 09:37:08 +01:00
visibility : collapse ! important ;
2022-08-29 19:20:12 +02:00
}
@ supports -moz-bool-pref ( "widget.macos.native-context-menus" ) or -moz-bool-pref ( "widget.gtk.native-context-menus" ) {
# context-back [ disabled = "true" ] ,
# context-forward [ disabled = "true" ] {
2022-12-04 09:37:08 +01:00
visibility : collapse ! important ;
2022-05-11 21:19:02 +02:00
}
}
}
2022-08-29 19:20:12 +02:00
/** Icons *********************************************************************/
2022-10-17 19:50:35 +02:00
@ supports not -moz-bool-pref ( "userChrome.icon.disabled" ) {
/** Library - Icons Replace ***************************************************/
@ supports -moz-bool-pref ( "userChrome.icon.library" ) {
/*= Standard Folder - More Visible ===========================================*/
/* on Toolbar and Menus */
: -moz-any ( # PlacesToolbar , # BMB_bookmarksPopup , # bookmarksMenu )
. bookmark-item [ container = "true" ] : not ( [ query = "true" ] , [ tagContainer ] , [ dayContainer ] ) ,
: -moz-any ( # bookmarks-view , # historyTree , # editBMPanel_folderTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( title , container ) ,
# editBMPanel_folderMenuList : not ( [ selectedGuid = "toolbar_____" ] , [ selectedGuid = "menu________" ] ) ,
# editBMPanel_folderMenuList . folder-icon : not ( [ id ] ) ,
. downloadIconShow > . button-box > . button-icon {
list-style-image : url ( "../icons/folder.svg" ) ! important ;
}
/* Standard Folder - Open */
: -moz-any ( # PlacesToolbar , # BMB_bookmarksPopup , # bookmarksMenu )
. bookmark-item [ container = "true" ] : not ( [ query = "true" ] , [ tagContainer ] , [ dayContainer ] ) [ open = "true" ] ,
: -moz-any ( # bookmarks-view , # historyTree , # editBMPanel_folderTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( title , container , open ) {
list-style-image : url ( "../icons/folder-open.svg" ) ! important ;
}
/*= Other Folder - Inbox Icon ================================================*/
/* on Menus */
# PlacesToolbar # OtherBookmarks ,
# BMB_bookmarksPopup # BMB_unsortedBookmarks ,
# bookmarksMenuPopup # menu_unsortedBookmarks ,
: -moz-any ( # bookmarks-view , # editBMPanel_folderTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( container , OrganizerQuery_UnfiledBookmarks ) ,
: -moz-any ( # bookmarks-view , # editBMPanel_folderTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( container , queryFolder_unfiled_____ ) ,
# editBMPanel_unfiledRootItem ,
# editBMPanel_folderMenuList [ selectedGuid = "unfiled_____" ] {
list-style-image : url ( "../icons/mail-inbox-all.svg" ) ! important ;
}
/* Other Folder - Open */
# PlacesToolbar # OtherBookmarks [ open = "true" ] ,
# BMB_bookmarksPopup # BMB_unsortedBookmarks [ open = "true" ] ,
# bookmarksMenuPopup # menu_unsortedBookmarks [ open = "true" ] ,
: -moz-any ( # bookmarks-view , # editBMPanel_folderTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( container , open , OrganizerQuery_UnfiledBookmarks ) ,
: -moz-any ( # bookmarks-view , # editBMPanel_folderTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( container , open , queryFolder_unfiled_____ ) {
list-style-image : url ( "../icons/mail-inbox.svg" ) ! important ;
}
/*= Default Icon - Override ===================================================*/
/* https://github.com/mozilla/gecko-dev/blob/master/browser/themes/shared/places/tree-icons.css */
/* Query */
: -moz-any ( # historyTree , # placesList , # placeContent ) treechildren :: -moz-tree-image ( title , query ) {
list-style-image : url ( "chrome://browser/skin/places/folder-smart.svg" ) ! important ;
}
/* History */
: -moz-any ( # historyTree , # placesList , # placeContent ) treechildren :: -moz-tree-image ( title , query , dayContainer ) ,
: -moz-any ( # historyTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( query , OrganizerQuery_history____v ) {
list-style-image : url ( "chrome://browser/skin/history.svg" ) ! important ;
}
/* Downloads */
: -moz-any ( # placesList , # placeContent ) treechildren :: -moz-tree-image ( query , OrganizerQuery_downloads__v ) {
list-style-image : url ( "chrome://browser/skin/downloads/downloads.svg" ) ! important ;
}
/* Tag */
: -moz-any ( # placesList , # placeContent ) treechildren :: -moz-tree-image ( title , query , tagContainer ) ,
: -moz-any ( # placesList , # placeContent ) treechildren :: -moz-tree-image ( query , OrganizerQuery_tags_______v ) {
list-style-image : url ( "chrome://browser/skin/places/tag.svg" ) ! important ;
}
/* Bookmark */
: -moz-any ( # placesList , # placeContent ) treechildren :: -moz-tree-image ( query , OrganizerQuery_allbms_____v ) {
list-style-image : url ( "chrome://browser/skin/bookmark.svg" ) ! important ;
}
/* Bookmark Toolbar */
# BMB_bookmarksPopup # BMB_bookmarksToolbar ,
# bookmarksMenuPopup # bookmarksToolbarFolderMenu ,
: -moz-any ( # bookmarks-view , # editBMPanel_folderTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( container , queryFolder_toolbar_____ ) {
list-style-image : url ( "chrome://browser/skin/places/bookmarksToolbar.svg" ) ! important ;
}
/* Bookmark Menu */
: -moz-any ( # bookmarks-view , # editBMPanel_folderTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( container , queryFolder_menu________ ) {
list-style-image : url ( "chrome://browser/skin/places/bookmarksMenu.svg" ) ! important ;
}
/*= Default Icon - Open ======================================================*/
/* Query */
: -moz-any ( # PlacesToolbar , # BMB_bookmarksPopup , # bookmarksMenu )
. bookmark-item [ container = "true" ] [ query = "true" ] : not ( [ tagContainer ] ) [ open = "true" ]
> . menu-iconic-left
> . menu-iconic-icon {
transform : rotate ( 15deg ) ! important ;
}
/* History */
: -moz-any ( # historyTree , # placesList , # placeContent ) treechildren :: -moz-tree-image ( title , query , open , dayContainer ) ,
: -moz-any ( # historyTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( query , open , OrganizerQuery_history____v ) {
list-style-image : url ( "../icons/history-reverse.svg" ) ! important ;
}
/* Tag */
: -moz-any ( # PlacesToolbar , # BMB_bookmarksPopup , # bookmarksMenu )
. bookmark-item [ container = "true" ] [ tagContainer = "true" ] [ open = "true" ] ,
: -moz-any ( # placesList , # placeContent ) treechildren :: -moz-tree-image ( title , query , open , tagContainer ) ,
: -moz-any ( # placesList , # placeContent ) treechildren :: -moz-tree-image ( query , open , OrganizerQuery_tags_______v ) {
list-style-image : url ( "../icons/tag-open.svg" ) ! important ;
}
/* Bookmark */
: -moz-any ( # placesList , # placeContent ) treechildren :: -moz-tree-image ( query , open , OrganizerQuery_allbms_____v ) {
list-style-image : url ( "chrome://browser/skin/bookmark-hollow.svg" ) ! important ;
}
/* Bookmark Toolbar */
# BMB_bookmarksPopup # BMB_bookmarksToolbar [ open = "true" ] ,
# bookmarksMenuPopup # bookmarksToolbarFolderMenu [ open = "true" ] ,
: -moz-any ( # bookmarks-view , # editBMPanel_folderTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( container , open , queryFolder_toolbar_____ ) {
list-style-image : url ( "../icons/bookmarksToolbar-open.svg" ) ! important ;
}
/* Bookmark Menu */
: -moz-any ( # bookmarks-view , # editBMPanel_folderTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( container , open , queryFolder_menu________ ) {
2022-12-04 09:37:08 +01:00
list-style-image : url ( "../icons/bookmarksMenu-open.svg" ) ! important ; /* or bookmarksMenu-open2.svg" */
2022-10-17 19:50:35 +02:00
}
@ -moz-document url ( "chrome://browser/content/places/places.xhtml" )
{
@ media ( -moz-gtk-csd-available ) {
/*= Menubar - Icons ==========================================================*/
# organizeButton ,
# viewMenu ,
# maintenanceButton ,
# back-button ,
# forward-button ,
# clearDownloadsButton {
fill : currentColor ! important ;
2022-12-04 09:37:08 +01:00
-moz-context-properties : fill , fill-opacity , stroke ! important ;
2022-10-17 19:50:35 +02:00
}
/* Add */
# organizeButton {
list-style-image : url ( "chrome://global/skin/icons/settings.svg" ) ! important ;
}
# viewMenu {
list-style-image : url ( "../icons/sort.svg" ) ! important ;
}
# maintenanceButton {
list-style-image : url ( "../icons/import-export.svg" ) ! important ;
}
# clearDownloadsButton {
list-style-image : url ( "chrome://global/skin/icons/delete.svg" ) ! important ;
}
# clearDownloadsButton > . toolbarbutton-icon {
display : -moz-inline-box ! important ;
margin-top : 0 ;
margin-bottom : 0 ;
margin-inline-start : 0 ;
margin-inline-end : 2px ;
}
/* Replace */
# back-button {
list-style-image : url ( "chrome://browser/skin/back.svg" ) ! important ;
}
# forward-button {
list-style-image : url ( "chrome://browser/skin/forward.svg" ) ! important ;
}
# back-button : -moz-locale-dir ( rtl ) > . toolbarbutton-icon ,
# forward-button : -moz-locale-dir ( rtl ) > . toolbarbutton-icon {
transform : scaleX ( -1 ) ! important ;
}
2022-05-11 21:19:02 +02:00
}
}
}
2022-10-17 19:50:35 +02:00
/** Panel - Icons *************************************************************/
@ supports -moz-bool-pref ( "userChrome.icon.panel" ) {
/*= Padding ==================================================================*/
2022-05-11 21:19:02 +02:00
: root {
2022-10-17 19:50:35 +02:00
--arrowpanel-menuicon-padding : 8px ;
--arrowpanel-menublank-padding : calc (
var ( --arrowpanel-menuicon-padding ) * 2 + var ( var ( --arrowpanel-menuitem-padding-inline ) )
) ! important ;
2022-05-11 21:19:02 +02:00
--arrowpanel-menuimageblank-padding : calc ( var ( --arrowpanel-menuitem-padding-inline ) - 2px ) ! important ;
2022-10-17 19:50:35 +02:00
--arrowpanel-menuimageblank-padding-block : calc ( var ( --arrowpanel-menuitem-padding-block ) - 2px ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
. subviewbutton > . toolbarbutton-icon {
width : 16px ;
}
2022-12-04 09:37:08 +01:00
@ supports not -moz-bool-pref ( "userChrome.icon.panel_full" ) {
2022-10-17 19:50:35 +02:00
: root {
/* Global */
--arrowpanel-menuicon-paddingx2 : calc ( var ( --arrowpanel-menuicon-padding ) * 2 ) ;
/* General Panel */
--arrowpanel-menublank-padding : calc ( var ( --arrowpanel-menuicon-paddingx2 ) + 8px ) ! important ;
--arrowpanel-menuimageblank-padding : calc ( var ( --arrowpanel-menuitem-padding-inline ) - 2px ) ! important ;
/* Blank Menu Left Padding */
--arrowpanel-menuimageblank-padding-horizontal : calc (
var ( --arrowpanel-menuicon-paddingx2 ) + var ( --arrowpanel-menuitem-padding-inline )
) ;
--arrowpanel-menuitemblank-padding : calc ( var ( --arrowpanel-menuitem-padding-block ) + 1px ) ;
}
}
# downloadsHistory . button-text ,
. subviewbutton > . toolbarbutton-text {
padding-inline-start : var ( --arrowpanel-menuicon-padding ) ! important ;
}
. toolbaritem-combined-buttons > . subviewbutton : not ( . subviewbutton-iconic ) > . toolbarbutton-text {
padding-inline-start : 0 ! important ;
}
# panelMenu_bookmarksMenu . subviewbutton [ disabled = "true" ] . toolbarbutton-text ,
# appMenu_historyMenu . subviewbutton [ disabled = "true" ] . toolbarbutton-text {
padding-inline-start : var ( --arrowpanel-menublank-padding ) ! important ;
}
# appMenu-proton-update-banner . toolbarbutton-text {
margin-inline-start : 0 ! important ;
2022-12-04 09:37:08 +01:00
padding-inline-start : 0 ! important ; /* FF v107 */
2022-10-17 19:50:35 +02:00
}
# appMenu-multiView . subviewbutton :: before ,
# appMenu-proton-update-banner :: before {
display : -moz-inline-box ;
margin-inline-end : var ( --arrowpanel-menuicon-padding ) ;
width : 16px ;
height : 16px ;
}
# appMenu-proton-update-banner {
margin-bottom : 2px ! important ;
padding-inline-start : var ( --arrowpanel-menuitem-padding-inline ) ! important ;
}
# appMenu-fxa-status2 ,
# appMenu-zoom-controls2 ,
# appMenu-zoom-controls {
align-items : center ;
padding-top : var ( --arrowpanel-menuimageblank-padding-block ) ! important ;
padding-bottom : var ( --arrowpanel-menuimageblank-padding-block ) ! important ;
}
# appMenu-zoom-controls2 :: before ,
# appMenu-zoom-controls :: before {
margin-inline-end : 0 ! important ;
}
# appMenu-zoomReduce-button2 ,
# appMenu-zoomReset-button2 ,
# appMenu-zoomEnlarge-button2 ,
# appMenu-fullscreen-button2 {
--arrowpanel-menuitem-padding-block : 0px ;
}
. subviewbutton [ type = "checkbox" ] : not ( [ checked = "true" ] ) > . toolbarbutton-text {
margin-left : 16px ! important ;
}
/* Icons Color */
# appMenu-multiView . subviewbutton :: before ,
# appMenu-proton-update-banner :: before ,
# downloadsHistory . button-icon ,
. subviewbutton : not ( # appMenu-proton-update-banner ) > image {
fill : currentColor ! important ;
fill-opacity : var ( --toolbarbutton-icon-fill-opacity ) ! important ;
2022-12-04 09:37:08 +01:00
-moz-context-properties : fill , fill-opacity , stroke ! important ;
2022-10-17 19:50:35 +02:00
}
# appMenu-zoomReduce-button2 > . toolbarbutton-icon ,
# appMenu-zoomEnlarge-button2 > . toolbarbutton-icon {
stroke : var ( --zoom-controls-bgcolor , var ( --button-bgcolor , ButtonFace ) ) ! important ;
}
# appMenu-zoomReduce-button2 : not ( [ disabled ] , [ open ] , : active ) : is ( : hover ) > . toolbarbutton-icon ,
# appMenu-zoomEnlarge-button2 : not ( [ disabled ] , [ open ] , : active ) : is ( : hover ) > . toolbarbutton-icon {
stroke : var ( --button-hover-bgcolor ) ! important ;
}
. subviewbutton [ disabled = "true" ] > image {
/* Ghost icons when disabled */
opacity : 0 . 4 ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
/*= Panel - Main =============================================================*/
# appMenu-proton-addon-banners > . addon-banner-item > . toolbarbutton-icon {
display : -moz-inline-box ! important ;
margin-inline-start : var ( --arrowpanel-menuicon-padding ) ;
-moz-box-ordinal-group : 0 ! important ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
# appMenu-proton-update-banner :: before {
content : url ( "../icons/whatsnew.svg" ) ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
# appMenu-fxa-status2 :: before {
/* Don't exist img tag */
content : url ( "chrome://browser/skin/fxa/avatar-empty.svg" ) ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
# appMenu-fxa-status2 : is ( [ fxastatus = "signedin" ] , [ fxastatus = "unverified" ] , [ fxastatus = "login-failed" ] ) :: before {
display : none ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
# appMenu-fxa-status2 : is ( [ fxastatus = "signedin" ] , [ fxastatus = "unverified" ] , [ fxastatus = "login-failed" ] )
# appMenu-fxa-label2 :: before {
/* url("https://profile.accounts.firefox.com/v1/avatar/a") */
content : "" ;
border-radius : 50 % ! important ;
background-size : 16px ! important ;
background-image : var ( --avatar-image-url ) ! important ;
}
@ supports -moz-bool-pref ( "userChrome.icon.panel_full" ) or -moz-bool-pref ( "userChrome.icon.panel_photon" ) {
# appMenu-new-tab-button2 {
list-style-image : url ( "chrome://browser/skin/new-tab.svg" ) ;
}
}
@ supports -moz-bool-pref ( "userChrome.icon.panel_photon" ) {
# appMenu-save-file-button2 ,
# appMenu-find-button2 ,
# appMenu-more-button2 {
padding-top : var ( --arrowpanel-menuitemblank-padding ) ! important ;
padding-bottom : var ( --arrowpanel-menuitemblank-padding ) ! important ;
}
# appMenu-zoom-controls2 ,
# appMenu-zoom-controls {
padding-inline-start : var ( --arrowpanel-menuimageblank-padding-horizontal ) ! important ;
}
}
2022-12-04 09:37:08 +01:00
@ supports not -moz-bool-pref ( "userChrome.icon.panel_photon" ) {
@ supports not -moz-bool-pref ( "userChrome.icon.panel_full" ) {
# appMenu-new-tab-button2 ,
# appMenu-passwords-button ,
# appMenu-extensions-themes-button ,
# appMenu-save-file-button2 ,
# appMenu-find-button2 ,
# appMenu-more-button2 ,
# appMenu-help-button2 ,
# appMenu-quit-button2 {
padding-top : var ( --arrowpanel-menuitemblank-padding-block ) ! important ;
padding-bottom : var ( --arrowpanel-menuitemblank-padding-block ) ! important ;
}
# appMenu-zoom-controls2 ,
# appMenu-zoom-controls {
padding-inline-start : var ( --arrowpanel-menuimageblank-padding-horizontal ) ! important ;
}
2022-10-17 19:50:35 +02:00
}
}
# appMenu-new-window-button2 {
list-style-image : url ( "chrome://browser/skin/window.svg" ) ;
}
# appMenu-new-private-window-button2 {
list-style-image : url ( "chrome://browser/skin/privateBrowsing.svg" ) ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
# appMenu-bookmarks-button {
list-style-image : url ( "chrome://browser/skin/bookmark.svg" ) ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
# appMenu-history-button {
list-style-image : url ( "chrome://browser/skin/history.svg" ) ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
# appMenu-downloads-button {
list-style-image : url ( "chrome://browser/skin/downloads/downloads.svg" ) ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
@ supports -moz-bool-pref ( "userChrome.icon.panel_full" ) or -moz-bool-pref ( "userChrome.icon.panel_photon" ) {
# appMenu-passwords-button {
list-style-image : url ( "chrome://browser/skin/login.svg" ) ;
}
# appMenu-extensions-themes-button {
list-style-image : url ( "chrome://mozapps/skin/extensions/extension.svg" ) ;
}
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
# appMenu-print-button2 {
list-style-image : url ( "chrome://global/skin/icons/print.svg" ) ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
@ supports -moz-bool-pref ( "userChrome.icon.panel_full" ) {
# appMenu-save-file-button2 {
2022-12-04 09:37:08 +01:00
list-style-image : url ( "../icons/toolbarButton-download.svg" ) ;
2022-10-17 19:50:35 +02:00
}
# appMenu-find-button2 {
list-style-image : url ( "chrome://global/skin/icons/search-glass.svg" ) ;
}
# appMenu-zoom-controls2 :: before ,
# appMenu-zoom-controls :: before {
content : url ( "../icons/screenshot.svg" ) ;
}
}
# appMenu-settings-button {
list-style-image : url ( "chrome://global/skin/icons/settings.svg" ) ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
@ supports -moz-bool-pref ( "userChrome.icon.panel_full" ) {
# appMenu-more-button2 {
list-style-image : url ( "chrome://browser/skin/ion.svg" ) ;
}
}
@ supports -moz-bool-pref ( "userChrome.icon.panel_full" ) or -moz-bool-pref ( "userChrome.icon.panel_photon" ) {
# appMenu-help-button2 {
list-style-image : url ( "chrome://global/skin/icons/help.svg" ) ;
}
# appMenu-quit-button2 {
list-style-image : url ( "../icons/quit.svg" ) ;
}
}
/*= Panel - Account ==========================================================*/
# PanelUI-fxa-menu-connect-device-button . toolbarbutton-icon ,
# PanelUI-fxa-menu-account-signout-button . toolbarbutton-icon {
width : 16px ! important ;
height : 16px ! important ;
}
/* Default */
# fxa-manage-account-button :: before {
content : "" ;
display : -moz-inline-box ;
width : 32px ! important ;
height : 32px ! important ;
border-radius : 50 % ;
background-size : 32px ;
background-image : var ( --avatar-image-url ) ;
margin-inline-end : var ( --arrowpanel-menuicon-padding ) ;
}
@ supports -moz-bool-pref ( "userChrome.icon.account_image_to_right" ) {
# fxa-manage-account-button :: before {
-moz-box-ordinal-group : 2 ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.icon.account_label_to_right" ) {
# fxa-menu-header-title ,
# fxa-menu-header-description {
text-align : right ;
}
}
. syncNowBtn {
visibility : visible ! important ;
-moz-box-ordinal-group : 1 ! important ;
margin-inline-end : var ( --arrowpanel-menuicon-padding ) ;
}
# PanelUI-fxa-menu-setup-sync-button {
list-style-image : url ( "chrome://browser/skin/sync.svg" ) ;
}
# PanelUI-fxa-menu-connect-device-button {
list-style-image : url ( "chrome://browser/skin/fxa/add-device.svg" ) ;
}
# PanelUI-fxa-menu-sendtab-button {
list-style-image : url ( "../icons/send-to-device.svg" ) ;
}
# PanelUI-fxa-menu-sync-prefs-button {
list-style-image : url ( "chrome://global/skin/icons/settings.svg" ) ;
}
# PanelUI-fxa-menu-account-signout-button {
list-style-image : url ( "../icons/sign-out.svg" ) ;
}
# PanelUI-remotetabs-view-managedevices :: before {
/* Box */
content : "" ;
padding-inline-end : 16px ;
padding-block : 1px ;
margin-inline-end : var ( --arrowpanel-menuicon-padding ) ;
/* Color */
fill : currentColor ;
fill-opacity : var ( --toolbarbutton-icon-fill-opacity ) ;
2022-12-04 09:37:08 +01:00
-moz-context-properties : fill , fill-opacity , stroke ;
2022-10-17 19:50:35 +02:00
background-size : 16px ;
background-repeat : no-repeat ;
background-position : left center ;
background-image : url ( "chrome://global/skin/icons/settings.svg" ) ;
}
. PanelUI-remotetabs-notabsforclient-label {
margin-inline-start : calc (
var ( --arrowpanel-menuicon-padding ) + var ( --arrowpanel-menuitem-padding-inline )
) ! important ;
padding-inline-start : var ( --arrowpanel-menublank-padding ) ! important ;
}
/* Change Separator */
# PanelUI-fxa-menu :: before {
content : "" ;
display : -moz-box ;
border-bottom : 1px solid var ( --panel-separator-color ) ;
margin : var ( --panel-separator-margin ) ;
padding : 0 ;
}
# PanelUI-fxa-menu > : first-child {
-moz-box-ordinal-group : 0 ;
}
# PanelUI-sign-out-separator {
display : none ;
}
. pageAction-sendToDevice-device . subviewbutton . sync-menuitem . sendtab-target [ clientType = "" ] ,
. sendToDevice-device . subviewbutton . sync-menuitem . sendtab-target [ clientType = "" ] {
list-style-image : url ( "../icons/send-to-device.svg" ) ;
}
. pageAction-sendToDevice-device . subviewbutton . sync-menuitem . sendtab-target : not ( [ clientType ] ) ,
. sendToDevice-device . subviewbutton . sync-menuitem . sendtab-target : not ( [ clientType ] ) {
list-style-image : url ( "chrome://global/skin/icons/settings.svg" ) ;
}
/*= Panel - Bookmark =========================================================*/
# panelMenuBookmarkThisPage {
list-style-image : url ( "chrome://browser/skin/bookmark-hollow.svg" ) ;
}
panelMenuBookmarkThisPage [ starred ] {
list-style-image : url ( "chrome://browser/skin/bookmark.svg" ) ;
}
# panelMenu_searchBookmarks {
list-style-image : url ( "chrome://global/skin/icons/search-glass.svg" ) ;
}
# panelMenu_viewBookmarksToolbar {
list-style-image : url ( "chrome://browser/skin/bookmarks-toolbar.svg" ) ;
}
# panelMenu_showAllBookmarks {
list-style-image : url ( "chrome://browser/skin/bookmark-star-on-tray.svg" ) ;
}
/*= Panel - History ==========================================================*/
# appMenuRecentlyClosedTabs {
list-style-image : url ( "chrome://browser/skin/tab.svg" ) ;
}
# appMenuRecentlyClosedWindows {
list-style-image : url ( "chrome://browser/skin/window.svg" ) ;
}
# appMenuRestoreSession ,
# appMenu-restoreSession {
list-style-image : url ( "../icons/restore-session.svg" ) ;
}
# appMenuClearRecentHistory {
list-style-image : url ( "chrome://browser/skin/forget.svg" ) ;
}
# PanelUI-historyMore {
list-style-image : url ( "chrome://browser/skin/history.svg" ) ;
}
# appMenu-library-recentlyClosedTabs {
list-style-image : url ( "../icons/movetowindow-16.svg" ) ;
}
# appMenu-library-recentlyClosedWindows {
list-style-image : url ( "../icons/restore-session.svg" ) ;
}
/*= Panel - More tools =======================================================*/
# appmenu-moreTools-button {
list-style-image : url ( "chrome://browser/skin/customize.svg" ) ;
}
/* Web Developer Tools */
# appmenu-developer-tools-view . subviewbutton : nth-child ( 1 ) ,
# PanelUI-developer-tools-view . subviewbutton : nth-child ( 1 ) {
list-style-image : url ( "../icons/developer.svg" ) ;
}
/* Task Manager */
# appmenu-developer-tools-view . subviewbutton : nth-child ( 2 ) ,
# PanelUI-developer-tools-view . subviewbutton : nth-child ( 2 ) {
list-style-image : url ( "../icons/performance.svg" ) ;
}
/* Remote Debugging - Edge bug.svg */
# appmenu-developer-tools-view . subviewbutton : nth-child ( 3 ) ,
# PanelUI-developer-tools-view . subviewbutton : nth-child ( 3 ) {
list-style-image : url ( "../icons/bug.svg" ) ;
}
/* Browser Toolbox - Edge webdeveloper.svg */
# appmenu-developer-tools-view . subviewbutton : nth-child ( 4 ) ,
# PanelUI-developer-tools-view . subviewbutton : nth-child ( 4 ) {
list-style-image : url ( "../icons/window-dev-tools.svg" ) ;
}
/* Browser Content Toolbox */
# appmenu-developer-tools-view . subviewbutton : nth-child ( 5 ) ,
# PanelUI-developer-tools-view . subviewbutton : nth-child ( 5 ) {
list-style-image : url ( "../icons/command-frames.svg" ) ;
}
/* Browser Console */
# appmenu-developer-tools-view . subviewbutton : nth-last-child ( 5 ) ,
# PanelUI-developer-tools-view . subviewbutton : nth-last-child ( 5 ) {
list-style-image : url ( "chrome://devtools/skin/images/command-console.svg" ) ;
}
/* Responsive Design Mode */
# appmenu-developer-tools-view . subviewbutton : nth-last-child ( 4 ) ,
# PanelUI-developer-tools-view . subviewbutton : nth-last-child ( 4 ) {
list-style-image : url ( "../icons/command-responsivemode.svg" ) ;
}
/* Eyedropper */
# appmenu-developer-tools-view . subviewbutton : nth-last-child ( 3 ) ,
# PanelUI-developer-tools-view . subviewbutton : nth-last-child ( 3 ) {
list-style-image : url ( "chrome://devtools/skin/images/command-eyedropper.svg" ) ;
}
/* Page Source - Edge file-search.svg */
# appmenu-developer-tools-view . subviewbutton : nth-last-child ( 2 ) ,
# PanelUI-developer-tools-view . subviewbutton : nth-last-child ( 2 ) {
list-style-image : url ( "../icons/document-search.svg" ) ;
}
/* Extensions for Devel */
# appmenu-developer-tools-view . subviewbutton : nth-last-child ( 1 ) ,
# PanelUI-developer-tools-view . subviewbutton : nth-last-child ( 1 ) {
list-style-image : url ( "chrome://devtools/skin/images/debugging-addons.svg" ) ;
}
# appmenu-developer-tools-view . subviewbutton : last-child {
margin-bottom : 6px ! important ;
}
/*= Panel - Help =============================================================*/
# appMenu_menu_openHelp {
list-style-image : url ( "chrome://global/skin/icons/help.svg" ) ;
}
# appMenu_feedbackPage {
list-style-image : url ( "../icons/send.svg" ) ;
}
# appMenu_helpSafeMode {
list-style-image : url ( "chrome://devtools/skin/images/debugging-workers.svg" ) ;
}
# appMenu_troubleShooting {
list-style-image : url ( "chrome://global/skin/icons/more.svg" ) ;
}
# appMenu_help_reportSiteIssue {
list-style-image : url ( "chrome://global/skin/icons/lightbulb.svg" ) ;
}
# appMenu_menu_HelpPopup_reportPhishingtoolmenu {
list-style-image : url ( "chrome://global/skin/icons/warning.svg" ) ;
}
# appMenu_aboutName {
list-style-image : url ( "chrome://global/skin/icons/info.svg" ) ;
}
/*= Panel - Library ==========================================================*/
# appMenu-library-bookmarks-button {
list-style-image : url ( "chrome://browser/skin/bookmark.svg" ) ;
}
# appMenu-library-history-button {
list-style-image : url ( "chrome://browser/skin/history.svg" ) ;
}
# appMenu-library-downloads-button {
list-style-image : url ( "chrome://browser/skin/downloads/downloads.svg" ) ;
}
/*= Panel - Downloads ========================================================*/
# downloadsHistory {
list-style-image : url ( "chrome://browser/skin/downloads/downloads.svg" ) ;
}
# downloadsHistory . box-inherit . button-box {
display : -moz-inline-box ! important ;
}
/*= Toolbar - Overflow Menu ==================================================*/
# overflowMenu-customize-button {
list-style-image : url ( "chrome://browser/skin/customize.svg" ) ;
}
/*= Tabbar - All Tab Menu ====================================================*/
# allTabsMenu-undoCloseTab {
list-style-image : url ( "../icons/undo.svg" ) ;
}
# allTabsMenu-searchTabs {
list-style-image : url ( "chrome://global/skin/icons/search-glass.svg" ) ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
# allTabsMenu-containerTabsButton {
list-style-image : url ( "../icons/container-openin-16.svg" ) ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
# allTabsMenu-hiddenTabsButton {
list-style-image : url ( "../icons/eye-hide.svg" ) ;
}
# allTabsMenu-containerTabsView . subviewbutton : last-child {
list-style-image : url ( "chrome://global/skin/icons/settings.svg" ) ;
}
/*= BMB_bookmarksPopup =======================================================*/
# BMB_bookmarksShowAllTop ,
# BMB_bookmarksShowAll {
--menuitem-image : url ( "chrome://browser/skin/bookmark-star-on-tray.svg" ) ;
}
# BMB_bookmarksToolbar {
--menuitem-image : url ( "chrome://browser/skin/bookmarks-toolbar.svg" ) ;
}
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
# BMB_bookmarksShowAllTop {
list-style-image : url ( "chrome://browser/skin/bookmark-star-on-tray.svg" ) ! important ;
}
# BMB_bookmarksShowAllTop > . menu-iconic-left {
display : -moz-box ! important ;
}
}
/* BMB_bookmarksToolbarPopup */
# BMB_viewBookmarksToolbar [ data-l10n-args = '{"isVisible":true}' ] {
--menuitem-image : url ( "../icons/eye-hide.svg" ) ;
}
# BMB_viewBookmarksToolbar [ data-l10n-args = '{"isVisible":false}' ] {
--menuitem-image : url ( "../icons/eye-show.svg" ) ;
}
/*= protections-popup ========================================================*/
# protections-popup-settings-button > . protections-popup-settings-icon ,
# protections-popup-show-report-button > . protections-popup-show-report-icon {
2022-12-04 09:37:08 +01:00
-moz-context-properties : fill , fill-opacity , stroke ;
2022-10-17 19:50:35 +02:00
fill : currentColor ;
margin-inline-end : 1em ;
}
# protections-popup-settings-button > . protections-popup-settings-icon ,
# protections-popup-multiView . panel-subview-footer-button {
list-style-image : url ( "chrome://global/skin/icons/settings.svg" ) ;
}
# protections-popup-show-report-button > . protections-popup-show-report-icon {
/* chrome://browser/skin/controlcenter/dashboard.svg */
list-style-image : url ( "../icons/dashboard.svg" ) ;
}
/*= identity-popup ===========================================================*/
# identity-popup-clear-sitedata-button ,
# identity-popup-more-info {
padding-inline : 5px ! important ;
}
# identity-popup-securityView-body {
2022-12-04 09:37:08 +01:00
margin-inline-start : 32px ! important ; /* Original: 10px */
2022-10-17 19:50:35 +02:00
}
# identity-popup-clear-sitedata-button {
list-style-image : url ( "../icons/broom.svg" ) ;
}
/*= sidebarMenu-popup ========================================================*/
# identity-popup-more-info {
list-style-image : url ( "chrome://global/skin/icons/info.svg" ) ;
}
# sidebar-switcher-bookmarks {
list-style-image : url ( "chrome://browser/skin/bookmark.svg" ) ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
# sidebar-switcher-history {
list-style-image : url ( "chrome://browser/skin/history.svg" ) ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
# sidebar-switcher-tabs {
list-style-image : url ( "chrome://browser/skin/tab.svg" ) ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
# sidebar-reverse-position {
list-style-image : url ( "chrome://browser/skin/sidebars-right.svg" ) ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
# sidebar-box [ positionend = "true" ] # sidebar-reverse-position {
/* Can't apply this. shadow dom */
list-style-image : url ( "chrome://browser/skin/sidebars.svg" ) ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
# sidebarMenu-popup > . subviewbutton [ data-l10n-id = "sidebar-menu-close" ] {
list-style-image : url ( "chrome://global/skin/icons/close.svg" ) ;
2022-05-11 21:19:02 +02:00
}
2022-12-04 09:37:08 +01:00
/*= unified-extensions-view ===================================================*/
# unified-extensions-manage-extensions {
list-style-image : url ( "chrome://mozapps/skin/extensions/extension.svg" ) ;
}
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
/** Menu - Icons Layout *******************************************************/
@ supports -moz-bool-pref ( "userChrome.icon.menu" ) {
menupopup menuitem : not ( [ type = "checkbox" ] [ checked = "true" ] , [ type = "radio" ] ) ,
menupopup menu : not ( [ type = "checkbox" ] [ checked = "true" ] , [ type = "radio" ] ) ,
# main-menubar > menu {
2022-12-04 09:37:08 +01:00
-moz-appearance : none ! important ; /* Linux: menulist */
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
/* Icon */
# main-menubar > menu ,
: not ( menu , # ContentSelectDropdown )
2022-05-11 21:19:02 +02:00
> menupopup
2022-06-29 20:07:26 +02:00
> menuitem : not ( . menuitem-iconic , . bookmark-item , . in-menulist , [ checked = "true" ] ) ,
2022-10-17 19:50:35 +02:00
: not ( menu , # ContentSelectDropdown ) > menupopup > menu : not ( . menu-iconic , . in-menulist , [ checked = "true" ] ) ,
2022-07-27 15:53:22 +02:00
menupopup : is ( # menu_FilePopup , # menu_EditPopup , # menu_viewPopup , # goPopup , # historyMenuPopup , # bookmarksMenuPopup , # menu_ToolsPopup , # windowPopup , # menu_HelpPopup )
2022-06-29 20:07:26 +02:00
menuitem : not ( . menuitem-iconic , . bookmark-item , . in-menulist , [ checked = "true" ] ) ,
2022-07-27 15:53:22 +02:00
menupopup : is ( # menu_FilePopup , # menu_EditPopup , # menu_viewPopup , # goPopup , # historyMenuPopup , # bookmarksMenuPopup , # menu_ToolsPopup , # windowPopup , # menu_HelpPopup )
2022-06-29 20:07:26 +02:00
menu : not ( . menu-iconic , . in-menulist , [ checked = "true" ] ) ,
menupopup : is ( # organizeButtonPopup , # maintenanceButtonPopup )
> menuitem : not ( . menuitem-iconic , . bookmark-item , . in-menulist , [ checked = "true" ] ) ,
menupopup : is ( # viewMenuPopup , # maintenanceButtonPopup ) > menu : not ( . menu-iconic , . in-menulist , [ checked = "true" ] ) ,
menupopup : is ( # context_sendTabToDevicePopupMenu , # context-sendpagetodevice-popup , # context-sendlinktodevice-popup )
> menuitem ,
2022-05-11 21:19:02 +02:00
. openintabs-menuitem ,
2022-06-29 20:07:26 +02:00
# blockedPopupDontShowMessage ,
2022-12-04 09:37:08 +01:00
# BMB_viewBookmarksToolbar ,
# context_openANewTab . tabmix-newtab-menu-icon {
2022-10-17 19:50:35 +02:00
/* Color */
2022-12-04 09:37:08 +01:00
-moz-context-properties : fill , fill-opacity , stroke ! important ;
2022-10-17 19:50:35 +02:00
fill : currentColor ! important ;
/* Layout */
background-size : 16px ! important ;
background-repeat : no-repeat ! important ;
background-image : var ( --menuitem-image ) ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
# tabContextMenu > . tabmix-newtab-menu-icon {
2022-12-04 09:37:08 +01:00
-moz-context-properties : fill , fill-opacity , stroke ! important ;
2022-10-17 19:50:35 +02:00
fill : currentColor ! important ;
}
/* For native context menus */
@ supports -moz-bool-pref ( "widget.macos.native-context-menus" ) or -moz-bool-pref ( "widget.gtk.native-context-menus" ) {
: not ( menu , # ContentSelectDropdown )
> menupopup
> menuitem : not ( . menuitem-iconic , . bookmark-item , . in-menulist , [ checked = "true" ] ) ,
: not ( menu , # ContentSelectDropdown ) > menupopup > menu : not ( . menu-iconic , . in-menulist , [ checked = "true" ] ) {
list-style-image : var ( --menuitem-image , url ( "../icons/blank.svg" ) ) ! important ;
}
}
/* Padding */
2022-05-11 21:19:02 +02:00
: root {
2022-10-17 19:50:35 +02:00
--uc-menu-background-position : left ;
--context-menu-background-padding-default : 5px ;
--context-menu-background-padding : var ( --context-menu-background-padding-default ) ;
}
: root : -moz-locale-dir ( rtl ) {
--uc-menu-background-position : right ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
: not ( menu , # ContentSelectDropdown , # context-navigation ) > menupopup > menuitem : not ( . menuitem-iconic ) ,
: not ( menu , # ContentSelectDropdown , # context-navigation ) > menupopup > menu : not ( . menu-iconic ) ,
2022-05-11 21:19:02 +02:00
: not ( menu , # ContentSelectDropdown , # context-navigation )
> menupopup
2022-06-29 20:07:26 +02:00
> menuitem : not ( . menuitem-iconic , . bookmark-item , . in-menulist , [ checked = "true" ] ) ,
2022-05-11 21:19:02 +02:00
: not ( menu , # ContentSelectDropdown , # context-navigation )
> menupopup
2022-06-29 20:07:26 +02:00
> menu : not ( . menu-iconic , . in-menulist , [ checked = "true" ] ) ,
2022-07-27 15:53:22 +02:00
menupopup : is ( # menu_FilePopup , # menu_EditPopup , # menu_viewPopup , # goPopup , # historyMenuPopup , # bookmarksMenuPopup , # menu_ToolsPopup , # windowPopup , # menu_HelpPopup )
2022-06-29 20:07:26 +02:00
menuitem : not ( . menuitem-iconic , . bookmark-item , . in-menulist , [ checked = "true" ] ) ,
2022-07-27 15:53:22 +02:00
menupopup : is ( # menu_FilePopup , # menu_EditPopup , # menu_viewPopup , # goPopup , # historyMenuPopup , # bookmarksMenuPopup , # menu_ToolsPopup , # windowPopup , # menu_HelpPopup )
2022-06-29 20:07:26 +02:00
menu : not ( . menu-iconic , . in-menulist , [ checked = "true" ] ) ,
menupopup : is ( # organizeButtonPopup , # maintenanceButtonPopup )
> menuitem : not ( . menuitem-iconic , . bookmark-item , . in-menulist , [ checked = "true" ] ) ,
menupopup : is ( # viewMenuPopup , # maintenanceButtonPopup ) > menu : not ( . menu-iconic , . in-menulist , [ checked = "true" ] ) ,
menupopup : is ( # context_sendTabToDevicePopupMenu , # context-sendpagetodevice-popup , # context-sendlinktodevice-popup )
> menuitem ,
2022-05-11 21:19:02 +02:00
. openintabs-menuitem ,
2022-06-29 20:07:26 +02:00
# blockedPopupDontShowMessage ,
2022-12-04 09:37:08 +01:00
# BMB_viewBookmarksToolbar ,
# context_openANewTab . tabmix-newtab-menu-icon {
2022-10-17 19:50:35 +02:00
background-position : var ( --uc-menu-background-position ) var ( --context-menu-background-padding ) center ! important ;
padding-inline-start : var ( --context-menu-background-padding ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
/* Menubar */
@ supports -moz-bool-pref ( "userChrome.icon.global_menubar" ) {
# main-menubar > menu {
background-position : var ( --uc-menu-background-position ) var ( --context-menu-background-padding-default ) center ! important ;
padding-inline-start : calc ( 16px + var ( --context-menu-background-padding-default ) ) ! important ;
padding-inline-end : 3px ;
}
# main-menubar > menu : first-child {
background-position : var ( --uc-menu-background-position )
calc ( 3px + var ( --context-menu-background-padding-default ) ) center ! important ;
padding-inline-start : calc ( 19px + var ( --context-menu-background-padding-default ) ) ! important ;
}
# main-menubar > menu > menupopup {
2022-12-04 09:37:08 +01:00
--menuitem-image : none ; /* Prevent Image Inheritance */
2022-10-17 19:50:35 +02:00
}
@ supports not -moz-bool-pref ( "userChrome.padding.global_menubar" ) {
# main-menubar > menu {
padding-block : 2px ! important ;
}
}
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
/* Padding - Windows */
@ media ( -moz-os-version : windows-win7 ) , ( -moz-platform : windows-win7 ) {
: root {
--context-menu-background-padding-default : 2px ;
}
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
@ media ( -moz-os-version : windows-win8 ) , ( -moz-platform : windows-win8 ) {
: root {
--context-menu-background-padding-default : 3px ;
}
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) {
: not ( menu , # ContentSelectDropdown , # context-navigation )
> menupopup
> menuitem : not ( . menuitem-iconic , . bookmark-item , . in-menulist , [ checked = "true" ] ) ,
: not ( menu , # ContentSelectDropdown , # context-navigation )
> menupopup
> menu : not ( . menu-iconic , . in-menulist , [ checked = "true" ] ) ,
menupopup : is ( # menu_FilePopup , # menu_EditPopup , # menu_viewPopup , # goPopup , # historyMenuPopup , # bookmarksMenuPopup , # menu_ToolsPopup , # windowPopup , # menu_HelpPopup )
menuitem : not ( . menuitem-iconic , . bookmark-item , . in-menulist , [ checked = "true" ] ) ,
menupopup : is ( # menu_FilePopup , # menu_EditPopup , # menu_viewPopup , # goPopup , # historyMenuPopup , # bookmarksMenuPopup , # menu_ToolsPopup , # windowPopup , # menu_HelpPopup )
menu : not ( . menu-iconic , . in-menulist , [ checked = "true" ] ) ,
menupopup : is ( # organizeButtonPopup , # maintenanceButtonPopup )
> menuitem : not ( . menuitem-iconic , . bookmark-item , . in-menulist , [ checked = "true" ] ) ,
menupopup : is ( # viewMenuPopup , # maintenanceButtonPopup ) > menu : not ( . menu-iconic , . in-menulist , [ checked = "true" ] ) ,
menupopup : is ( # context_sendTabToDevicePopupMenu , # context-sendpagetodevice-popup , # context-sendlinktodevice-popup )
> menuitem ,
. openintabs-menuitem ,
# blockedPopupDontShowMessage ,
2022-12-04 09:37:08 +01:00
# BMB_viewBookmarksToolbar ,
# context_openANewTab . tabmix-newtab-menu-icon {
2022-10-17 19:50:35 +02:00
background-position : left var ( --context-menu-background-padding ) center ! important ;
padding-inline-start : 0 ! important ;
}
}
@ media ( -moz-os-version : windows-win10 ) , ( -moz-platform : windows-win10 ) {
: root {
--context-menu-background-padding : 1em ;
2022-12-04 09:37:08 +01:00
--context-menu-text-padding : 24px ; /* 16px + 8px */
2022-10-17 19:50:35 +02:00
--menu-background-padding-default : calc (
var ( --context-menu-background-padding ) + var ( --context-menu-text-padding )
) ;
}
: not ( menu , # ContentSelectDropdown , # context-navigation )
> menupopup
> menuitem : not ( . menuitem-iconic , . bookmark-item , . in-menulist , [ checked = "true" ] ) ,
: not ( menu , # ContentSelectDropdown , # context-navigation )
> menupopup
> menu : not ( . menu-iconic , . in-menulist , [ checked = "true" ] ) ,
menupopup : is ( # menu_FilePopup , # menu_EditPopup , # menu_viewPopup , # goPopup , # historyMenuPopup , # bookmarksMenuPopup , # menu_ToolsPopup , # windowPopup , # menu_HelpPopup )
menuitem : not ( . menuitem-iconic , . bookmark-item , . in-menulist , [ checked = "true" ] ) ,
menupopup : is ( # menu_FilePopup , # menu_EditPopup , # menu_viewPopup , # goPopup , # historyMenuPopup , # bookmarksMenuPopup , # menu_ToolsPopup , # windowPopup , # menu_HelpPopup )
menu : not ( . menu-iconic , . in-menulist , [ checked = "true" ] ) ,
menupopup : is ( # organizeButtonPopup , # maintenanceButtonPopup )
> menuitem : not ( . menuitem-iconic , . bookmark-item , . in-menulist , [ checked = "true" ] ) ,
menupopup : is ( # viewMenuPopup , # maintenanceButtonPopup ) > menu : not ( . menu-iconic , . in-menulist , [ checked = "true" ] ) ,
menupopup : is ( # context_sendTabToDevicePopupMenu , # context-sendpagetodevice-popup , # context-sendlinktodevice-popup )
> menuitem ,
. openintabs-menuitem ,
# blockedPopupDontShowMessage ,
2022-12-04 09:37:08 +01:00
# BMB_viewBookmarksToolbar ,
# context_openANewTab . tabmix-newtab-menu-icon {
2022-10-17 19:50:35 +02:00
padding-inline-start : var ( --menu-background-padding-default ) ! important ;
margin-left : 0 ! important ;
}
}
/* Padding - Linux */
@ media ( -moz-gtk-csd-available ) {
: root {
--context-menu-background-padding-default : 6px ;
}
# main-menubar > menu > . menubar-text {
padding-inline-start : 3px ;
}
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
/* Padding - Mac */
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
: root {
--context-menu-background-padding-default : 10px ;
--context-menu-mac-padding : 21px ;
}
/* context menu width */
: not ( menu , # ContentSelectDropdown , # context-navigation )
> menupopup
> menuitem : not ( . menuitem-iconic , . bookmark-item , . in-menulist , [ checked = "true" ] ) ,
: not ( menu , # ContentSelectDropdown , # context-navigation )
> menupopup
> menu : not ( . menu-iconic , . in-menulist , [ checked = "true" ] ) ,
# blockedPopupDontShowMessage {
padding-inline-end : var ( --context-menu-background-padding ) ! important ;
}
/* text position */
: not ( menu , # ContentSelectDropdown , # context-navigation ) > menupopup > menuitem > . menu-text ,
: not ( menu , # ContentSelectDropdown , # context-navigation ) > menupopup > menu > . menu-text {
padding-inline-start : var ( --context-menu-mac-padding ) ! important ;
2022-07-27 15:53:22 +02:00
}
2022-10-17 19:50:35 +02:00
/* Checkbox menuitem, None iconic menu */
2022-12-04 09:37:08 +01:00
: not ( menu , # ContentSelectDropdown , # context-navigation ) > menupopup > menuitem [ type = "checkbox" ] {
2022-10-17 19:50:35 +02:00
padding-inline-start : calc ( var ( --context-menu-background-padding ) + var ( --context-menu-mac-padding ) ) ! important ;
}
/* Global Menu */
@ supports -moz-bool-pref ( "userChrome.icon.global_menu.mac" ) {
menupopup : is ( # menu_FilePopup , # menu_EditPopup , # menu_viewPopup , # goPopup , # historyMenuPopup , # bookmarksMenuPopup , # menu_ToolsPopup , # windowPopup , # menu_HelpPopup )
menuitem : not ( . menuitem-iconic , . bookmark-item ) ,
menupopup : is ( # menu_FilePopup , # menu_EditPopup , # menu_viewPopup , # goPopup , # historyMenuPopup , # bookmarksMenuPopup , # menu_ToolsPopup , # windowPopup , # menu_HelpPopup )
menu : not ( . menu-iconic ) {
list-style-image : var ( --menuitem-image , url ( "../icons/blank.svg" ) ) ! important ;
}
}
}
/*= Bookmark Menu - Layout ===================================================*/
/ * # goPopup ( Legacy of historyMenuPopup ) , # historyMenuPopup , # bookmarksMenuPopup : looks like global menu
* # BMB_bookmarksPopup : looks like arrow panel
* /
/* Empty Menu */
menupopup menupopup [ emptyplacesresult ] . menu-text ,
# PersonalToolbar menupopup [ emptyplacesresult ] . menu-text {
margin-inline-start : 0 ! important ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
/* Bookmark Popup - As Arrow Panel */
2022-05-11 21:19:02 +02:00
# BMB_bookmarksPopup ,
# PersonalToolbar {
2022-10-17 19:50:35 +02:00
--context-menu-background-padding : var ( --arrowpanel-menuitem-padding-inline ) ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
/* Windows 7, 8 */
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) {
/* Global Menu */
menupopup : is ( # goPopup , # historyMenuPopup , # bookmarksMenuPopup ) . bookmark-item {
padding-inline-start : 0 ! important ;
}
/* Bookmark Popup - None icon menu */
# BMB_bookmarksPopup ,
# PersonalToolbar {
--arrowpanel-menuicon-padding : 9px ;
}
menupopup : is ( # BMB_bookmarksPopup ) menuitem : not ( . menuitem-iconic , [ disabled = "true" ] ) ,
menupopup : is ( # BMB_bookmarksPopup ) menu : not ( . menu-iconic ) ,
# PersonalToolbar menupopup [ placespopup = "true" ] menuitem : not ( . menuitem-iconic , [ disabled = "true" ] ) ,
# PersonalToolbar menupopup [ placespopup = "true" ] menu : not ( . menu-iconic ) {
margin-inline : var ( --arrowpanel-menuitem-padding-inline ) ! important ;
background-position : var ( --uc-menu-background-position ) calc ( var ( --arrowpanel-menuicon-padding ) ) center ! important ;
}
menupopup : is ( # BMB_bookmarksPopup ) menuitem : not ( . menuitem-iconic , [ disabled = "true" ] ) ,
menupopup : is ( # BMB_bookmarksPopup ) menu : not ( . menu-iconic ) {
padding-inline-start : calc (
var ( --arrowpanel-menuicon-padding ) + var ( --context-menu-text-padding ) + 2px
) ! important ;
}
# PersonalToolbar menupopup [ placespopup = "true" ] menuitem : not ( . menuitem-iconic , [ disabled = "true" ] ) ,
# PersonalToolbar menupopup [ placespopup = "true" ] menu : not ( . menu-iconic ) {
padding-inline-start : var ( --arrowpanel-menuicon-padding ) ! important ;
}
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
/* Windows */
@ media ( -moz-os-version : windows-win10 ) , ( -moz-platform : windows-win10 ) {
/* Bookmark Popup - None icon menu */
menupopup : is ( # BMB_bookmarksPopup ) menuitem : not ( . menuitem-iconic , [ disabled = "true" ] ) ,
menupopup : is ( # BMB_bookmarksPopup ) menu : not ( . menu-iconic ) ,
# PersonalToolbar menupopup [ placespopup = "true" ] menuitem : not ( . menuitem-iconic , [ disabled = "true" ] ) ,
# PersonalToolbar menupopup [ placespopup = "true" ] menu : not ( . menu-iconic ) {
margin-inline : var ( --arrowpanel-menuitem-padding-inline ) ! important ;
padding-inline-start : calc ( var ( --arrowpanel-menuicon-padding ) + var ( --context-menu-text-padding ) ) ! important ;
background-position : var ( --uc-menu-background-position ) calc ( var ( --arrowpanel-menuicon-padding ) ) center ! important ;
}
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
/* Linux */
@ media ( -moz-gtk-csd-available ) {
/* Global Menu */
menupopup : is ( # goPopup , # historyMenuPopup , # bookmarksMenuPopup ) . bookmark-item {
padding-inline-start : var ( --context-menu-background-padding ) ! important ;
}
/* Bookmark Popup - Iconic menu */
# BMB_bookmarksPopup . menu-iconic-text ,
# PersonalToolbar menupopup [ placespopup = "true" ] . bookmark-item . menu-iconic-text {
padding-inline-start : 1px ! important ;
}
/* Bookmark Popup - None icon menu */
menupopup : is ( # BMB_bookmarksPopup ) menuitem : not ( . menuitem-iconic , [ disabled = "true" ] ) ,
menupopup : is ( # BMB_bookmarksPopup ) menu : not ( . menu-iconic ) ,
# PersonalToolbar menupopup [ placespopup = "true" ] menuitem : not ( . menuitem-iconic , [ disabled = "true" ] ) ,
# PersonalToolbar menupopup [ placespopup = "true" ] menu : not ( . menu-iconic ) {
padding-inline-start : calc ( var ( --arrowpanel-menuitem-padding-inline ) + 1px ) ! important ;
}
2022-12-04 09:37:08 +01:00
menupopup : is ( # BMB_bookmarksPopup ) menuitem : not ( . menuitem-iconic , [ disabled = "true" ] ) . menu-text ,
menupopup : is ( # BMB_bookmarksPopup ) menu : not ( . menu-iconic ) . menu-text ,
# PersonalToolbar menupopup [ placespopup = "true" ] menuitem : not ( . menuitem-iconic , [ disabled = "true" ] ) . menu-text ,
# PersonalToolbar menupopup [ placespopup = "true" ] menu : not ( . menu-iconic ) . menu-text {
margin-inline-start : 21px ! important ;
}
2022-08-29 19:20:12 +02:00
}
2022-10-17 19:50:35 +02:00
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
/* Bookmark Popup - As Arrow Panel */
# PersonalToolbar menupopup menuitem ,
# PersonalToolbar menupopup menu {
2022-12-04 09:37:08 +01:00
padding-inline : var ( --arrowpanel-menuitem-padding-inline ) ! important ;
2022-10-17 19:50:35 +02:00
}
/* Bookmark Popup - None icon menu */
menupopup : is ( # BMB_bookmarksPopup ) menuitem : not ( . menuitem-iconic , [ disabled = "true" ] ) ,
menupopup : is ( # BMB_bookmarksPopup ) menu : not ( . menu-iconic ) {
padding-inline-start : calc ( var ( --arrowpanel-menuitem-padding-inline ) + 3px ) ! important ;
}
2022-12-04 09:37:08 +01:00
# PersonalToolbar menupopup [ placespopup = "true" ] menuitem : not ( . menuitem-iconic , [ disabled = "true" ] ) ,
# PersonalToolbar menupopup [ placespopup = "true" ] menu : not ( . menu-iconic ) {
padding-inline-start : calc ( var ( --arrowpanel-menuitem-padding-inline ) + 1px ) ! important ;
}
menupopup : is ( # BMB_bookmarksPopup ) menuitem : not ( . menuitem-iconic , [ disabled = "true" ] ) > . menu-text ,
menupopup : is ( # BMB_bookmarksPopup ) menu : not ( . menu-iconic ) > . menu-text ,
# PersonalToolbar menupopup [ placespopup = "true" ] menuitem : not ( . menuitem-iconic , [ disabled = "true" ] ) > . menu-text ,
# PersonalToolbar menupopup [ placespopup = "true" ] menu : not ( . menu-iconic ) > . menu-text {
padding-inline-start : var ( --context-menu-mac-padding ) ! important ;
}
2022-08-29 19:20:12 +02:00
}
2022-10-17 19:50:35 +02:00
@ supports -moz-bool-pref ( "userChrome.icon.context_menu" ) {
2022-12-04 09:37:08 +01:00
/** Context Menu - Icons ******************************************************/ /*= tabContextMenu ===========================================================*/
2022-10-17 19:50:35 +02:00
# context_openANewTab ,
# treestyletab_piro_sakura_ne_jp-menuitem-_context_newTab ,
# tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenAlternatePosition ,
# sidebartabs_asamuzak_jp-menuitem-_newTab {
--menuitem-image : url ( "chrome://browser/skin/new-tab.svg" ) ;
}
# tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenInWindow {
--menuitem-image : url ( "chrome://browser/skin/window.svg" ) ;
}
# tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenInPrivateWindow {
--menuitem-image : url ( "chrome://browser/skin/privateBrowsing.svg" ) ;
}
# context_reloadTab ,
# context_reloadSelectedTabs ,
# treestyletab_piro_sakura_ne_jp-menuitem-_context_reloadTab ,
# treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab \ : context_reloadTab ,
# treestyletab_piro_sakura_ne_jp-menuitem-_grouped \ : reloadTree ,
# tabcenter-reborn_ariasuni-menuitem-_contextMenuReloadTab ,
# sidebartabs_asamuzak_jp-menuitem-_reloadTab ,
# sidebartabs_asamuzak_jp-menuitem-_reloadAllTabs {
--menuitem-image : url ( "../icons/reload.svg" ) ;
}
# context_toggleMuteTab ,
# context_toggleMuteSelectedTabs ,
# treestyletab_piro_sakura_ne_jp-menuitem-_context_toggleMuteTab-mute ,
# tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab ,
# sidebartabs_asamuzak_jp-menuitem-_muteTab {
--menuitem-image : url ( "chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg" ) ;
}
# context_toggleMuteTab [ muted ] ,
# context_toggleMuteSelectedTabs [ muted ] ,
# treestyletab_piro_sakura_ne_jp-menuitem-_context_toggleMuteTab-unmute ,
# tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab [ label = "Unmute Tab" ] ,
# sidebartabs_asamuzak_jp-menuitem-_muteTab [ label = "Unmute Tab" ] {
--menuitem-image : url ( "chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg" ) ;
}
# context_pinTab ,
# context_pinSelectedTabs ,
# treestyletab_piro_sakura_ne_jp-menuitem-_context_pinTab ,
# tabcenter-reborn_ariasuni-menuitem-_contextMenuPinTab ,
# sidebartabs_asamuzak_jp-menuitem-_pinTab {
--menuitem-image : url ( "../icons/pin-tab.svg" ) ;
}
# context_unpinTab ,
# context_unpinSelectedTabs ,
# treestyletab_piro_sakura_ne_jp-menuitem-_context_unpinTab ,
# tabcenter-reborn_ariasuni-menuitem-_contextMenuPinTab [ label = "Unpin Tab" ] ,
# sidebartabs_asamuzak_jp-menuitem-_pinTab [ label = "Unpin Tab" ] {
--menuitem-image : url ( "../icons/unpin-tab.svg" ) ;
}
# context_duplicateTab ,
# context_duplicateTabs ,
# treestyletab_piro_sakura_ne_jp-menuitem-_context_duplicateTab ,
# tabcenter-reborn_ariasuni-menuitem-_contextMenuDuplicateTab ,
# sidebartabs_asamuzak_jp-menuitem-_dupeTab {
--menuitem-image : url ( "../icons/tab-copy.svg" ) ;
}
# tabcenter-reborn_ariasuni-menuitem-_contextMenuUnloadTab {
--menuitem-image : url ( "../icons/tab-unload.svg" ) ;
}
# context_bookmarkTab ,
# context_bookmarkSelectedTabs ,
# treestyletab_piro_sakura_ne_jp-menuitem-_context_bookmarkTab ,
# treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab \ : context_bookmarkSelected ,
# treestyletab_piro_sakura_ne_jp-menuitem-_grouped \ : bookmarkTree ,
# sidebartabs_asamuzak_jp-menuitem-_bookmarkTab ,
# sidebartabs_asamuzak_jp-menuitem-_bookmarkAllTabs {
--menuitem-image : url ( "chrome://browser/skin/bookmark.svg" ) ;
}
# context_moveTabOptions ,
# treestyletab_piro_sakura_ne_jp-menuitem-_context_moveTab ,
# tabcenter-reborn_ariasuni-menuitem-_contextMenuMoveTab ,
# sidebartabs_asamuzak_jp-menuitem-_moveTab {
--menuitem-image : url ( "../icons/arrow-swap.svg" ) ;
}
# context_sendTabToDevice ,
# treestyletab_piro_sakura_ne_jp-menuitem-_context_sendTabsToDevice {
--menuitem-image : url ( "../icons/send-to-device.svg" ) ;
}
# context_sendTabToDevice : is ( [ disabled = "true" ] ) + # context_shareTabURL ,
# context_sendTabToDevice : is ( [ disabled = "true" ] ) + menuitem . share-tab-url-item {
/* At windows */
2022-06-29 20:07:26 +02:00
--menuitem-image : url ( "../icons/share.svg" ) ;
}
2022-10-17 19:50:35 +02:00
@ supports -moz-bool-pref ( "userChrome.icon.menu.full" ) {
# context_shareTabURL ,
menuitem . share-tab-url-item {
--menuitem-image : url ( "../icons/share.svg" ) ;
}
}
# context_reopenInContainer ,
# treestyletab_piro_sakura_ne_jp-menuitem-_context_reopenInContainer ,
# tabcenter-reborn_ariasuni-menuitem-_contextMenuOpenInContextualTab ,
# sidebartabs_asamuzak_jp-menuitem-_openNewTabInContainer ,
# sidebartabs_asamuzak_jp-menuitem-_reopenTabInContainer {
--menuitem-image : url ( "../icons/container-openin-16.svg" ) ;
}
# context_selectAllTabs ,
# treestyletab_piro_sakura_ne_jp-menuitem-_context_selectAllTabs ,
# treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab \ : context_selectAllTabs ,
# sidebartabs_asamuzak_jp-menuitem-_selectAllTabs {
--menuitem-image : url ( "../icons/tab-multiple.svg" ) ;
}
# context_closeTab ,
# treestyletab_piro_sakura_ne_jp-menuitem-_context_closeTab ,
# treestyletab_piro_sakura_ne_jp-menuitem-_grouped \ : closeTree ,
# tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTab ,
# sidebartabs_asamuzak_jp-menuitem-_closeTab {
--menuitem-image : url ( "chrome://global/skin/icons/close.svg" ) ;
}
@ supports -moz-bool-pref ( "userChrome.icon.menu.full" ) {
# context_closeTabOptions ,
# treestyletab_piro_sakura_ne_jp-menuitem-_context_closeMultipleTabs ,
# tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTabs ,
# sidebartabs_asamuzak_jp-menuitem-_closeMultipleTabs {
--menuitem-image : url ( "../icons/filter-dismiss.svg" ) ;
}
}
# context_undoCloseTab ,
# treestyletab_piro_sakura_ne_jp-menuitem-_context_undoCloseTab ,
# treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab \ : context_undoCloseTab ,
# tabcenter-reborn_ariasuni-menuitem-_contextMenuUndoCloseTab ,
# sidebartabs_asamuzak_jp-menuitem-_undoCloseTab {
--menuitem-image : url ( "../icons/undo.svg" ) ;
}
/*= new-tab-button-popup =====================================================*/
# new-tab-button-popup > menuitem [ command = "Browser:NewUserContextTab" ] ,
. new-tab-popup > menuitem [ command = "Browser:NewUserContextTab" ] {
--menuitem-image : url ( "../icons/container-openin-16.svg" ) ;
}
# new-tab-button-popup > menuitem [ command = "Browser:OpenAboutContainers" ] ,
. new-tab-popup > menuitem [ command = "Browser:OpenAboutContainers" ] {
--menuitem-image : url ( "chrome://global/skin/icons/settings.svg" ) ;
}
/*= toolbar-context-menu =====================================================*/
. customize-context-manageExtension {
--menuitem-image : url ( "chrome://global/skin/icons/settings.svg" ) ;
}
. customize-context-removeExtension {
--menuitem-image : url ( "chrome://global/skin/icons/delete.svg" ) ;
}
. customize-context-reportExtension {
--menuitem-image : url ( "../icons/send.svg" ) ;
}
. customize-context-moveToPanel {
--menuitem-image : url ( "chrome://browser/skin/pin-12.svg" ) ;
}
# toolbar-context-autohide-downloads-button {
/* checkbox */
--menuitem-image : url ( "../icons/eye-tracking-off.svg" ) ;
}
. customize-context-removeFromToolbar {
--menuitem-image : url ( "chrome://global/skin/icons/delete.svg" ) ;
}
# toolbar-context-always-open-downloads-panel {
/* checkbox */
--menuitem-image : url ( "../icons/drawer-arrow-download.svg" ) ;
}
# toolbar-context-openANewTab {
--menuitem-image : url ( "chrome://browser/skin/new-tab.svg" ) ;
}
# toolbar-context-reloadSelectedTab ,
# toolbar-context-reloadSelectedTabs {
--menuitem-image : url ( "../icons/reload.svg" ) ;
}
# toolbar-context-bookmarkSelectedTab ,
# toolbar-context-bookmarkSelectedTabs {
--menuitem-image : url ( "chrome://browser/skin/bookmark.svg" ) ;
}
# toolbar-context-selectAllTabs {
--menuitem-image : url ( "../icons/tab-multiple.svg" ) ;
}
# toolbar-context-undoCloseTab {
--menuitem-image : url ( "../icons/undo.svg" ) ;
}
# toggle_toolbar-menubar {
/* checkbox */
--menuitem-image : url ( "../icons/calendar-agenda.svg" ) ;
}
# toggle_PersonalToolbar {
/* Also placeContext */
--menuitem-image : url ( "chrome://browser/skin/bookmarks-toolbar.svg" ) ;
}
menuitem . viewCustomizeToolbar {
--menuitem-image : url ( "chrome://browser/skin/customize.svg" ) ;
}
. fullscreen-context-autohide {
/* checkbox */
--menuitem-image : url ( "../icons/eye-tracking-off.svg" ) ;
}
# toolbar-context-menu > menuitem [ data-l10n-id = "full-screen-exit" ] {
--menuitem-image : url ( "chrome://browser/skin/fullscreen-exit.svg" ) ;
}
/*= Tab Mix Plus =============================================================*/
2022-12-04 09:37:08 +01:00
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) ,
( -moz-os-version : windows-win10 ) ,
( -moz-platform : windows-win10 ) {
# context_openANewTab . tabmix-newtab-menu-icon . menu-iconic-left {
display : none ;
}
}
@ supports -moz-bool-pref ( "userChrome.icon.menu.full" ) {
# tm-duplicateinWin {
--menuitem-image : url ( "../icons/tab-desktop-multiple-bottom.svg" ) ;
}
# tm-mergeWindowsTab {
--menuitem-image : url ( "../icons/merge.svg" ) ;
}
}
# tm-renameTab {
--menuitem-image : url ( "chrome://global/skin/icons/edit.svg" ) ;
2022-10-17 19:50:35 +02:00
}
# tm-copyTabUrl {
--menuitem-image : url ( "../icons/link.svg" ) ;
}
2022-12-04 09:37:08 +01:00
# tm-autoreloadTab_menu {
--menuitem-image : url ( "../icons/timer10.svg" ) ;
}
2022-10-17 19:50:35 +02:00
# context_reloadTabOptions {
--menuitem-image : url ( "../icons/reload.svg" ) ;
}
@ supports -moz-bool-pref ( "userChrome.icon.menu.full" ) {
# context_reloadTabOptions {
--menuitem-image : url ( "../icons/filter-reload.svg" ) ;
}
}
@ supports not -moz-bool-pref ( "userChrome.icon.menu.full" ) {
# context_reloadTabOptions + # context_reloadTab {
--menuitem-image : url ( "../icons/blank.svg" ) ;
}
}
2022-12-04 09:37:08 +01:00
# tm-docShell {
--menuitem-image : url ( "chrome://browser/skin/permissions.svg" ) ;
}
# tm-freezeTab {
--menuitem-image : url ( "../icons/weather-snowflake.svg" ) ;
}
2022-10-17 19:50:35 +02:00
# tm-protectTab {
--menuitem-image : url ( "../icons/shield-task.svg" ) ;
}
@ supports -moz-bool-pref ( "userChrome.icon.menu.full" ) {
# tm-lockTab {
--menuitem-image : url ( "../icons/lock-closed.svg" ) ;
}
}
@ supports -moz-bool-pref ( "userChrome.icon.menu.full" ) {
# context_bookmarkAllTabs {
--menuitem-image : url ( "../icons/bookmark-multiple.svg" ) ;
}
}
/*= contentAreaContextMenu ===================================================*/
# context-viewsource-goToLine {
--menuitem-image : url ( "../icons/text-number-format.svg" ) ;
}
# context-viewsource-wrapLongLines {
/* checkbox */
--menuitem-image : url ( "../icons/arrow-sort-down-lines.svg" ) ;
}
# context-viewsource-highlightSyntax {
/* checkbox */
--menuitem-image : url ( "../icons/code.svg" ) ;
}
# spell-no-suggestions {
--menuitem-image : url ( "../icons/text-proofing-tools.svg" ) ;
}
# spell-add-to-dictionary {
--menuitem-image : url ( "../icons/book-add.svg" ) ;
}
# spell-undo-add-to-dictionary {
--menuitem-image : url ( "../icons/undo.svg" ) ;
}
# context-openlinkincurrent {
--menuitem-image : url ( "../icons/link-square.svg" ) ;
}
# context-openlinkincontainertab {
--menuitem-image : url ( "chrome://browser/skin/new-tab.svg" ) ;
}
# context-openlinkintab {
--menuitem-image : url ( "chrome://browser/skin/new-tab.svg" ) ;
}
# context-openlinkinusercontext-menu {
--menuitem-image : url ( "../icons/container-openin-16.svg" ) ;
}
# context-openlink {
--menuitem-image : url ( "chrome://browser/skin/window.svg" ) ;
}
# context-openlinkprivate {
--menuitem-image : url ( "chrome://browser/skin/privateBrowsing.svg" ) ;
}
# context-bookmarklink {
--menuitem-image : url ( "chrome://browser/skin/bookmark.svg" ) ;
}
# context-savelink {
2022-12-04 09:37:08 +01:00
--menuitem-image : url ( "../icons/toolbarButton-download.svg" ) ;
2022-10-17 19:50:35 +02:00
}
# context-savelinktopocket {
--menuitem-image : url ( "../icons/pocket-outline.svg" ) ;
}
# context-copyemail {
--menuitem-image : url ( "chrome://browser/skin/mail.svg" ) ;
}
# context-copylink {
--menuitem-image : url ( "../icons/link.svg" ) ;
}
# context-sendlinktodevice {
--menuitem-image : url ( "../icons/send-to-device.svg" ) ;
}
# context-media-play {
--menuitem-image : url ( "chrome://global/skin/media/play-fill.svg" ) ;
}
# context-media-pause {
--menuitem-image : url ( "chrome://global/skin/media/pause-fill.svg" ) ;
}
# context-media-mute {
--menuitem-image : url ( "chrome://global/skin/media/audio-muted.svg" ) ;
}
# context-media-unmute {
--menuitem-image : url ( "chrome://global/skin/media/audio.svg" ) ;
}
# context-media-playbackrate {
--menuitem-image : url ( "../icons/time-picker.svg" ) ;
}
# context-media-loop {
/* checkbox */
--menuitem-image : url ( "../icons/arrow-repeat-all.svg" ) ;
}
# context-leave-dom-fullscreen {
--menuitem-image : url ( "chrome://global/skin/media/fullscreenExitButton.svg" ) ;
}
# context-video-fullscreen {
--menuitem-image : url ( "chrome://global/skin/media/fullscreenEnterButton.svg" ) ;
}
# context-media-hidecontrols {
--menuitem-image : url ( "../icons/eye-hide.svg" ) ;
}
# context-media-showcontrols {
--menuitem-image : url ( "../icons/eye-show.svg" ) ;
}
# context-viewvideo {
--menuitem-image : url ( "../icons/video.svg" ) ;
}
# context-video-pictureinpicture {
/* checkbox */
--menuitem-image : url ( "chrome://global/skin/media/picture-in-picture-open.svg" ) ;
}
# context-reloadimage {
--menuitem-image : url ( "../icons/image-arrow-counterclockwise.svg" ) ;
}
# context-viewimage {
--menuitem-image : url ( "../icons/image-add.svg" ) ;
}
# context-saveimage {
--menuitem-image : url ( "../icons/image.svg" ) ;
}
# context-video-saveimage {
--menuitem-image : url ( "../icons/video-snapshot.svg" ) ;
}
# context-savevideo {
--menuitem-image : url ( "../icons/video.svg" ) ;
}
# context-saveaudio {
--menuitem-image : url ( "chrome://global/skin/media/audio.svg" ) ;
}
# context-copyimage-contents {
--menuitem-image : url ( "../icons/image-copy.svg" ) ;
}
# context-copyimage ,
# context-copyvideourl ,
# context-copyaudiourl {
--menuitem-image : url ( "../icons/link.svg" ) ;
}
# context-sendimage ,
# context-sendvideo ,
# context-sendaudio {
--menuitem-image : url ( "chrome://browser/skin/mail.svg" ) ;
}
# context-viewimageinfo {
--menuitem-image : url ( "chrome://global/skin/icons/info.svg" ) ;
}
# context-viewimagedesc {
--menuitem-image : url ( "../icons/image-alt-text.svg" ) ;
}
# context-setDesktopBackground {
--menuitem-image : url ( "../icons/resize-image.svg" ) ;
}
# context-ctp-play {
--menuitem-image : url ( "chrome://global/skin/icons/plugin.svg" ) ;
}
# context-ctp-hide {
--menuitem-image : url ( "chrome://global/skin/icons/plugin-blocked.svg" ) ;
}
# context-savepage {
2022-12-04 09:37:08 +01:00
--menuitem-image : url ( "../icons/toolbarButton-download.svg" ) ;
2022-10-17 19:50:35 +02:00
}
# context-pocket {
--menuitem-image : url ( "../icons/pocket-outline.svg" ) ;
}
# context-sendpagetodevice {
--menuitem-image : url ( "../icons/send-to-device.svg" ) ;
}
# fill-login {
--menuitem-image : url ( "../icons/password.svg" ) ;
}
# fill-login-generated-password {
--menuitem-image : url ( "chrome://browser/skin/login.svg" ) ;
}
# manage-saved-logins {
--menuitem-image : url ( "../icons/key-multiple.svg" ) ;
}
# context-undo {
--menuitem-image : url ( "../icons/undo.svg" ) ;
}
@ supports -moz-bool-pref ( "userChrome.icon.menu.full" ) {
# context-redo {
--menuitem-image : url ( "../icons/redo.svg" ) ;
}
}
# context-cut {
--menuitem-image : url ( "chrome://browser/skin/edit-cut.svg" ) ;
}
# context-copy {
--menuitem-image : url ( "../icons/edit-copy.svg" ) ;
}
# context-paste {
--menuitem-image : url ( "chrome://browser/skin/edit-paste.svg" ) ;
}
# context-delete {
--menuitem-image : url ( "chrome://global/skin/icons/delete.svg" ) ;
2022-06-29 20:07:26 +02:00
}
2022-10-17 19:50:35 +02:00
# context-selectall {
--menuitem-image : url ( "../icons/select-all-on.svg" ) ;
}
# context-print-selection {
--menuitem-image : url ( "chrome://global/skin/icons/print.svg" ) ;
}
# context-take-screenshot {
--menuitem-image : url ( "chrome://browser/skin/screenshot.svg" ) ;
}
# context-keywordfield {
--menuitem-image : url ( "chrome://browser/skin/bookmark.svg" ) ;
}
# context-searchselect ,
# context-searchselect-private {
--menuitem-image : url ( "chrome://global/skin/icons/search-glass.svg" ) ;
}
# frame {
--menuitem-image : url ( "../icons/command-frames.svg" ) ;
}
# spell-check-enabled {
/* checkbox */
--menuitem-image : url ( "../icons/text-proofing-tools.svg" ) ;
}
# spell-add-dictionaries-main {
--menuitem-image : url ( "../icons/book-add.svg" ) ;
}
# spell-dictionaries {
--menuitem-image : url ( "../icons/book.svg" ) ;
}
# context-bidi-text-direction-toggle {
--menuitem-image : url ( "../icons/text-direction-horizontal-ltr.svg" ) ;
}
# context-bidi-page-direction-toggle {
--menuitem-image : url ( "../icons/document-landscape-split-hint.svg" ) ;
}
# context-viewpartialsource-selection ,
# context-viewsource {
--menuitem-image : url ( "../icons/document-search.svg" ) ;
}
# context-inspect-a11y {
--menuitem-image : url ( "chrome://devtools/skin/images/tool-accessibility.svg" ) ;
}
# context-inspect {
--menuitem-image : url ( "../icons/command-pick.svg" ) ;
}
# context-media-eme-learnmore {
/* iconic */
}
2022-12-04 09:37:08 +01:00
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
2022-10-17 19:50:35 +02:00
# context-back {
--menuitem-image : url ( "chrome://browser/skin/back.svg" ) ;
}
# context-forward {
--menuitem-image : url ( "chrome://browser/skin/forward.svg" ) ;
}
# context-reload {
--menuitem-image : url ( "../icons/reload.svg" ) ;
}
# context-stop {
--menuitem-image : url ( "chrome://global/skin/icons/close.svg" ) ;
}
# context-bookmarkpage {
--menuitem-image : url ( "chrome://browser/skin/bookmark.svg" ) ;
}
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
/*= Tab Mix Plus =============================================================*/
# tm-autoreload_menu {
2022-12-04 09:37:08 +01:00
--menuitem-image : url ( "../icons/timer10.svg" ) ;
}
# tm-linkWithhistory {
--menuitem-image : url ( "../icons/new-tab-skip-forward.svg" ) ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
# tm-openAllLinks {
--menuitem-image : url ( "../icons/new-tab-multiple.svg" ) ;
2022-05-11 21:19:02 +02:00
}
2022-12-04 09:37:08 +01:00
# tm-openinverselink {
--menuitem-image : url ( "../icons/new-tab-forward.svg" ) ;
}
# tm-content-closetab {
--menuitem-image : url ( "../icons/dismiss-filled.svg" ) ;
}
# tm-duplicateTabContext {
--menuitem-image : url ( "../icons/tab-copy.svg" ) ;
}
# tm-duplicateinWinContext {
--menuitem-image : url ( "../icons/tab-desktop-multiple-bottom.svg" ) ;
}
# tm-detachTabContext {
--menuitem-image : url ( "../icons/convert-range.svg" ) ;
}
# tm-mergeWindows {
--menuitem-image : url ( "../icons/merge.svg" ) ;
}
# tm-content-freezeTab {
--menuitem-image : url ( "../icons/weather-snowflake.svg" ) ;
}
# tm-content-protectTab {
--menuitem-image : url ( "../icons/shield-task.svg" ) ;
}
# tm-content-lockTab {
--menuitem-image : url ( "../icons/lock-closed.svg" ) ;
}
2022-10-17 19:50:35 +02:00
# tm-content-undoCloseTab {
--menuitem-image : url ( "../icons/undo.svg" ) ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
/*= downloadsContextMenu =====================================================*/
. downloadPauseMenuItem {
--menuitem-image : url ( "chrome://global/skin/media/pause-fill.svg" ) ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
. downloadResumeMenuItem {
--menuitem-image : url ( "chrome://global/skin/media/play-fill.svg" ) ;
}
. downloadUnblockMenuItem {
--menuitem-image : url ( "../icons/checkmark-circle.svg" ) ;
}
. downloadUseSystemDefaultMenuItem {
--menuitem-image : url ( "chrome://browser/skin/open.svg" ) ;
}
. downloadAlwaysUseSystemDefaultMenuItem {
/* checkbox */
--menuitem-image : url ( "../icons/folder-globe.svg" ) ;
}
. downloadAlwaysOpenSimilarFilesMenuItem {
/* checkbox */
--menuitem-image : url ( "../icons/fluid.svg" ) ;
}
2022-06-29 20:07:26 +02:00
. downloadShowMenuItem {
2022-10-17 19:50:35 +02:00
--menuitem-image : url ( "chrome://global/skin/icons/folder.svg" ) ;
}
@ supports -moz-bool-pref ( "userChrome.icon.library" ) {
. downloadShowMenuItem {
--menuitem-image : url ( "../icons/folder.svg" ) ;
}
2022-06-29 20:07:26 +02:00
}
2022-10-17 19:50:35 +02:00
# downloadsContextMenu > menuitem . downloadOpenReferrerMenuItem ,
# downloadsContextMenu > menuitem [ command = "downloadsCmd_openReferrer" ] {
--menuitem-image : url ( "../icons/link-square.svg" ) ;
}
# downloadsContextMenu > menuitem . downloadCopyLocationMenuItem ,
# downloadsContextMenu > menuitem [ command = "downloadsCmd_copyLocation" ] {
--menuitem-image : url ( "../icons/link.svg" ) ;
}
. downloadDeleteFileMenuItem {
--menuitem-image : url ( "chrome://global/skin/icons/delete.svg" ) ;
}
. downloadRemoveFromHistoryMenuItem {
--menuitem-image : url ( "../icons/eraser.svg" ) ;
}
# downloadsContextMenu > menuitem [ command = "downloadsCmd_clearList" ] ,
# downloadsContextMenu > menuitem [ command = "downloadsCmd_clearDownloads" ] {
--menuitem-image : url ( "../icons/broom.svg" ) ;
}
/*= placeContext =============================================================*/
# placesContext_open {
--menuitem-image : url ( "../icons/link-square.svg" ) ;
}
# placesContext_openBookmarkContainer \ : tabs ,
# placesContext_openBookmarkLinks \ : tabs {
--menuitem-image : url ( "../icons/movetowindow-16.svg" ) ;
}
# placesContext_open \ : newtab ,
# placesContext_openContainer \ : tabs ,
# placesContext_openLinks \ : tabs {
--menuitem-image : url ( "chrome://browser/skin/new-tab.svg" ) ;
}
# placesContext_open \ : newcontainertab {
--menuitem-image : url ( "../icons/container-openin-16.svg" ) ;
}
# placesContext_open \ : newwindow {
--menuitem-image : url ( "chrome://browser/skin/window.svg" ) ;
}
# placesContext_open \ : newprivatewindow {
--menuitem-image : url ( "chrome://browser/skin/privateBrowsing.svg" ) ;
}
# placesContext_show_bookmark \ : info ,
# placesContext_show \ : info ,
# placesContext_show_folder \ : info {
--menuitem-image : url ( "chrome://global/skin/icons/edit.svg" ) ;
}
# placesContext_deleteBookmark ,
# placesContext_deleteFolder ,
# placesContext_delete ,
# placesContext_delete_history {
--menuitem-image : url ( "chrome://global/skin/icons/delete.svg" ) ;
}
# placesContext_deleteHost {
--menuitem-image : url ( "../icons/eye-hide.svg" ) ;
}
# placesContext_sortBy \ : name {
--menuitem-image : url ( "../icons/text-sort-ascending.svg" ) ;
}
# placesContext_cut {
--menuitem-image : url ( "chrome://browser/skin/edit-cut.svg" ) ;
}
# placesContext_copy {
--menuitem-image : url ( "../icons/edit-copy.svg" ) ;
}
# placesContext_paste_group {
--menuitem-image : url ( "chrome://browser/skin/edit-paste.svg" ) ;
}
# placesContext_new \ : bookmark {
--menuitem-image : url ( "chrome://browser/skin/bookmark.svg" ) ;
}
2022-06-29 20:07:26 +02:00
# placesContext_showInFolder ,
2022-05-11 21:19:02 +02:00
# placesContext_new \ : folder {
2022-10-17 19:50:35 +02:00
--menuitem-image : url ( "chrome://global/skin/icons/folder.svg" ) ;
}
@ supports -moz-bool-pref ( "userChrome.icon.library" ) {
# placesContext_showInFolder ,
# placesContext_new \ : folder {
--menuitem-image : url ( "../icons/folder.svg" ) ;
}
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
# placesContext_new \ : separator {
--menuitem-image : url ( "../icons/vertical-line.svg" ) ;
}
# placesContext_paste {
--menuitem-image : url ( "chrome://browser/skin/edit-paste.svg" ) ;
}
# placesContext_createBookmark {
--menuitem-image : url ( "chrome://browser/skin/bookmark.svg" ) ;
}
# show-other-bookmarks_PersonalToolbar {
/* checkbox */
--menuitem-image : url ( "../icons/star-line-horizontal.svg" ) ;
}
# placesContext_showAllBookmarks {
--menuitem-image : url ( "chrome://browser/skin/bookmark-star-on-tray.svg" ) ;
}
. openintabs-menuitem {
--menuitem-image : url ( "../icons/movetowindow-16.svg" ) ;
}
2022-12-04 09:37:08 +01:00
/*= Notification =============================================================*/
# doNotDisturbMenuItem {
--menuitem-image : url ( chrome : / / global / skin / media / pause-fill . svg ) ;
}
# disableForOriginMenuItem {
--menuitem-image : url ( "chrome://global/skin/icons/blocked.svg" ) ;
}
# openSettingsMenuItem {
--menuitem-image : url ( "chrome://global/skin/icons/settings.svg" ) ;
}
2022-10-17 19:50:35 +02:00
/*= blockedPopupOptions ======================================================*/
# blockedPopupAllowSite {
--menuitem-image : url ( "chrome://global/skin/icons/check.svg" ) ;
}
# blockedPopupOptions > menuitem [ oncommand = "gPopupBlockerObserver.editPopupSettings();" ] {
--menuitem-image : url ( "chrome://global/skin/icons/edit.svg" ) ;
}
# blockedPopupDontShowMessage {
/* checkbox */
--menuitem-image : url ( "chrome://global/skin/icons/blocked.svg" ) ;
}
/*= autohide-context =========================================================*/
# autohide-context > menuitem [ data-l10n-id = "full-screen-autohide" ] {
/* checkbox */
--menuitem-image : url ( "../icons/eye-tracking-off.svg" ) ;
}
# autohide-context > menuitem [ data-l10n-id = "full-screen-exit" ] {
--menuitem-image : url ( "chrome://browser/skin/fullscreen-exit.svg" ) ;
}
/*= pictureInPictureToggleContextMenu ========================================*/
# pictureInPictureToggleContextMenu > menuitem [ oncommand = "PictureInPicture.hideToggle();" ] {
--menuitem-image : url ( "../icons/eye-hide.svg" ) ;
}
/*= pageActionContextMenu ====================================================*/
. pageActionContextMenuItem . extensionPinned . extensionUnpinned . manageExtensionItem {
--menuitem-image : url ( "chrome://global/skin/icons/settings.svg" ) ;
}
. pageActionContextMenuItem . extensionPinned . extensionUnpinned . removeExtensionItem {
--menuitem-image : url ( "chrome://global/skin/icons/delete.svg" ) ;
}
/*= customizationPanelItemContextMenu ========================================*/
# customizationPanelItemContextMenuUnpin {
--menuitem-image : url ( "../icons/unpin-tab.svg" ) ;
}
. customize-context-removeFromPanel {
--menuitem-image : url ( "chrome://global/skin/icons/delete.svg" ) ;
}
/*= customizationPaletteItemContextMenu ======================================*/
. customize-context-addToToolbar {
--menuitem-image : url ( "chrome://devtools/skin/images/dock-bottom.svg" ) ;
}
. customize-context-addToPanel {
--menuitem-image : url ( "chrome://browser/skin/menu.svg" ) ;
}
/*= customizationPanelContextMenu ============================================*/
# customizationPanelContextMenu > menuitem [ command = "cmd_CustomizeToolbars" ] {
--menuitem-image : url ( "chrome://browser/skin/customize.svg" ) ;
}
/*= downloads-button-autohide-panel ==========================================*/
# downloads-button-autohide-checkbox {
/* checkbox */
--menuitem-image : url ( "../icons/eye-tracking-off.svg" ) ;
}
/*= SyncedTabsSidebarContext =================================================*/
# syncedTabsOpenSelected {
--menuitem-image : url ( "../icons/link-square.svg" ) ;
}
# syncedTabsOpenSelectedInTab {
--menuitem-image : url ( "chrome://browser/skin/new-tab.svg" ) ;
}
# syncedTabsOpenSelectedInWindow {
--menuitem-image : url ( "chrome://browser/skin/window.svg" ) ;
}
# syncedTabsOpenSelectedInPrivateWindow {
--menuitem-image : url ( "chrome://browser/skin/privateBrowsing.svg" ) ;
}
# syncedTabsBookmarkSelected {
--menuitem-image : url ( "chrome://browser/skin/bookmark.svg" ) ;
}
# syncedTabsCopySelected {
--menuitem-image : url ( "../icons/link.svg" ) ;
}
# syncedTabsOpenAllInTabs {
--menuitem-image : url ( "../icons/movetowindow-16.svg" ) ;
}
# syncedTabsManageDevices {
--menuitem-image : url ( "chrome://global/skin/icons/settings.svg" ) ;
}
# syncedTabsRefresh {
--menuitem-image : url ( "chrome://browser/skin/sync.svg" ) ;
}
/*= SyncedTabsSidebarTabsFilterContext =======================================*/
# SyncedTabsSidebarTabsFilterContext > menuitem [ cmd = "cmd_undo" ] {
--menuitem-image : url ( "../icons/undo.svg" ) ;
}
# SyncedTabsSidebarTabsFilterContext > menuitem [ cmd = "cmd_cut" ] {
--menuitem-image : url ( "chrome://browser/skin/edit-cut.svg" ) ;
}
# SyncedTabsSidebarTabsFilterContext > menuitem [ cmd = "cmd_copy" ] {
--menuitem-image : url ( "../icons/edit-copy.svg" ) ;
}
# SyncedTabsSidebarTabsFilterContext > menuitem [ cmd = "cmd_paste" ] {
--menuitem-image : url ( "chrome://browser/skin/edit-paste.svg" ) ;
}
# SyncedTabsSidebarTabsFilterContext > menuitem [ cmd = "cmd_delete" ] {
--menuitem-image : url ( "chrome://global/skin/icons/delete.svg" ) ;
}
# SyncedTabsSidebarTabsFilterContext > menuitem [ cmd = "cmd_selectAll" ] {
--menuitem-image : url ( "../icons/select-all-on.svg" ) ;
}
# syncedTabsRefreshFilter {
--menuitem-image : url ( "chrome://browser/skin/sync.svg" ) ;
}
/*= urlbar-input-container ===================================================*/
# urlbar-input-container . textbox-contextmenu menuitem [ cmd = "cmd_undo" ] {
--menuitem-image : url ( "../icons/undo.svg" ) ;
}
@ supports -moz-bool-pref ( "userChrome.icon.menu.full" ) {
# urlbar-input-container . textbox-contextmenu menuitem [ cmd = "cmd_redo" ] {
--menuitem-image : url ( "../icons/redo.svg" ) ;
}
2022-06-29 20:07:26 +02:00
}
2022-10-17 19:50:35 +02:00
# urlbar-input-container . textbox-contextmenu menuitem [ cmd = "cmd_cut" ] {
--menuitem-image : url ( "chrome://browser/skin/edit-cut.svg" ) ;
}
# urlbar-input-container . textbox-contextmenu menuitem [ cmd = "cmd_copy" ] {
--menuitem-image : url ( "../icons/edit-copy.svg" ) ;
}
# urlbar-input-container . textbox-contextmenu menuitem [ cmd = "cmd_paste" ] {
--menuitem-image : url ( "chrome://browser/skin/edit-paste.svg" ) ;
}
@ supports -moz-bool-pref ( "userChrome.icon.menu.full" ) {
# paste-and-go {
--menuitem-image : url ( "../icons/edit-paste-go.svg" ) ;
}
}
# urlbar-input-container . textbox-contextmenu menuitem [ cmd = "cmd_delete" ] {
--menuitem-image : url ( "chrome://global/skin/icons/delete.svg" ) ;
}
# urlbar-input-container . textbox-contextmenu menuitem [ cmd = "cmd_selectAll" ] {
--menuitem-image : url ( "../icons/select-all-on.svg" ) ;
}
/*= textbox-contextmenu ======================================================*/
/* Browser's Searchbar, Library's Searchbar, Page Info */
. textbox-contextmenu > menuitem [ data-l10n-id = "text-action-undo" ] {
--menuitem-image : url ( "../icons/undo.svg" ) ;
2022-06-29 20:07:26 +02:00
}
2022-10-17 19:50:35 +02:00
@ supports -moz-bool-pref ( "userChrome.icon.menu.full" ) {
. textbox-contextmenu > menuitem [ data-l10n-id = "text-action-redo" ] {
--menuitem-image : url ( "../icons/redo.svg" ) ;
}
}
. textbox-contextmenu > menuitem [ data-l10n-id = "text-action-cut" ] {
--menuitem-image : url ( "chrome://browser/skin/edit-cut.svg" ) ;
}
. textbox-contextmenu > menuitem [ data-l10n-id = "text-action-copy" ] {
--menuitem-image : url ( "../icons/edit-copy.svg" ) ;
}
. textbox-contextmenu > menuitem [ data-l10n-id = "text-action-paste" ] {
--menuitem-image : url ( "chrome://browser/skin/edit-paste.svg" ) ;
}
. textbox-contextmenu > menuitem [ data-l10n-id = "text-action-delete" ] {
--menuitem-image : url ( "chrome://global/skin/icons/delete.svg" ) ;
}
. textbox-contextmenu > menuitem [ data-l10n-id = "text-action-select-all" ] {
--menuitem-image : url ( "../icons/select-all-on.svg" ) ;
}
/* Only searchbar */
@ supports -moz-bool-pref ( "userChrome.icon.menu.full" ) {
menuitem . searchbar-paste-and-search {
--menuitem-image : url ( "../icons/edit-paste-search.svg" ) ;
}
}
menuitem . searchbar-clear-history {
--menuitem-image : url ( "chrome://browser/skin/forget.svg" ) ;
}
/*= context_sendTabToDevicePopupMenu =========================================*/
. sync-menuitem . sendtab-target [ clientType = "phone" ] {
--menuitem-image : url ( "chrome://browser/skin/device-phone.svg" ) ;
}
. sync-menuitem . sendtab-target [ clientType = "tablet" ] {
--menuitem-image : url ( "chrome://browser/skin/device-tablet.svg" ) ;
}
. sync-menuitem . sendtab-target [ clientType = "desktop" ] {
--menuitem-image : url ( "chrome://browser/skin/device-desktop.svg" ) ;
}
. sync-menuitem . sendtab-target [ clientType = "tv" ] {
--menuitem-image : url ( "chrome://browser/skin/device-tv.svg" ) ;
}
. sync-menuitem . sendtab-target [ clientType = "vr" ] {
--menuitem-image : url ( "chrome://browser/skin/device-vr.svg" ) ;
}
. sync-menuitem . sendtab-target [ clientType = "" ] {
--menuitem-image : url ( "../icons/send-to-device.svg" ) ;
}
. sync-menuitem . sendtab-target : not ( [ clientType ] ) {
--menuitem-image : url ( "chrome://global/skin/icons/settings.svg" ) ;
}
# treestyletab_piro_sakura_ne_jp-menuitem-_context_sendTabsToDevice \ : manage {
--menuitem-image : url ( "chrome://global/skin/icons/settings.svg" ) ;
}
2022-12-04 09:37:08 +01:00
/*= unified-extensions-context-menu ==========================================*/
. unified-extensions-context-menu-manage-extension {
--menuitem-image : url ( "chrome://global/skin/icons/settings.svg" ) ;
}
. unified-extensions-context-menu-remove-extension {
--menuitem-image : url ( "chrome://global/skin/icons/delete.svg" ) ;
}
. unified-extensions-context-menu-report-extension {
--menuitem-image : url ( "../icons/send.svg" ) ;
}
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
@ supports -moz-bool-pref ( "userChrome.icon.global_menubar" ) {
/*= main-menubar =============================================================*/
# file-menu {
--menuitem-image : url ( "../icons/mail-inbox-all.svg" ) ;
}
# edit-menu {
--menuitem-image : url ( "chrome://global/skin/icons/edit.svg" ) ;
}
# view-menu {
--menuitem-image : url ( "../icons/content-view.svg" ) ;
}
# history-menu {
--menuitem-image : url ( "chrome://browser/skin/history.svg" ) ;
}
# bookmarksMenu {
--menuitem-image : url ( "chrome://browser/skin/bookmark.svg" ) ;
}
# tools-menu {
--menuitem-image : url ( "../icons/toolbox.svg" ) ;
}
# helpMenu {
--menuitem-image : url ( "chrome://global/skin/icons/help.svg" ) ;
}
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
@ supports -moz-bool-pref ( "userChrome.icon.global_menu" ) {
/** Global Menu ***************************************************************/
/*= menu_FilePopup ===========================================================*/
# menu_newNavigatorTab {
--menuitem-image : url ( "chrome://browser/skin/new-tab.svg" ) ;
}
# menu_newUserContext {
--menuitem-image : url ( "../icons/container-openin-16.svg" ) ;
}
# menu_newNavigator {
--menuitem-image : url ( "chrome://browser/skin/window.svg" ) ;
}
# menu_newPrivateWindow {
--menuitem-image : url ( "chrome://browser/skin/privateBrowsing.svg" ) ;
}
# menu_openFile {
--menuitem-image : url ( "chrome://browser/skin/open.svg" ) ;
}
# menu_savePage {
2022-12-04 09:37:08 +01:00
--menuitem-image : url ( "../icons/toolbarButton-download.svg" ) ;
2022-10-17 19:50:35 +02:00
}
# menu_sendLink {
--menuitem-image : url ( "chrome://browser/skin/mail.svg" ) ;
}
menu . share-tab-url-item {
--menuitem-image : url ( "chrome://browser/skin/share.svg" ) ;
}
# menu_print {
--menuitem-image : url ( "chrome://global/skin/icons/print.svg" ) ;
}
# menu_importFromAnotherBrowser {
--menuitem-image : url ( "chrome://browser/skin/import.svg" ) ;
}
# goOfflineMenuitem {
/* checkbox */
--menuitem-image : url ( "../icons/plug-disconnected.svg" ) ;
}
# menu_FileQuitItem {
--menuitem-image : url ( "../icons/quit.svg" ) ;
}
/* Mange Containers */
# menu_newUserContext menupopup menuitem : last-child {
--menuitem-image : url ( "chrome://global/skin/icons/settings.svg" ) ;
}
/*= menu_EditPopup ===========================================================*/
# menu_undo {
--menuitem-image : url ( "../icons/undo.svg" ) ;
}
@ supports -moz-bool-pref ( "userChrome.icon.menu.full" ) {
# menu_redo {
--menuitem-image : url ( "../icons/redo.svg" ) ;
}
2022-06-29 20:07:26 +02:00
}
2022-10-17 19:50:35 +02:00
# menu_cut {
--menuitem-image : url ( "chrome://browser/skin/edit-cut.svg" ) ;
}
# menu_copy {
--menuitem-image : url ( "../icons/edit-copy.svg" ) ;
}
# menu_paste {
--menuitem-image : url ( "chrome://browser/skin/edit-paste.svg" ) ;
}
# menu_delete {
--menuitem-image : url ( "chrome://global/skin/icons/delete.svg" ) ;
}
# menu_selectAll {
--menuitem-image : url ( "../icons/select-all-on.svg" ) ;
}
# menu_find {
--menuitem-image : url ( "chrome://global/skin/icons/search-glass.svg" ) ;
}
# menu_preferences {
--menuitem-image : url ( "chrome://global/skin/icons/settings.svg" ) ;
}
/*= menu_viewPopup ===========================================================*/
# viewToolbarsMenu {
--menuitem-image : url ( "../icons/toolbar.svg" ) ;
}
# viewSidebarMenuMenu {
--menuitem-image : url ( "chrome://browser/skin/sidebars.svg" ) ;
}
# viewFullZoomMenu {
--menuitem-image : url ( "../icons/screenshot.svg" ) ;
}
# pageStyleMenu {
--menuitem-image : url ( "../icons/document-css.svg" ) ;
}
# repair-text-encoding {
--menuitem-image : url ( "chrome://browser/skin/characterEncoding.svg" ) ;
}
# enterFullScreenItem {
--menuitem-image : url ( "chrome://browser/skin/fullscreen.svg" ) ;
}
# exitFullScreenItem {
--menuitem-image : url ( "chrome://browser/skin/fullscreen-exit.svg" ) ;
}
# fullScreenItem {
/* checkbox */
--menuitem-image : url ( "chrome://browser/skin/fullscreen.svg" ) ;
}
# menu_readerModeItem {
--menuitem-image : url ( "chrome://browser/skin/reader-mode.svg" ) ;
}
# menu_showAllTabs {
--menuitem-image : url ( "../icons/tab.svg" ) ;
}
# documentDirection-swap {
--menuitem-image : url ( "../icons/text-direction-horizontal-ltr.svg" ) ;
}
/* view-menu-popup sub menu */
# menu_customizeToolbars {
--menuitem-image : url ( "chrome://browser/skin/customize.svg" ) ;
}
/* viewFullZoomMenu sub menu */
# menu_zoomEnlarge {
--menuitem-image : url ( "chrome://browser/skin/add-circle-fill.svg" ) ;
}
# menu_zoomReduce {
--menuitem-image : url ( "chrome://browser/skin/subtract-circle-fill.svg" ) ;
}
# menu_zoomReset {
--menuitem-image : url ( "../icons/resize.svg" ) ;
}
# toggle_zoom {
--menuitem-image : url ( "../icons/screenshot.svg" ) ;
}
/*= goPopup ==================================================================*/
# menu_showAllHistory {
--menuitem-image : url ( "chrome://browser/skin/history.svg" ) ;
}
# sanitizeItem {
--menuitem-image : url ( "chrome://browser/skin/forget.svg" ) ;
}
# sync-tabs-menuitem {
--menuitem-image : url ( "chrome://browser/skin/sync.svg" ) ;
}
# historyRestoreLastSession {
--menuitem-image : url ( "../icons/restore-session.svg" ) ;
}
# hiddenTabsMenu {
--menuitem-image : url ( "../icons/eye-hide.svg" ) ;
}
# historyUndoMenu {
--menuitem-image : url ( "chrome://browser/skin/tab.svg" ) ;
}
# historyUndoWindowMenu {
--menuitem-image : url ( "chrome://browser/skin/window.svg" ) ;
}
/* sub menu */
# historyUndoPopup . restoreallitem {
--menuitem-image : url ( "../icons/movetowindow-16.svg" ) ;
}
# historyUndoWindowPopup . restoreallitem {
--menuitem-image : url ( "../icons/restore-session.svg" ) ;
}
/*= bookmarksMenuPopup =======================================================*/
# bookmarksShowAll {
--menuitem-image : url ( "chrome://browser/skin/bookmark-star-on-tray.svg" ) ;
}
# menu_bookmarkThisPage ,
# menu_bookmarkAllTabs {
--menuitem-image : url ( "chrome://browser/skin/bookmark-hollow.svg" ) ;
}
# menu_bookmarkThisPage [ data-l10n-id = "menu-bookmark-edit" ] {
--menuitem-image : url ( "chrome://browser/skin/bookmark.svg" ) ;
}
/*= menu_ToolsPopup ==========================================================*/
# menu_openDownloads {
--menuitem-image : url ( "chrome://browser/skin/downloads/downloads.svg" ) ;
}
# menu_openAddons {
--menuitem-image : url ( "chrome://mozapps/skin/extensions/extension.svg" ) ;
}
# sync-setup {
--menuitem-image : url ( "chrome://browser/skin/fxa/avatar-empty.svg" ) ;
}
# sync-syncnowitem {
--menuitem-image : url ( "chrome://browser/skin/sync.svg" ) ;
}
# menu_openFirefoxView {
--menuitem-image : url ( "chrome://branding/content/icon32.png" ) ;
}
# webDeveloperMenu ,
# browserToolsMenu {
--menuitem-image : url ( "../icons/developer.svg" ) ;
}
# menu_pageInfo {
--menuitem-image : url ( "../icons/document-endnote.svg" ) ;
}
/* menuWebDeveloperPopup sub menu */
# menu_devToolbox {
/* checkbox */
--menuitem-image : url ( "../icons/developer.svg" ) ;
}
# menu_taskManager {
--menuitem-image : url ( "../icons/performance.svg" ) ;
}
# menu_devtools_remotedebugging {
--menuitem-image : url ( "../icons/bug.svg" ) ;
}
# menu_browserToolbox {
--menuitem-image : url ( "../icons/window-dev-tools.svg" ) ;
}
# menu_browserContentToolbox {
--menuitem-image : url ( "../icons/command-frames.svg" ) ;
}
# menu_browserConsole {
--menuitem-image : url ( "chrome://devtools/skin/images/command-console.svg" ) ;
}
# menu_responsiveUI {
/* checkbox */
--menuitem-image : url ( "../icons/command-responsivemode.svg" ) ;
}
# menu_eyedropper {
/* checkbox */
--menuitem-image : url ( "chrome://devtools/skin/images/command-eyedropper.svg" ) ;
}
# menu_pageSource {
--menuitem-image : url ( "../icons/document-search.svg" ) ;
}
# extensionsForDevelopers {
--menuitem-image : url ( "chrome://devtools/skin/images/debugging-addons.svg" ) ;
}
/*= windowPopup ==============================================================*/
# windowPopup > menuitem [ command = "minimizeWindow" ] {
--menuitem-image : url ( "../icons/arrow-between-down.svg" ) ;
}
# windowPopup > menuitem [ command = "zoomWindow" ] {
--menuitem-image : url ( "../icons/auto-fit-width.svg" ) ;
}
/*= menu_HelpPopup ===========================================================*/
# menu_openHelp {
--menuitem-image : url ( "chrome://global/skin/icons/help.svg" ) ;
}
# feedbackPage {
--menuitem-image : url ( "../icons/send.svg" ) ;
}
# helpSafeMode {
--menuitem-image : url ( "chrome://devtools/skin/images/debugging-workers.svg" ) ;
}
# troubleShooting {
--menuitem-image : url ( "chrome://global/skin/icons/more.svg" ) ;
}
# help_reportSiteIssue {
--menuitem-image : url ( "chrome://global/skin/icons/lightbulb.svg" ) ;
}
# menu_HelpPopup_reportPhishingtoolmenu {
--menuitem-image : url ( "chrome://global/skin/icons/warning.svg" ) ;
}
# aboutName {
--menuitem-image : url ( "chrome://global/skin/icons/info.svg" ) ;
}
2022-05-11 21:19:02 +02:00
}
2022-12-04 09:37:08 +01:00
@ supports -moz-bool-pref ( "userChrome.icon.library" ) {
2022-10-17 19:50:35 +02:00
/*= organizeButtonPopup ======================================================*/
# newbookmark {
--menuitem-image : url ( "chrome://browser/skin/bookmark.svg" ) ;
}
2022-05-11 21:19:02 +02:00
# newfolder {
2022-10-17 19:50:35 +02:00
--menuitem-image : url ( "chrome://global/skin/icons/folder.svg" ) ;
}
@ supports -moz-bool-pref ( "userChrome.icon.library" ) {
# newfolder {
--menuitem-image : url ( "../icons/folder.svg" ) ;
}
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
# newseparator {
--menuitem-image : url ( "../icons/vertical-line.svg" ) ;
}
# orgUndo {
--menuitem-image : url ( "../icons/undo.svg" ) ;
}
# orgCut {
--menuitem-image : url ( "chrome://browser/skin/edit-cut.svg" ) ;
}
# orgCopy {
--menuitem-image : url ( "../icons/edit-copy.svg" ) ;
}
# orgPaste {
--menuitem-image : url ( "chrome://browser/skin/edit-paste.svg" ) ;
}
# orgDelete {
--menuitem-image : url ( "chrome://global/skin/icons/delete.svg" ) ;
}
# orgSelectAll {
--menuitem-image : url ( "../icons/select-all-on.svg" ) ;
}
# orgClose {
--menuitem-image : url ( "chrome://global/skin/icons/close.svg" ) ;
}
/*= viewMenuPopup ============================================================*/
# viewColumns {
--menuitem-image : url ( "chrome://global/skin/icons/columnpicker.svg" ) ;
}
# viewSort {
--menuitem-image : url ( "../icons/text-sort-ascending.svg" ) ;
}
/*= maintenanceButtonPopup ===================================================*/
# backupBookmarks {
--menuitem-image : url ( "chrome://devtools/skin/images/datastore.svg" ) ;
}
# fileImport {
2022-12-04 09:37:08 +01:00
--menuitem-image : url ( "../icons/toolbarButton-download.svg" ) ;
2022-10-17 19:50:35 +02:00
}
# fileExport {
--menuitem-image : url ( "chrome://browser/skin/open.svg" ) ;
}
# browserImport {
--menuitem-image : url ( "chrome://browser/skin/import.svg" ) ;
}
2022-05-11 21:19:02 +02:00
}
}
2022-10-17 19:50:35 +02:00
/** Waterfox ******************************************************************/
@ supports -moz-bool-pref ( "userChrome.icon.panel" ) {
# appMenu-restart-button {
list-style-image : url ( "../icons/refresh-cw.svg" ) ! important ;
}
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
@ supports -moz-bool-pref ( "userChrome.icon.menu" ) {
# menu_FileRestartItem {
--menuitem-image : url ( "../icons/refresh-cw.svg" ) ;
}
menuitem . privatetab-icon {
--menuitem-image : url ( "../icons/private-favicon.svg" ) ;
}
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
/** Tor Browser ***************************************************************/
@ supports -moz-bool-pref ( "userChrome.icon.panel" ) {
# appMenuNewIdentity {
list-style-image : url ( "chrome://browser/skin/new_identity.svg" ) ;
}
# appMenuNewCircuit {
list-style-image : url ( "chrome://browser/skin/new_circuit.svg" ) ;
}
# appMenu_torBrowserUserManual {
list-style-image : url ( "chrome://browser/skin/onion.svg" ) ;
}
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
@ supports -moz-bool-pref ( "userChrome.icon.menu" ) {
# menu_newIdentity {
--menuitem-image : url ( "chrome://browser/skin/new_identity.svg" ) ;
}
# menu_newCircuit {
--menuitem-image : url ( "chrome://browser/skin/new_circuit.svg" ) ;
}
# torBrowserUserManual {
--menuitem-image : url ( "chrome://browser/skin/onion.svg" ) ;
}
2022-05-11 21:19:02 +02:00
}
}