Created
December 19, 2023 15:08
-
-
Save shredthaGNAR/553ff7824dc50942860d321cb95a3328 to your computer and use it in GitHub Desktop.
blue alpen
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*** photon-like Menu Colors (14 Jan 2022) ***/ | |
| /* Bookmarks Toolbar folders * | |
| #PersonalToolbar menupopup, | |
| /* Right-click context menus * | |
| #mainPopupSet menupopup, | |
| /* Top menu bar on Windows (not sure about others) * | |
| #toolbar-menubar menupopup, | |
| /* Sidebar/Library bookmark/history context menus * | |
| #placesContext, | |
| /* Address bar context menu (2021-10-25) * | |
| #urlbar-input-container menupopup, | |
| /* Various toolbar drop-down panels (Fx96) * | |
| #back-button menupopup, | |
| #forward-button menupopup, | |
| #identity-popup, | |
| #appMenu-popup, | |
| #downloadsPanel, | |
| #BMB_bookmarksPopup { | |
| /* Text color * | |
| --menu-color: #000 !important; | |
| --arrowpanel-color: #000 !important; | |
| --panel-color: #000 !important; | |
| /* Background color * | |
| --menu-background-color: #f0f0f0 !important; | |
| --arrowpanel-background: #f0f0f0 !important; | |
| --panel-background: #f0f0f0 !important; | |
| /* Border color (if any) * | |
| --menu-border-color: threedshadow !important; | |
| --arrowpanel-border-color: threedshadow !important; | |
| --panel-border-color: threedshadow !important; | |
| /* Hovered/expanded item background color * | |
| --menuitem-hover-background-color: #e0e0e6 !important; | |
| --button-hover-bgcolor: #e0e0e6 !important; | |
| /* Disabled items text color and hovered background * | |
| --menu-disabled-color: rgba(21, 20, 26, 0.4) !important; | |
| --menuitem-disabled-hover-background-color: rgba(224, 224, 230, 0.4) !important; | |
| } | |
| /* ----- My Custom Colors ----- */ | |
| :root { | |
| --firefoxcss-main-bg-color: hsl(240, 2%, 13%); | |
| /* ^ Main dark color, url bar, active tab etc. ^ */ | |
| --firefoxcss-item-bg-color: hsl(240, 2%, 20%); | |
| /* ^ Main lighter color, toolbar ^ */ | |
| --firefoxcss-tab-bg-color: hsl(240, 2%, 26%); | |
| --firefoxcss-tab-hover-bg-color: hsl(240, 2%, 28%); | |
| --firefoxcss-tab-active-bg-color: var(--firefoxcss-main-bg-color); | |
| --firefoxcss-bookmarks-bg-color: hsl(240, 2%, 13%); | |
| --firefoxcss-url-bar-bg-color: var(--firefoxcss-main-bg-color); | |
| --firefoxcss-url-border-bottom-color: hsla(0, 0%, 100%, 0.2); | |
| --firefoxcss-url-border-top-color: hsla(0, 0%, 0%, 0.15); | |
| --firefoxcss-url-breakout-bar-bg-color: var(--firefoxcss-main-bg-color); | |
| --firefoxcss-url-breakout-border-bottom-color: hsla(0, 0%, 70%, 0.05); | |
| --firefoxcss-top-bar-border-bottom-color: hsla(0, 0%, 6%, 0.75); | |
| --firefoxcss-other-color: hsla(0, 0%, 60%, 0.35); | |
| --firefoxcss-top-bar-border-bottom-size: 1px; | |
| --firefoxcss-border-radius: 10px; | |
| } | |
| :root { | |
| --button-hover-bgcolor: hsla(0, 0%, 60%, 0.35) !important; | |
| --button-active-bgcolor: hsla(0, 0%, 45%, 0.35) !important; | |
| --button-bgcolor: hsla(0, 0%, 45%, 0.9) !important; | |
| --arrowpanel-border-color: hsla(0, 0%, 50%, 0.25) !important; | |
| --dark-menu-background-color: #222121 !important; | |
| --dark-menu-border-color: rgb(55, 55, 55) !important; | |
| --dark-menuitem-hover-background-color: rgba(159, 159, 159, 0.35) !important; | |
| --multiselect: rgb(176, 98, 34) !important; | |
| } | |
| /* Avoids bright flash while loadingn/ */ | |
| #tabbrowser-tabpanels { | |
| background-color: var(--firefoxcss-main-bg-color) !important; | |
| } | |
| browser[type="content-primary"], | |
| browser[type="content"] { | |
| background: var(--firefoxcss-main-bg-color) !important; | |
| } | |
| /* Other */ | |
| #TabsToolbar { | |
| padding-inline-start: initial !important; | |
| } | |
| .titlebar-spacer[type="pre-tabs"], | |
| .titlebar-spacer[type="post-tabs"], | |
| .titlebar-spacer { | |
| display: none !important; | |
| } | |
| /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_bookmarks_toolbar.css made available under Mozilla Public License v. 2.0 | |
| See the above repository for updates as well as full license text. */ | |
| #PersonalToolbar { | |
| --uc-bm-height: 20px; | |
| /* Might need to adjust if the toolbar has other buttons */ | |
| --uc-bm-padding: 4px; | |
| /* Vertical padding to be applied to bookmarks */ | |
| --uc-autohide-toolbar-delay: 600ms; | |
| /* The toolbar is hidden after 0.6s */ | |
| /* 0deg = "show" ; 90deg = "hide" ; Set the following to control when bookmarks are shown */ | |
| --uc-autohide-toolbar-focus-rotation: 90deg; | |
| /* urlbar is focused */ | |
| --uc-autohide-toolbar-hover-rotation: 0deg; | |
| /* cursor is over the toolbar area */ | |
| } | |
| :root[uidensity="touch"] #PersonalToolbar { | |
| --uc-bm-padding: 7px | |
| } | |
| #PersonalToolbar:not([customizing]) { | |
| position: relative; | |
| margin-bottom: calc(-1px - var(--uc-bm-height) - 2 * var(--uc-bm-padding)); | |
| transform: rotateX(90deg); | |
| transform-origin: top; | |
| transition: transform 135ms linear var(--uc-autohide-toolbar-delay) !important; | |
| z-index: 1; | |
| /* The following properties should allow the themes with transparent toolbars to work */ | |
| /* background-color: #8638c54c !important;*/ | |
| background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling); | |
| --uc-bg-y: calc(-2 * (var(--tab-block-margin) + var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) - var(--tab-min-height) - 16px - var(--bookmark-block-padding)); | |
| background-position: top left, top left, var(--lwt-background-alignment, top left); | |
| background-position-y: top, top, var(--uc-bg-y), var(--uc-bg-y), var(--uc-bg-y); | |
| background-image: var(--toolbar-bgimage), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, var(--lwt-additional-images)) !important; | |
| -moz-appearance: -moz-mac-source-list !important; | |
| } | |
| #PlacesToolbarItems>.bookmark-item, | |
| #OtherBookmarks, | |
| #PersonalToolbar>#import-button { | |
| padding-block: var(--uc-bm-padding) !important; | |
| } | |
| #nav-bar:focus-within+#PersonalToolbar { | |
| transition-delay: 100ms !important; | |
| transform: rotateX(var(--uc-autohide-toolbar-focus-rotation, 0)); | |
| } | |
| #navigator-toolbox:hover>#PersonalToolbar { | |
| transition-delay: 100ms !important; | |
| transform: rotateX(var(--uc-autohide-toolbar-hover-rotation, 0)); | |
| } | |
| #navigator-toolbox:hover>#nav-bar:focus-within+#PersonalToolbar { | |
| transform: rotateX(0); | |
| } | |
| /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_close_button_always_on_hover.css made available under Mozilla Public License v. 2.0 | |
| See the above repository for updates as well as full license text. */ | |
| /* Always show tab close button on hover and never otherwise */ | |
| .tabbrowser-tab .tab-close-button { | |
| display: none !important; | |
| } | |
| .tabbrowser-tab:not([pinned]):hover .tab-close-button { | |
| display: flex !important; | |
| align-items: center !important; | |
| } | |
| /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/centered_tab_content.css made available under Mozilla Public License v. 2.0 | |
| See the above repository for updates as well as full license text. */ | |
| .tabbrowser-tab[selected]:not(:hover):not([pinned]) .tab-label-container, | |
| #tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab:not(:hover):not([pinned]) .tab-label-container { | |
| padding-inline-end: 6px !important; | |
| } | |
| .tab-icon-stack { | |
| margin-inline-start: auto | |
| } | |
| .tab-label-container { | |
| max-width: min-content; | |
| margin-inline-end: auto; | |
| } | |
| .tabbrowser-tab:not([selected="true"]):not([multiselected="true"]) .tab-background { | |
| border-top: 1px solid rgba(130, 130, 130, 0.3) !important; | |
| border-left: 1px solid rgba(130, 130, 130, 0.3) !important; | |
| border-right: 1px solid rgba(130, 130, 130, 0.3) !important; | |
| } | |
| .tabbrowser-tab[selected="true"] .tab-label:-moz-lwtheme-brighttext { | |
| color: white !important; | |
| } | |
| .tabbrowser-tab .tab-label:-moz-lwtheme-brighttext { | |
| color: rgba(255, 255, 255, 0.7) !important; | |
| } | |
| /*---------------------------------------------------------------- | |
| .tabbrowser-tab[selected="true"] .tab-background:-moz-lwtheme-brighttext { | |
| box-shadow: inset 0em -4em 0em var(--toolbar-bgcolor) !important; | |
| } | |
| /* non-active/non-selected tabs (container) */ | |
| .tabbrowser-tab[usercontextid]:not([selected], [multiselected]):hover .tab-background { | |
| background-color: color-mix(in srgb, | |
| var(--identity-tab-color) 20%, | |
| transparent) !important; | |
| outline: 1px solid var(--identity-tab-color) !important; | |
| box-shadow: inset 0em -2em 0em var(--identity-tab-color) !important; | |
| } | |
| /* | |
| .tabbrowser-tab:hover>.tab-stack>.tab-background:not([selected="true"], [multiselected]) { | |
| background-image: | |
| /*var(--button-hover-bgcolor)* | |
| radial-gradient(circle at bottom center, | |
| #9400ff 15px, | |
| #9500ff7d) !important; | |
| /*box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;* | |
| } | |
| /*container tab label color when selected */ | |
| .tabbrowser-tab[class*="identity-color-"] .tab-label { | |
| color: var(--identity-tab-color) !important; | |
| font-weight: bold !important; | |
| font-style: underline !important; | |
| } | |
| /* Active tab brightness */ | |
| .tab-content[selected="true"] { | |
| background-color: color-mix(in srgb, #5c04ae 20%, transparent) !important; | |
| text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1), | |
| 1px 1px 1px rgba(0, 0, 0, 0.5) !important; | |
| margin-top: 0px !important; | |
| margin-bottom: 0px !important; | |
| } | |
| /* Mouse Hover Background by passing by non-selected tabs * | |
| .tabbrowser-tab:hover>.tab-stack>.tab-background:not([selected="true"], [multiselected]) { | |
| background: linear-gradient(#202085, #2020853c) !important; | |
| box-shadow: 5px 3px 6px rgb(1 1 1 / 16%), 4px 4px 2px rgb(0 0 0 / 23%) !important; | |
| } | |
| /* Back button */ | |
| #back-button>.toolbarbutton-icon { | |
| --backbutton-background: transparent !important; | |
| border: 0 !important; | |
| border: none !important; | |
| border-radius: 10px !important; | |
| box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.6) !important; | |
| } | |
| #forward-button>.toolbarbutton-icon { | |
| --forwardbutton-background: transparent !important; | |
| border: 0 !important; | |
| border: none !important; | |
| box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.6) !important; | |
| border-radius: 10px !important; | |
| } | |
| /*tooltip dark theme*/ | |
| tooltip { | |
| -moz-appearance: none !important; | |
| color: #fff !important; | |
| background-color: #1d1d3b !important; | |
| /*border-color: #E55B0A !important;*/ | |
| border: 1px solid transparent !important; | |
| border-image: 1 1 1 1 linear-gradient(90deg, | |
| #9400ff, | |
| #ba00e5, | |
| #df06b9, | |
| #e62da7, | |
| #f13b95, | |
| #f64d86, | |
| #f85f7a, | |
| #fc7169, | |
| #f9845b, | |
| #e8ab52) !important; | |
| border-radius: 4px !important; | |
| } | |
| /* Mouse Hover Background by passing by non-selected tabs */ | |
| .tabbrowser-tab:hover>.tab-stack>.tab-background:not([selected="true"], [multiselected]) { | |
| background-image: | |
| /*var(--button-hover-bgcolor)*/ | |
| radial-gradient(circle at bottom center, | |
| #512995d6 15px, | |
| #210246b8) !important; | |
| /*box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important; */ | |
| box-shadow: 5px 3px 6px rgb(1 1 1 / 16%), 4px 4px 2px rgb(0 0 0 / 23%) !important; | |
| } | |
| /* History swipe animation custom color Firefox 111+ */ | |
| #historySwipeAnimationPreviousArrow, | |
| #historySwipeAnimationNextArrow { | |
| --swipe-nav-icon-primary-color: #8c5ced !important; | |
| --swipe-nav-icon-accent-color: #FFFFFF !important; | |
| } | |
| @media (-moz-content-prefers-color-scheme: dark) { | |
| #historySwipeAnimationPreviousArrow, | |
| #historySwipeAnimationNextArrow { | |
| --swipe-nav-icon-primary-color: #00DDFF !important; | |
| --swipe-nav-icon-accent-color: #000000 !important; | |
| } | |
| } | |
| /* Remove Text on Boookmarrks-Icoons only in bookmarks bars */ | |
| #PersonalToolbar #import-button>.toolbarbutton-text, | |
| .bookmark-item>.toolbarbutton-text { | |
| display: none !important; | |
| } | |
| /* center Bookmarks toolbar items*/ | |
| #PlacesToolbarItems { | |
| display: flex !important; | |
| justify-content: safe center !important; | |
| } | |
| /* | |
| .tabbrowser-tab>.tab-stack>.tab-content>.tab-close-button { | |
| visibility: hidden; | |
| } | |
| .tabbrowser-tab:hover>.tab-stack>.tab-content>.tab-close-button { | |
| visibility: visible !important; | |
| } | |
| /* ----- Non active tabs have darker text ----- */ | |
| .tabbrowser-tab:not([visuallyselected="true"]):not([multiselected]):not(:hover) .tab-label-container .tab-label { | |
| color: hsla(0, 0%, 100%, 0.65) !important; | |
| } | |
| toolbar #tabs-newtab-button:not([disabled="true"]):-moz-any([open], [checked], :hover:active)>.toolbarbutton-icon, | |
| toolbar #new-tab-button:not([disabled="true"]):-moz-any([open], [checked], :hover:active)>.toolbarbutton-icon { | |
| border: 0 !important; | |
| box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.6) !important; | |
| } | |
| #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])>#tabbrowser-arrowscrollbox>.tabbrowser-tab[first-visible-unpinned-tab] { | |
| margin-inline-start: 0px !important; | |
| } | |
| #tabbrowser-tabs { | |
| --tab-loading-fill: transparent !important; | |
| margin-left: 2px !important; | |
| } | |
| .tabbrowser-tab:not([visuallyselected="true"]):not([multiselected]):not(:hover) .tab-icon-image { | |
| opacity: 0.7 !important; | |
| transition: opacity 250ms ease !important; | |
| } | |
| /* Selected tabs design*/ | |
| #tabbrowser-tabs .tabbrowser-tab .tab-background[selected] { | |
| /* border: 0 !important;*/ | |
| outline: 1px solid color-mix(in srgb, #dadada 20%, transparent) !important; | |
| box-shadow: none !important; | |
| } | |
| /* Multiselect tabs */ | |
| #tabbrowser-tabs .tabbrowser-tab .tab-background[multiselected="true"] { | |
| border-style: solid !important; | |
| border-image: 1 1 1 1 linear-gradient(90deg, | |
| #9400ff, | |
| #ba00e5, | |
| #df06b9, | |
| #e62da7, | |
| #f13b95, | |
| #f64d86, | |
| #f85f7a, | |
| #fc7169, | |
| #f9845b, | |
| #e8ab52) !important; | |
| /*outline: none !important;*/ | |
| /*background-color: var(--firefoxcss-other-color) !important; | |
| /* box-shadow: none !important;*/ | |
| /*background-color: color-mix(in srgb, #fc7169 20%, transparent) !important;*/ | |
| } | |
| /*----------------------------------------------------------------*/ | |
| #tabbrowser-tabs .tabbrowser-tab .tab-background:is([selected]):is([multiselected]) { | |
| outline: 1px solid color-mix(in srgb #e8ab52 50%, transparent) !important; | |
| outline-offset: 0px !important; | |
| outline-width: 1px !important; | |
| } | |
| /* ----------------------------------- */ | |
| /* ----- Toolbar buttons ------------- */ | |
| /* ----------------------------------- */ | |
| toolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover>.toolbarbutton-icon, | |
| toolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover>.toolbarbutton-text, | |
| toolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover>.toolbarbutton-badge-stack { | |
| box-shadow: 0 0 4px rgba(0, 0, 0, 0.3) !important; | |
| } | |
| toolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :hover:active)>.toolbarbutton-icon, | |
| toolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :hover:active)>.toolbarbutton-text, | |
| toolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :hover:active)>.toolbarbutton-badge-stack { | |
| box-shadow: 0 0 4px rgba(0, 0, 0, 0.3) !important; | |
| } | |
| :root[privatebrowsingmode="temporary"] #PanelUI-menu-button { | |
| fill: hsl(277, 70%, 64%) !important; | |
| } | |
| :root[privatebrowsingmode="temporary"] #PanelUI-menu-button .toolbarbutton-badge-stack .toolbarbutton-icon { | |
| filter: drop-shadow(0px 0px 1px #000000d5) !important; | |
| } | |
| /*** Hide some buttons for hover */ | |
| #nav-bar:not([customizing="true"])>#nav-bar-customization-target>#urlbar-container:not(:hover)>#urlbar:not([focused])>#urlbar-input-container>#page-action-buttons { | |
| opacity: 0; | |
| } | |
| #page-action-buttons { | |
| transition: opacity 0.15s ease; | |
| } | |
| #nav-bar:not([customizing="true"])>#nav-bar-customization-target>#urlbar-container:not(:hover)>#urlbar:not([focused])>#urlbar-input-container>#identity-box { | |
| opacity: 0; | |
| /*visibility: collapse;*/ | |
| } | |
| #identity-box { | |
| transition: visibility 0.15s ease-in-out, opacity 0.15s ease-in-out; | |
| /* transition: opacity 0.15s ease !important;*/ | |
| } | |
| #nav-bar:not([customizing="true"])>#nav-bar-customization-target>#urlbar-container:not(:hover)>#urlbar:not([focused])>#urlbar-input-container>#tracking-protection-icon-container { | |
| opacity: 0 !important; | |
| } | |
| #tracking-protection-icon-container { | |
| transition: opacity 0.15s ease !important; | |
| } | |
| .tab-label-containr[textoverflow][labeldirection="ltr"]:not([pinned]), | |
| .tab-label-container[textoverflow]:not([labeldirection], [pinned]):-moz-locale-dir(ltr) { | |
| direction: ltr !important; | |
| mask-image: linear-gradient(to left, transparent, black 4em) !important; | |
| } | |
| #urlbar[breakout][breakout-extend][open] { | |
| background-color: var(--firefoxcss-url-breakout-bar-bg-color) !important; | |
| border-bottom: 1px solid var(--firefoxcss-url-breakout-border-bottom-color) !important; | |
| border-top: 1px solid var(--firefoxcss-url-border-top-color) !important; | |
| box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, | |
| rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, | |
| rgba(0, 0, 0, 0.09) 0px 32px 16px !important; | |
| } | |
| /* speaker on tabs color fixes */ | |
| .tab-icon-overlay:not([crashed])[soundplaying]:hover, | |
| .tab-icon-overlay:not([crashed])[muted]:hover, | |
| .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { | |
| color: currentColor !important; | |
| stroke: hsla(0, 0%, 80%) !important; | |
| background-color: hsla(0, 0%, 80%) !important; | |
| fill-opacity: 0.95 !important; | |
| } | |
| .tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[soundplaying]:hover, | |
| .tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[muted]:hover, | |
| .tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { | |
| color: currentColor !important; | |
| stroke: hsla(0, 0%, 80%) !important; | |
| background-color: hsla(0, 0%, 80%) !important; | |
| fill-opacity: 0.95 !important; | |
| } | |
| #TabsToolbar .tab-icon-overlay:not([crashed])[soundplaying], | |
| #TabsToolbar .tab-icon-overlay:not([crashed])[muted], | |
| #TabsToolbar .tab-icon-overlay:not([crashed])[activemedia-blocked] { | |
| color: hsl(0, 0%, 100%) !important; | |
| } | |
| #TabsToolbar .tab-icon-overlay:not([crashed])[soundplaying]:hover, | |
| #TabsToolbar .tab-icon-overlay:not([crashed])[muted]:hover, | |
| #TabsToolbar .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { | |
| color: hsla(0, 0%, 10%) !important; | |
| } | |
| /* Tab labels */ | |
| #main-window[lwthemetextcolor="dark"] tab { | |
| color: #333 !important; | |
| } | |
| #main-window[lwthemetextcolor="dark"] tab:hover { | |
| color: #000 !important; | |
| } | |
| #main-window[lwthemetextcolor="dark"] tab[selected] { | |
| color: #000 !important; | |
| } | |
| /* Tab labels */ | |
| #main-window[lwthemetextcolor="bright"] tab { | |
| color: rgb(102, 102, 102) !important; | |
| } | |
| #main-window[lwthemetextcolor="bright"] tab:hover { | |
| color: #fff !important; | |
| } | |
| #main-window[lwthemetextcolor="bright"] tab[selected] { | |
| color: #fff !important; | |
| } | |
| .tabbrowser-tab[notselectedsinceload]:not([pending]), | |
| .tabbrowser-tab[notselectedsinceload][pending][busy] { | |
| font-style: italic !important; | |
| } | |
| /* highlight unread tabs; requires italicizeUnreadTabs.uc.js */ | |
| :root[italic-unread-tabs] .tabbrowser-tab[notselectedsinceload]:not([pending]), | |
| :root[italic-unread-tabs] .tabbrowser-tab[notselectedsinceload][pending][busy] { | |
| font-style: italic !important; | |
| } | |
| /* new code */ | |
| .tabbrowser-tab[pending] { | |
| /* Set styles for unloaded tab */ | |
| font-style: italic !important; | |
| } | |
| .tabbrowser-tab[busy] { | |
| /* Set styles for loading tab */ | |
| font-style: italic !important; | |
| } | |
| .tabbrowser-tab[unread] { | |
| /* Set styles for unread tab */ | |
| font-style: italic !important; | |
| font-weight: bolder !important; | |
| } | |
| /* set rounded outside corners on tabs so they look like folder labels. | |
| you can disable this by making a new pref in about:config | |
| and setting it to true: "userChrome.tabs.rounded-outer-corners.disabled" | |
| this CSS is complicated because the outside corner needs to take on the color of the | |
| tab, but it's not part of the tab background so it doesn't do so automatically. */ | |
| /* overflow needs to be visible since the corners need to be outside the | |
| bounding box of the tab, otherwise they won't overlap with other tabs, they'll | |
| just push tabs 10px away from each other, and from the edge of the tab bar. */ | |
| #TabsToolbar .tabbrowser-tab, | |
| #TabsToolbar .tabbrowser-tab .tab-stack { | |
| overflow: visible; | |
| } | |
| .tabbrowser-tab .tab-stack::before, | |
| .tabbrowser-tab .tab-stack::after { | |
| bottom: 0; | |
| content: ""; | |
| display: block; | |
| position: absolute; | |
| pointer-events: none; | |
| width: 5px; | |
| height: 5px; | |
| z-index: 2; | |
| } | |
| .tabbrowser-tab .tab-stack::before { | |
| mask: url(chrome://userchrome/content/skin/tab-corner-mask-left.svg) 0/100% 100%, linear-gradient(#fff, #fff); | |
| mask-composite: exclude; | |
| left: -5px; | |
| } | |
| .tabbrowser-tab .tab-stack::after { | |
| mask: url(chrome://userchrome/content/skin/tab-corner-mask-right.svg) 0/100% 100%, linear-gradient(#fff, #fff); | |
| mask-composite: exclude; | |
| right: -5px; | |
| } | |
| .tabbrowser-tab[usercontextid]:not([multiselected]) .tab-stack::before { | |
| left: -4.6px; | |
| } | |
| .tabbrowser-tab[usercontextid]:not([multiselected]) .tab-stack::after { | |
| right: -4.6px; | |
| } | |
| /* z-index of these corners is very complicated because the z-index of other | |
| elements needs to be set directly, to create the impression that tabs are | |
| layering on top of each other, with rightmost tabs on top and leftmost tabs on | |
| bottom. this is the normal state but hovering, selecting, pinning, etc. needs to | |
| change the z-index so tabs can "pop out" of the stack. so because z-index is | |
| being modulated so heavily we need to do the same with our outside corners, or | |
| else they'll end up being covered up or showing through things they shouldn't. */ | |
| .tabbrowser-tab .tab-context-line { | |
| z-index: 3; | |
| position: relative !important; | |
| } | |
| .tabbrowser-tab { | |
| z-index: 0; | |
| } | |
| .tabbrowser-tab .tab-content { | |
| z-index: 1; | |
| } | |
| .tabbrowser-tab[pinned] .tab-stack::before, | |
| .tabbrowser-tab[pinned] .tab-stack::after { | |
| z-index: 6; | |
| } | |
| .tab-icon-stack { | |
| z-index: -1; | |
| } | |
| /* hide the corners on first/last visible tabs, just like we unround the top corners */ | |
| #tabbrowser-tabs:not([movingtab], [using-closing-tabs-spacer]) .tabbrowser-tab:first-of-type:not([justmoved], [style*="transform"]) .tab-stack::before, | |
| #tabbrowser-tabs:not([movingtab], [using-closing-tabs-spacer]) .tabbrowser-tab:last-of-type:not([justmoved], [style*="transform"]) .tab-stack::after { | |
| display: none; | |
| } | |
| #TabsToolbar #tabbrowser-tabs #tabbrowser-arrowscrollbox:not([overflowing="true"]) .tabbrowser-tab:last-of-type[pinned] .tab-stack::after { | |
| display: block; | |
| } | |
| /* default position is for tabs to be stacked on top of the tab to their left. | |
| so shadows are cast to the left but not to the right. */ | |
| .tabbrowser-tab { | |
| position: relative; | |
| } | |
| /* hovered tabs stack on top of normal tabs in either direction. so shadows are | |
| cast in both directions, unless the neighboring tab is selected or something. */ | |
| .tabbrowser-tab:not([visuallyselected="true"], [pinned], [multiselected]):is(:hover, .keyboard-focused-tab, [open]) { | |
| z-index: 3 !important; | |
| } | |
| /* selected tabs stack over hovered tabs */ | |
| .tabbrowser-tab[visuallyselected="true"] { | |
| z-index: 6 !important; | |
| } | |
| /* multiselected tabs do too, but lower than selected tabs */ | |
| .tabbrowser-tab[multiselected] { | |
| z-index: 4 !important; | |
| } | |
| /* multiselected gets 1 extra point for being hovered */ | |
| .tabbrowser-tab[multiselected]:not([visuallyselected="true"], [pinned]):is(:hover, .keyboard-focused-tab, [open]) { | |
| z-index: 5 !important; | |
| } | |
| .tabbrowser-tab[multiselected][visuallyselected="true"] { | |
| z-index: 6 !important; | |
| } | |
| /* pinned tabs stack over everything except selected tabs */ | |
| .tabbrowser-tab[pinned] { | |
| z-index: 7 !important; | |
| } | |
| /* and the same formula applies to them too */ | |
| .tabbrowser-tab[pinned]:not([visuallyselected="true"], [multiselected]):is(:hover, .keyboard-focused-tab, [open]) { | |
| z-index: 8 !important; | |
| } | |
| .tabbrowser-tab[pinned][multiselected] { | |
| z-index: 9 !important; | |
| } | |
| .tabbrowser-tab[pinned][multiselected]:not([visuallyselected="true"]):is(:hover, .keyboard-focused-tab, [open]) { | |
| z-index: 10 !important; | |
| } | |
| .tabbrowser-tab[pinned][visuallyselected="true"], | |
| .tabbrowser-tab[pinned][multiselected][visuallyselected="true"] { | |
| z-index: 11 !important; | |
| } | |
| /* when tab is being dragged/dropped, style it like it's hovered */ | |
| #tabbrowser-tabs[movingtab] .tabbrowser-tab[selected]:not([pinned]) .tab-icon-image { | |
| opacity: 0 !important; | |
| } | |
| #tabbrowser-tabs[movingtab] .tabbrowser-tab[selected]:not([pinned]) .tab-close-button { | |
| order: 0 !important; | |
| display: flex !important; | |
| position: relative !important; | |
| margin-right: -16px !important; | |
| z-index: 1 !important; | |
| visibility: visible !important; | |
| opacity: 1 !important; | |
| } | |
| /* tab buttons are animated with opacity and transformation */ | |
| .tabbrowser-tab:not(:hover, .keyboard-focused-tab, [tabdrop-samewindow], [open]) .tab-close-button { | |
| transform: translateX(-15px) scale(0.5) !important; | |
| } | |
| #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:not([tabdrop-samewindow], [justmoved]) :is(.tab-close-button, .tab-icon-image, .tab-sharing-icon-overlay, .tab-throbber) { | |
| transition: 0.12s transform ease-in-out, 0.12s opacity ease-in-out !important; | |
| } | |
| @media (prefers-reduced-motion: no-preference) { | |
| /* tabLoadingSpinner.uc.js enables a special loading throbber animation | |
| that spins instead of bouncing horizontally */ | |
| @keyframes uc-tab-throbber-spinner-css { | |
| to { | |
| rotate: 360deg; | |
| } | |
| } | |
| @keyframes uc-tab-throbber-spinner-sprite { | |
| 0% { | |
| transform: translateX(0); | |
| } | |
| 100% { | |
| transform: translateX(-100%); | |
| } | |
| } | |
| @keyframes uc-tab-throbber-spinner-sprite-rtl { | |
| 0% { | |
| transform: translateX(0); | |
| } | |
| 100% { | |
| transform: translateX(100%); | |
| } | |
| } | |
| /* I made different versions of this animation to circumvent an SVG issue. if | |
| you update Firefox and the throbber animation stops working, uncomment one of | |
| the 2 alternate rules below. one of the 3 should work. you can do the same | |
| thing with the all-tabs-menu loading icons in the next ruleset below. */ | |
| :root[sessionrestored] .tab-throbber[throbber-loaded]::before { | |
| content: "" !important; | |
| display: flex !important; | |
| -moz-context-properties: fill, fill-opacity !important; | |
| width: 16px !important; | |
| height: 16px !important; | |
| animation: none !important; | |
| background-position: center !important; | |
| background-repeat: no-repeat !important; | |
| fill: inherit !important; | |
| /* ANIMATION METHOD #1: this version of the animation is implemented by an | |
| <animateTransform> tag. it's the most efficient method but it has broken | |
| once for a couple days due to an erroneous nightly patch. */ | |
| /* background-image: url(chrome://userchrome/content/loading-spinner.svg) !important; */ | |
| /* ---------------------------------- */ | |
| /* ANIMATION METHOD #2: the animation is written in a <style> tag | |
| embedded inside the SVG code. it's visually identical to method #1, but | |
| in terms of performance it is slightly less efficient. the animation is | |
| applied to the compound vector path via the inline style attribute, | |
| giving the element a CSS property "animation" that references the | |
| animation in the style tag. use this if method #1 randomly breaks, | |
| *temporarily*. mozilla should patch such a bug quickly. */ | |
| /* background-image: url(chrome://userchrome/content/loading-spinner-css.svg) !important; */ | |
| /* ---------------------------------- */ | |
| /* ANIMATION METHOD #3: use this if neither method #1 nor #2 works; or if | |
| you want to adjust the speed or other properties of the animation. in | |
| this version, the SVG image itself is not animated at all. it's | |
| completely static. instead, the entire animation is added post hoc via | |
| CSS in this user stylesheet. therefore, it should never break. I believe | |
| this method is significantly less efficient than the two aforementioned | |
| methods, because you don't get to use optimizations that stop SVG | |
| animations playing when they're not active. my understanding is the | |
| animation is basically running 24/7 even when the spinner isn't visible, | |
| because the spinner technically is always visible in order to support the | |
| sliding tab-hover transitions. you can't see it but it's not hidden in | |
| the DOM sense. so I think that makes this method a last resort. */ | |
| /* background-image: url(chrome://userchrome/content/loading-spinner-static.svg) !important; | |
| animation: 0.85s steps(12, end) uc-tab-throbber-spinner-css infinite !important; */ | |
| /* ANIMATION METHOD #4: this version of the animation is implemented in CSS on | |
| a sprite sheet. it's like method #3 except it eliminates an issue with the | |
| vector illustration that makes the icon look like it wobbles. */ | |
| background-image: url(chrome://userchrome/content/loading-spinner-sprite.svg) !important; | |
| background-position: left center !important; | |
| width: 192px !important; | |
| height: 100% !important; | |
| animation: uc-tab-throbber-spinner-sprite 0.85s steps(12) infinite !important; | |
| } | |
| /* ANIMATION METHOD #4: */ | |
| :root[sessionrestored] .tab-throbber[throbber-loaded]:-moz-locale-dir(rtl)::before { | |
| animation-name: uc-tab-throbber-spinner-sprite-rtl !important; | |
| } | |
| /* all tabs menu & vertical tabs pane (script) */ | |
| :root[uc-loading-spinner] .tab-throbber-tabslist:is([busy], [progress]) { | |
| /* ANIMATION METHOD #1: */ | |
| list-style-image: url(chrome://userchrome/content/loading-spinner.svg) !important; | |
| /* ANIMATION METHOD #2: */ | |
| /* list-style-image: url(chrome://userchrome/content/loading-spinner-css.svg) !important; */ | |
| /* ANIMATION METHOD #3: */ | |
| /* animation: 0.85s steps(12, end) uc-tab-throbber-spinner-css infinite !important; | |
| list-style-image: url(chrome://userchrome/content/loading-spinner-static.svg) !important; */ | |
| } | |
| :root[uc-loading-spinner] .tab-throbber-tabslist[busy] { | |
| opacity: 0.8 !important; | |
| fill: var(--busy-throbber-fill) !important; | |
| } | |
| :root[uc-loading-spinner] .tab-throbber-tabslist[progress] { | |
| opacity: 1 !important; | |
| fill: var(--loading-throbber-fill) !important; | |
| } | |
| } | |
| .tabbrowser-tab { | |
| --tab-label-mask-size: 1em !important; | |
| } | |
| /* Small fix for Firefox complete themes */ | |
| .private-browsing-indicator, | |
| #private-browsing-indicator-titlebar, | |
| #private-browsing-indicator, | |
| .private-browsing-indicator { | |
| visibility: collapse !important; | |
| } | |
| .tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background { | |
| background-color: color-mix(in srgb, #0d0d0df7 25%, transparent) !important; | |
| } | |
| /* Adjust tab corner shape, optionally remove space below tabs */ | |
| #tabbrowser-tabs { | |
| --user-tab-rounding: 6px; | |
| } | |
| .tab-background { | |
| border-radius: var(--user-tab-rounding) !important; | |
| } | |
| /* private browsing indicator next to window controls */ | |
| .accessibility-indicator, | |
| .private-browsing-indicator { | |
| height: auto !important; | |
| width: auto !important; | |
| box-sizing: border-box !important; | |
| padding: 0 var(--toolbarbutton-outer-padding) !important; | |
| margin: 0 !important; | |
| background: none !important; | |
| border: 0 !important; | |
| outline: 0; | |
| fill: currentColor !important; | |
| -moz-context-properties: fill, fill-opacity !important; | |
| align-items: center !important; | |
| } | |
| .private-browsing-indicator { | |
| background: none !important; | |
| } | |
| #private-browsing-indicator-with-label { | |
| -moz-context-properties: fill, fill-opacity !important; | |
| fill: currentColor !important; | |
| } | |
| .private-browsing-indicator::before { | |
| content: ""; | |
| box-sizing: border-box !important; | |
| width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; | |
| height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; | |
| background-image: url(chrome://userchrome/content/skin/privateBrowsing.svg) !important; | |
| background-size: 16px !important; | |
| background-position: center !important; | |
| background-repeat: no-repeat !important; | |
| padding: var(--toolbarbutton-inner-padding) !important; | |
| border-radius: var(--toolbarbutton-border-radius) !important; | |
| } | |
| .tab-label-container { | |
| height: revert !important; | |
| pointer-events: none !important; | |
| } | |
| /* highlight unread tabs; requires italicizeUnreadTabs.uc.js */ | |
| :root[italic-unread-tabs] .tabbrowser-tab[notselectedsinceload]:not([pending]), | |
| :root[italic-unread-tabs] .tabbrowser-tab[notselectedsinceload][pending][busy] { | |
| font-style: italic !important; | |
| } | |
| .tab-content:not([selected="true"]) { | |
| text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.3), | |
| 1px 1px 1px rgba(0, 0, 0, 0.5) !important; | |
| } | |
| /***inactive* | |
| .tabbrowser-tab:not([visuallyselected="true"]):not([multiselected]):not(:hover) .tab-icon-image { | |
| opacity: 0.7 !important; | |
| filter: grayscale(0.8), brightness(0.8), contrast(20%) !important; | |
| } | |
| /***Rule to visualize better selecting several tabs****/ | |
| .tabbrowser-tab>.tab-stack>.tab-background:is([multiselected]) { | |
| background: color-mix(in srgb, #9e5ddad3 50%, transparent) !important; | |
| outline: 2px solid var(--multiselect) !important; | |
| } | |
| :root { | |
| --toolbarbutton-border-radius: 6px !important; | |
| } | |
| .sidebar-splitter { | |
| display: none !important; | |
| } | |
| /*container tab label color when selected */ | |
| .tabbrowser-tab[selected="true"][class*="identity-color-"] .tab-label { | |
| color: var(--identity-tab-color) !important; | |
| font-weight: bold !important; | |
| } | |
| /* fancy line for container tabs */ | |
| #TabsToolbar #tabbrowser-tabs .tabbrowser-tab[class*="identity-color"] .tab-label { | |
| text-decoration: underline !important; | |
| text-decoration-color: var(--identity-icon-color) !important; | |
| font-weight: bold !important; | |
| text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1), | |
| 1px 1px 1px rgba(0, 0, 0, 0.5) !important; | |
| } | |
| /* Shadow above content */ | |
| #navigator-toolbox { | |
| box-shadow: 5px 3px 6px rgb(1 1 1 / 16%), 4px 4px 2px rgb(0 0 0 / 23%) !important; | |
| } | |
| #urlbar-background, | |
| #searchbar { | |
| text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1), | |
| 1px 1px 1px rgba(0, 0, 0, 0.5) !important; | |
| } | |
| /* Container tabs */ | |
| .tabbrowser-tab[usercontextid] .tab-background { | |
| background: var(--identity-tab-color) !important; | |
| box-shadow: 0px 0px 18px 2px var(--identity-icon-color) !important; | |
| } | |
| /* Favicon icon when mouse over over inactive tab grayscale(15%) */ | |
| .tabbrowser-tab:hover .tab-icon-image:not([selected="true"]):not([pinned]) { | |
| filter: grayscale(0%) !important; | |
| } | |
| /* Gray out the favicon icon on the inactive tab * | |
| .tabbrowser-tab .tab-icon-image:not([selected="true"]):not([pinned]) { | |
| filter: grayscale(100%) !important; | |
| } | |
| /** inactive Favicons */ | |
| .tabbrowser-tab:not([visuallyselected="true"], [multiselected]) .tab-icon-image { | |
| filter: brightness(100%) grayscale(70%) contrast(120%) blur(0.5px) opacity(100%) !important; | |
| } | |
| .tabbrowser-tab:not([visuallyselected="true"], [multiselected]):hover .tab-icon-image { | |
| filter: drop-shadow(1px 1px 2px rgba(43, 43, 43, 0.658)) drop-shadow(1px 1px 1px rgba(2, 2, 2, 0.74)) contrast(175%) brightness(113%) !important; | |
| } | |
| /*** TAB TEXT & BACKBOARD STYLING UNREAD, UNLOADED, VISTITED */ | |
| /* Loaded but unread (not selected) */ | |
| .tabbrowser-tab:not([selected="true"])[unread] .tab-label { | |
| color: rgb(133, 133, 133) !important; | |
| font-style: italic !important; | |
| font-weight: thin !important; | |
| } | |
| /* | |
| .tabbrowser-tab:not([selected="true"])[unread] .tab-background { | |
| background-color: transparent !important; | |
| } | |
| /* Not loaded yet (also visited) */ | |
| .tabbrowser-tab:not([selected="true"])[pending] .tab-label, | |
| .tabbrowser-tab:not([selected="true"])[visited] .tab-label { | |
| color: rgb(173, 148, 231) !important; | |
| font-style: italic !important; | |
| font-weight: thin !important; | |
| } | |
| /* GLOW EFFECT ON TAB ICON * | |
| toolbarbutton.bookmark-item:not([container="true"]) .toolbarbutton-icon for icons on the bookmarks bar under the url bar * .tab-icon-image, | |
| .bookmark-item:not([container="true"]) .menu-iconic-icon { | |
| filter: drop-shadow(0 0 3px #fff) !important; | |
| } | |
| /* favicon gray on inactive Tab* | |
| .tab-icon:not([selected="true"]), | |
| .tab-icon-image:not([selected="true"]) { | |
| filter: grayscale(1) brightness(1) blur(20px) opacity(0.7) !important; | |
| } | |
| /* Hides all the tabs if there is only one tab*/ | |
| #tabbrowser-tabs tab:only-of-type, | |
| #tabbrowser-tabs tab:only-of-type+#tabs-newtab-button { | |
| display: none !important; | |
| } | |
| :root[lwthemetextcolor="bright"]:-moz-window-inactive { | |
| --lwt-accent-color-inactive: rgba(40, 40, 40, 0.662) !important; | |
| } | |
| /*improve border visiblity for selected tabs */ | |
| :root:not(:-moz-window-inactive)[lwthemetextcolor="bright"] .tabbrowser-tab[selected="true"] .tab-background { | |
| box-shadow: none !important; | |
| outline: none !important; | |
| border: none !important; | |
| } | |
| :root { | |
| --lwt-additional-images: url("images/derecha-copy.png"), | |
| url("images/izquierda-copy.png"), url("images/6.svg") !important; | |
| --lwt-background-alignment: right top, left top, right top !important; | |
| --lwt-background-tiling: no-repeat, no-repeat, repeat-x !important; | |
| --uc-tab-line-color: transparent !important; | |
| } | |
| /* .tabbrowser-tab[pending] { | |
| color: red !important; | |
| } | |
| .tabbrowser-tab[busy] { | |
| color: dimgray !important; | |
| } | |
| .tabbrowser-tab[titlechanged] { | |
| color: blue !important; | |
| }*/ | |
| /* multi tab selection */ | |
| #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([multiselected])>.tab-stack>.tab-background:-moz-lwtheme { | |
| outline-color: var(--toolbarseparator-color) !important; | |
| } | |
| :root { | |
| --lwt-frame: var(--uc-base-colour) !important; | |
| --lwt-accent-color: var(--lwt-frame) !important; | |
| --lwt-text-color: var(--uc-inverted-colour) !important; | |
| --toolbar-field-color: var(--uc-inverted-colour) !important; | |
| --toolbar-field-focus-color: var(--uc-inverted-colour) !important; | |
| --toolbar-field-focus-background-color: var(--uc-highlight-colour) !important; | |
| --toolbar-field-focus-border-color: transparent !important; | |
| --toolbar-field-background-color: var(--lwt-frame) !important; | |
| --lwt-toolbar-field-highlight: var(--uc-inverted-colour) !important; | |
| --lwt-toolbar-field-highlight-text: var(--uc-highlight-colour) !important; | |
| --urlbar-popup-url-color: var(--uc-accent-colour) !important; | |
| --lwt-tab-text: var(--lwt-text-colour) !important; | |
| --lwt-selected-tab-background-color: var(--uc-highlight-colour) !important; | |
| --toolbar-bgcolor: var(--lwt-frame) !important; | |
| --toolbar-color: var(--lwt-text-color) !important; | |
| --toolbarseparator-color: var(--uc-accent-colour) !important; | |
| --toolbarbutton-hover-background: var(--uc-highlight-colour) !important; | |
| --toolbarbutton-active-background: var(--toolbarbutton-hover-background) !important; | |
| --lwt-sidebar-background-color: var(--lwt-frame) !important; | |
| --sidebar-background-color: var(--lwt-sidebar-background-color) !important; | |
| --urlbar-box-bgcolor: var(--uc-highlight-colour) !important; | |
| --urlbar-box-text-color: var(--uc-muted-colour) !important; | |
| --urlbar-box-hover-bgcolor: var(--uc-highlight-colour) !important; | |
| --urlbar-box-hover-text-color: var(--uc-inverted-colour) !important; | |
| --urlbar-box-focus-bgcolor: var(--uc-highlight-colour) !important; | |
| } | |
| /* | |
| .tab-background[multiselected="true"]:not([selected="true"])>.tab-background-inner { | |
| background: none !important; | |
| }*/ | |
| /* 1/16/2022 Tone down the Fx96 tab border with add-on themes in certain fallback situations * | |
| .tab-background:is([selected], [multiselected]):-moz-lwtheme { | |
| --lwt-tabs-border-color: rgba(0, 0, 0, 0.5) !important; | |
| border-bottom-color: transparent !important; | |
| background-image: radial-gradient(circle at bottom center, | |
| #6600ff, | |
| #0e001beb) !important; | |
| } | |
| [brighttext="true"] .tab-background:is([selected], [multiselected]):-moz-lwtheme { | |
| --lwt-tabs-border-color: rgba(255, 255, 255, 0.5) !important; | |
| border-bottom-color: transparent !important; | |
| } | |
| /* Container color bar visibility */ | |
| .tabbrowser-tab[usercontextid]>.tab-stack>.tab-background>.tab-context-line { | |
| margin: 0px max(calc(var(--user-tab-rounding) - 3px), 0px) !important; | |
| } | |
| /* Make sure tab attention dot isn't too high - 10 Dec 2022 */ | |
| .tabbrowser-tab:is([image], [pinned])>.tab-stack>.tab-content[attention]:not([selected="true"]), | |
| .tabbrowser-tab>.tab-stack>.tab-content[pinned][titlechanged]:not([selected="true"]), | |
| #firefox-view-button[attention], | |
| .webextension-browser-action[attention="true"] { | |
| background-position-y: bottom 5px !important; | |
| } | |
| /* Move container color bar to bottom of tab - updated 1/16/2022 */ | |
| .tab-background { | |
| --context-line-margin-adjust: 3px; | |
| /* 1/16/2022 */ | |
| --context-line-active-adjust: 1px; | |
| /* 1/16/2022 */ | |
| } | |
| .tabbrowser-tab[usercontextid]:is([selected=true], [visuallyselected="true"], [multiselected]) .tab-background { | |
| border-top: 1px solid transparent; | |
| /* 1/16/2022 Default border for consistency */ | |
| } | |
| .tabbrowser-tab[usercontextid]>.tab-stack>.tab-background>.tab-context-line { | |
| margin-top: calc(var(--tab-min-height) - var(--context-line-margin-adjust)) !important; | |
| } | |
| .tabbrowser-tab[usercontextid]:is([selected=true], [visuallyselected="true"], [multiselected])>.tab-stack>.tab-background>.tab-context-line { | |
| margin-top: calc(var(--tab-min-height) - var(--context-line-margin-adjust) - var(--context-line-active-adjust)) !important; | |
| } | |
| /* | |
| .tab-background { | |
| border: none !important; | |
| outline: none !important; | |
| border-radius: 0 !important; | |
| box-shadow: none !important; | |
| opacity: 1 !important; | |
| z-index: 1; | |
| } | |
| /***inactive*/ | |
| .tabbrowser-tab:not([visuallyselected="true"]):not([multiselected]):not(:hover) .tab-icon-image { | |
| opacity: 0.9 !important; | |
| filter: blur(.01px) brightness(37%) grayscale(1%) saturate(13%) !important; | |
| } | |
| #nav-bar { | |
| box-shadow: inset 0 0 20px 5px hsla(0, 0%, 0%, 0.5) !important; | |
| } | |
| /* Selected Tab - Box Shadow * | |
| #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"], [multiselected])>.tab-stack>.tab-background:-moz-lwtheme { | |
| box-shadow: 0 0 1px rgba(91, 91, 122, 0.486), | |
| 5px 3px 6px rgba(91, 91, 122, 0.486), 4px 4px 2px rgba(91, 91, 122, 0.486) !important; | |
| }*/ | |
| #urlbar .urlbar-input-box { | |
| text-align: center !important; | |
| } | |
| /* Fix white blink background on new tabs */ | |
| #browser .browserStack { | |
| background-color: rgb(45, 45, 45) !important; | |
| } | |
| /* Remove selected tab shadow, darken the border to account for lighter background color */ | |
| #TabsToolbar #firefox-view-button[open]>.toolbarbutton-icon, | |
| #tabbrowser-tabs .tab-background:is([selected], [multiselected]) { | |
| border: 1px solid color-mix(in srgb, currentColor 35%, transparent) !important; | |
| /*border-color: color-mix(in srgb, currentColor 35%, transparent) !important;*/ | |
| background: radial-gradient(circle at bottom center, #532a80ec 25px, #1f014a8d) !important; | |
| /*outline: 1px solid color-mix(in srgb, #f9845b 35%, transparent) !important;*/ | |
| } | |
| /* Remove firefox view separator spacing */ | |
| :root:not([privatebrowsingmode="temporary"]):not([firefoxviewhidden]) :is(#firefox-view-button, #wrapper-firefox-view-button)+#tabbrowser-tabs { | |
| border: unset !important; | |
| padding-inline-start: var(--tab-overflow-pinned-tabs-width) !important; | |
| margin-inline-start: 0px !important; | |
| } | |
| /* Set min height on absolute pinned tabs to overlay bottom border */ | |
| #tabbrowser-tabs[haspinnedtabs][positionpinnedtabs] .tabbrowser-tab[selected] .tab-content { | |
| min-height: var(--tab-min-height) !important; | |
| } | |
| /* Make drag space after add tab when tabs are overflowing */ | |
| #tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"]~#new-tab-button { | |
| margin-inline-end: var(--window-drag-spacing) !important; | |
| } | |
| /* Make drag space after add tab, when tabs are not overflowing */ | |
| #tabbrowser-tabs:not([overflow="true"])>#tabbrowser-arrowscrollbox>#tabbrowser-arrowscrollbox-periphery>spacer.closing-tabs-spacer { | |
| min-width: var(--window-drag-spacing) !important; | |
| } | |
| /* Offset pinned tabs to accommodate for the removed padding */ | |
| #tabbrowser-tabs[positionpinnedtabs] .tabbrowser-tab[pinned="true"] { | |
| transform: var(--tab-shadow-max-size) !important; | |
| } | |
| /* | |
| #tabbrowser-tabs[positionpinnedtabs] .tab-content[pinned="true"] { | |
| transform: translateY(1px) !important; | |
| } | |
| /* Less spacing around tab bar buttons (new tab, list tabs) */ | |
| #TabsToolbar toolbarbutton:not([role="tab"]) { | |
| --toolbarbutton-inner-padding: 4px !important; | |
| --tab-border-radius: var(--toolbarbutton-border-radius) !important; | |
| border: 4px solid transparent !important; | |
| } | |
| /* Move audio playing/muted indicator */ | |
| .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { | |
| padding: 0 !important; | |
| margin-left: 20px !important; | |
| scale: 1.1; | |
| } | |
| /* Do not hide favicon if audio indicator is shown */ | |
| .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])> :not(.tab-icon-overlay) { | |
| opacity: unset !important; | |
| } | |
| :root { | |
| /* Compact toolbar icons */ | |
| --toolbar-start-end-padding: 4px !important; | |
| --toolbarbutton-outer-padding: 0px !important; | |
| /* Nicer menu spacing */ | |
| --arrowpanel-menuitem-padding-block: 4px !important; | |
| } | |
| /* Make tabs easier to see against theme backgrounds | |
| :root[lwtheme-image][lwtheme-brighttext] .tabbrowser-tab { | |
| --tab-contrast-bgcolor: rgba(0, 0, 0, 0.25); | |
| background-color: rgba(0, 0, 0, 0.5) !important; | |
| } | |
| :root[lwtheme-image][lwtheme-darktext] .tabbrowser-tab { | |
| --tab-contrast-bgcolor: rgba(255, 255, 255, 0.25); | |
| background-color: rgba(255, 255, 255, 0.5) !important; | |
| } | |
| #TabsToolbar #firefox-view-button[open]>.toolbarbutton-icon:-moz-lwtheme, | |
| #tabbrowser-tabs:not([movingtab])>#tabbrowser-arrowscrollbox>.tabbrowser-tab>.tab-stack>.tab-background[multiselected=true]:-moz-lwtheme, | |
| #tabbrowser-tabs:not([movingtab])>#tabbrowser-arrowscrollbox>.tabbrowser-tab>.tab-stack>.tab-background[selected=true]:-moz-lwtheme { | |
| background-attachment: scroll, scroll, scroll, fixed !important; | |
| background-color: transparent !important; | |
| 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)), linear-gradient(var(--tab-contrast-bgcolor), var(--tab-contrast-bgcolor)), var(--lwt-header-image, none) !important; | |
| background-position: 0 0, 0 0, 0 0, right top !important; | |
| background-repeat: repeat-x, repeat-x, repeat, no-repeat !important; | |
| background-size: auto 100%, auto 100%, auto auto, auto auto !important; | |
| } | |
| /* Hide "Print selection" on right button menu */ | |
| #context-print-selection { | |
| display: none !important; | |
| } | |
| #downloadsListBox>richlistitem>.downloadMainArea { | |
| height: inherit !important; | |
| } | |
| /* Remove margins around download item button (Download progress popup) - prepare for Firefox 93 (experiments on nightly) */ | |
| #downloadsListBox>richlistitem { | |
| padding: 0 !important; | |
| margin: 0 !important; | |
| border-radius: 6px !important; | |
| } | |
| /* Make open containing folder great again - fill whole height of the tile (Download progress popup). | |
| Works with Firefox 90 */ | |
| #downloadsListBox>richlistitem>.downloadButton { | |
| height: inherit !important; | |
| } | |
| /* Make search panel white again (disable transparency). | |
| Works with Firefox 93 * | |
| #PopupSearchAutoComplete { | |
| --panel-background: rgba(255, 255, 255, 1) !important; | |
| } | |
| /* Disable unmovable extension button.*/ | |
| Annoying since Firefox 111 #unified-extensions-button, | |
| #unified-extensions-button>.toolbarbutton-icon { | |
| width: 0px !important; | |
| padding: 0px !important; | |
| } | |
| #navigator-toolbox-background:-moz-window-inactive { | |
| filter: contrast(90%); | |
| } | |
| .private-browsing-indicator, | |
| #private-browsing-indicator-with-label { | |
| display: none !important; | |
| } | |
| .tabbrowser-tab[notselectedsinceload]:not([pending]), | |
| .tabbrowser-tab[notselectedsinceload][pending][busy] { | |
| font-style: italic !important; | |
| } | |
| /* different tab shadows in various states. to produce the illusion of modulated depth */ | |
| .tabbrowser-tab .tab-content { | |
| box-shadow: 0px 0px 15px 0px hsla(0, 0%, 0%, 0.2), 0px 0px 5px 0px hsla(0, 0%, 0%, 0.1) !important; | |
| } | |
| .tabbrowser-tab:not([selected], [multiselected]):is(:hover, .keyboard-focused-tab, [open]) .tab-content, | |
| .tabbrowser-tab:is([multiselected], [pinned]) .tab-content { | |
| box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1), 0px 0px 15px 0px hsla(0, 0%, 0%, 0.25) !important; | |
| } | |
| .tabbrowser-tab[selected] .tab-content, | |
| .tabbrowser-tab:is([multiselected], [pinned])[selected] .tab-content { | |
| box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1), 0px 0px 15px 0px hsla(0, 0%, 0%, 0.35) !important; | |
| } | |
| .tabbrowser-tab:focus:not([aria-activedescendant]) .tab-content { | |
| box-shadow: 0px 0px 25px 3px rgba(0, 0, 0, 0.1), 0px 0px 15px 0px hsla(0, 0%, 0%, 0.35) !important; | |
| } | |
| /* | |
| .tab-icon-image { | |
| filter: drop-shadow(0px 0px 2px white) !important; | |
| }*/ | |
| .tabbrowser-tab:not([selected="true"]):not([multiselected="true"]) .tab-background { | |
| border-top: 1px solid rgba(130, 130, 130, 0.3) !important; | |
| border-left: 1px solid rgba(130, 130, 130, 0.3) !important; | |
| border-right: 1px solid rgba(130, 130, 130, 0.3) !important; | |
| } | |
| /* | |
| .tab-background:not(selected) { | |
| background-image: radial-gradient(circle at bottom center, | |
| #b98ff3, | |
| #19002f) !important} | |
| */ | |
| /* | |
| :root .tab-background:not([selected]) { | |
| background-color: #d5d0d9; | |
| border: 1px solid white !important; | |
| } | |
| :root .tab-background:not([selected]) { | |
| background-image: radial-gradient(circle at bottom center, | |
| #b98ff3, | |
| #19002f) !important | |
| } | |
| /* Inactive tabs: Shadow style */ | |
| .tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background { | |
| background-image: radial-gradient(circle at bottom center, | |
| #4a316ab3, | |
| #27104e50) !important; | |
| border: 1px solid color-mix(in srgb, currentColor 16%, transparent) !important; | |
| } | |
| #urlbar-background, | |
| #urlbar { | |
| border-radius: 16px !important; | |
| background-color: #2B2A33 !important; | |
| border: transparent !important; | |
| } | |
| #urlbar { | |
| background-image: linear-gradient(90deg, #9400FF, #ba00e5, #df06b9, #e62da7, #f13b95, #f64d86, #f85f7a, #fc7169, #f9845b, #e8ab52); | |
| } | |
| #urlbar-background { | |
| margin-bottom: 2px !important; | |
| margin-top: 2px !important; | |
| margin-left: 2px !important; | |
| margin-right: 2px !important; | |
| } | |
| #urlbar[focused=true] #urlbar-background { | |
| background-color: rgb(43, 42, 51, 0.85) !important; | |
| } | |
| #urlbar[open=true] #urlbar-background { | |
| background-color: rgb(43, 42, 51, 0.85) !important; | |
| } | |
| /* uc.ccs code for script to make url BG coloized was posted via Reddit | |
| #urlbar-input-container[contextid] { | |
| background-color: color-mix(in srgb, | |
| transparent 75%, | |
| var(--identity-tab-color)) !important; | |
| } | |
| /* Need to use FILTER dro shadow fo ouline so it is a circle */ | |
| /*rework en la Linea de Contenedores-BordeFavicon* | |
| .tab-icon-pending:not([selected], [pinned]), | |
| .tab-icon-pending:not([pinned]), | |
| .tab-sharing-icon-overlay:not([selected], [pinned]), | |
| .tab-throbber[busy], | |
| .tab-icon-image:not([selected], [pinned]) { | |
| box-shadow: 0 -1px 0px var(--identity-icon-color, #e6e6e6a4), 0 1px 0px var(--identity-icon-color, #c2c1c1b5) !important; | |
| border-radius: 50px !important; | |
| padding: 2px !important; | |
| margin-left: -1px !important; | |
| margin-right: 6px !important; | |
| } | |
| .tab-icon-pending[selected], | |
| .tab-sharing-icon-overlay[selected], | |
| .tab-icon-image[selected] { | |
| outline: 1px solid var(--identity-icon-color, #e9e8e8cb) !important; | |
| border-radius: 50%x !important; | |
| padding: 2px !important; | |
| margin-left: -1px !important; | |
| margin-right: 6px !important; | |
| } | |
| .tab-icon-pending:not([selected])[pinned], | |
| .tab-sharing-icon-overlay:not([selected])[pinned], | |
| .tab-throbber[busy][pinned], | |
| .tab-icon-image:not([selected])[pinned] { | |
| box-shadow: 0 -1px 0px var(--identity-icon-color, #b69bf5f1), 0 1px 0px var(--identity-icon-color, #991adea7) !important; | |
| padding: 2px !important; | |
| border-radius: 50% !important; | |
| } | |
| .tab-icon-pending[pinned], | |
| .tab-sharing-icon-overlay[pinned], | |
| .tab-icon-image[pinned], | |
| .tab-throbber:is([busy][pinned]) { | |
| margin-right: -1px !important; | |
| margin-left: -1px !important; | |
| } | |
| /*Nuevos margenes - CargandoPágina* | |
| .tab-throbber[busy]:not([pinned]) { | |
| border-radius: 0px !important; | |
| padding: 0 !important; | |
| height: 20px !important; | |
| margin-left: 1px !important; | |
| margin-right: 8px !important; | |
| opacity: 1 !important; | |
| } | |
| .tab-throbber:is([busy][pinned]) { | |
| border-radius: 0px !important; | |
| padding: 0px !important; | |
| height: 20px !important; | |
| margin-left: 1px !important; | |
| margin-right: 1px !important; | |
| } | |
| /* corregir medida favicon ausente * | |
| hbox .tab-icon-pending { | |
| height: 20px !important; | |
| width: 20px !important; | |
| padding: 2px !important; | |
| } | |
| /*** Audio Playing / Mute Button side-by-side when sound is playing ***/ | |
| #TabsToolbar { | |
| --user-mute-button-height: 20px; | |
| /* default size is 12px, site icon is 16px */ | |
| } | |
| /* Move the mute/unmute button to the right and enlarge it */ | |
| .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) { | |
| width: var(--user-mute-button-height) !important; | |
| height: var(--user-mute-button-height) !important; | |
| margin-left: calc(var(--user-mute-button-height) / 2 + 2px) !important; | |
| /* pushes icon to the right */ | |
| margin-right: 2px !important; | |
| /* closes up some space before the text */ | |
| padding: 0 !important; | |
| /* allows icon to expand to full size */ | |
| } | |
| /* Move the site icon to the left a bit and adjust position */ | |
| .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted])> :not(.tab-icon-overlay) { | |
| margin-left: -4px !important; | |
| /* pushes icon to the left */ | |
| margin-top: calc((var(--user-mute-button-height) - 16px) / 2) !important; | |
| /* keep site icon reasonably positioned */ | |
| } | |
| /* Override the rules for hover/not hover visibility */ | |
| /* for mute button */ | |
| .tabbrowser-tab:not(:hover) .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]), | |
| /* for site icon */ | |
| .tabbrowser-tab:hover .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted])> :not(.tab-icon-overlay), | |
| /* for site icon with Compact density */ | |
| :root[uidensity="compact"] .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted])> :not(.tab-icon-overlay) { | |
| opacity: 1 !important; | |
| /* overrides full transparency with full opacity */ | |
| } | |
| /* Color the icon on hover for confirmation or avoidance */ | |
| .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]):hover { | |
| fill: green !important; | |
| } | |
| [lwthemetextcolor="bright"] .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]):hover { | |
| fill: lightgreen !important; | |
| /* for dark themes */ | |
| } | |
| /* Tweaked Audio playing/Mute button rules for pinned tabs */ | |
| .tab-icon-overlay:not([crashed]):is([pinned], [sharing]):is([soundplaying], [muted]) { | |
| width: var(--user-mute-button-height) !important; | |
| height: var(--user-mute-button-height) !important; | |
| margin-left: 2px !important; | |
| /* allow some overlap to reduce expanded width */ | |
| margin-right: -2px !important; | |
| /* reduce empty space on the right */ | |
| padding: 0 !important; | |
| /* allows icon to expand to full size */ | |
| top: 0 !important; | |
| /* align button with site icon */ | |
| } | |
| .tab-icon-stack:not([crashed]):is([pinned], [sharing]):is([soundplaying], [muted])> :not(.tab-icon-overlay) { | |
| margin-left: -6px !important; | |
| /* reduce empty space on the left */ | |
| margin-top: calc((var(--user-mute-button-height) - 16px) / 2) !important; | |
| /* keep site icon reasonably positioned */ | |
| } | |
| .tabbrowser-tab:not(:hover) .tab-icon-overlay:not([crashed]):is([pinned], [sharing]):is([soundplaying], [muted]), | |
| /* for site icon */ | |
| .tabbrowser-tab:hover .tab-icon-stack:not([crashed]):is([pinned], [sharing]):is([soundplaying], [muted])> :not(.tab-icon-overlay), | |
| /* for site icon with Compact density */ | |
| :root[uidensity="compact"] .tab-icon-stack:not([crashed]):is([pinned], [sharing]):is([soundplaying], [muted])> :not(.tab-icon-overlay) { | |
| opacity: 1 !important; | |
| /* overrides full transparency with full opacity */ | |
| } | |
| .tab-icon-overlay:not([crashed]):is([pinned], [sharing]):is([soundplaying], [muted]):hover { | |
| fill: green !important; | |
| } | |
| [lwthemetextcolor="bright"] .tab-icon-overlay:not([crashed]):is([pinned], [sharing]):is([soundplaying], [muted]):hover { | |
| fill: lightgreen !important; | |
| /* for dark themes */ | |
| } | |
| /* neighbouring tabs should "pinch" together */ | |
| #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"])>#tabbrowser-arrowscrollbox>#tabbrowser-arrowscrollbox-periphery { | |
| min-width: 3px; | |
| } | |
| /* TAB READ/UNREAD COLORS */ | |
| /* You can bold the text of any tab adding "font-weight: bold !important" after their last rule, but before the "}" */ | |
| /* Selected (loaded) * | |
| .tabbrowser-tab[selected="true"] .tab-label { | |
| color: var(--Loaded-and-selected-text) !important; | |
| font-style: var(--Loaded-and-selected-italic) !important; | |
| font-weight: var(--Loaded-and-selected-bold) !important | |
| } | |
| /* Loaded but unread (not selected) * | |
| .tabbrowser-tab:not([selected="true"])[unread] .tab-label { | |
| color: var(--Loaded-but-unread-text) !important; | |
| font-style: var(--Loaded-but-unread-italic) !important; | |
| font-weight: var(--Loaded-but-unread-bold) !important | |
| } | |
| /* Not loaded yet (also visited) * | |
| .tabbrowser-tab:not([selected="true"])[pending] .tab-label, | |
| .tabbrowser-tab:not([selected="true"])[visited] .tab-label { | |
| color: var(--Not-loaded-text) !important; | |
| font-style: var(--Not-loaded-italic) !important; | |
| font-weight: var(--Not-loaded-bold) !important | |
| } | |
| /* loading * | |
| .tabbrowser-tab[busy] .tab-text.tab-label { | |
| color: var(--Loading-text) !important; | |
| font-style: var(--Loading-italic) !important; | |
| font-weight: var(--Loading-bold) !important | |
| } | |
| /* These ones are used for the read/unread tabs styling. For italic rules use | |
| either "normal" or "italic" without the quotes for either no italics or using italics, | |
| and for bold, use either "bold" or "normal" in the same way. You'll want to use semi-transparent | |
| colors (if any) for background colors, otherwise it will show as too bright opaque colors. | |
| Requires the use of setAttribute_unread.uc.js for unread tabs editting. * | |
| :root { | |
| /*--lwt-selected-tab-background-color: var(--toolbar-bgcolor) !important;*/ | |
| /* | |
| --Loaded-and-selected-text: #eee; | |
| --Loaded-and-selected-italic: normal; | |
| --Loaded-and-selected-bold: normal; | |
| --Loaded-but-unread-text: #fff; | |
| --Loaded-but-unread-italic: italic; | |
| --Loaded-but-unread-bold: normal; | |
| --Not-loaded-text: #ccc; | |
| --Not-loaded-italic: italic; | |
| --Not-loaded-bold: normal; | |
| --Loading-text: #0088ff; | |
| --Loading-italic: normal; | |
| --Loading-bold: normal; | |
| } | |
| /* GLOW EFFECT ON TAB ICON */ | |
| /* toolbarbutton.bookmark-item:not([container=true]) .toolbarbutton-icon | |
| for icons on the bookmarks bar under the url bar * | |
| .tab-icon-image, | |
| .bookmark-item:not([container=true]) .menu-iconic-icon { | |
| filter: drop-shadow(0 0 3px #fff) !important; | |
| } | |
| */ | |
| /* Source file https: //github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0 | |
| See the above repository for updates as well as full license text. */ | |
| /* Show sidebar only when the cursor is over it */ | |
| /* The border controlling sidebar width will be removed so you'll need to modify these values to change width */ | |
| #sidebar-box { | |
| --uc-sidebar-width: 5px; | |
| --uc-sidebar-hover-width: 250px; | |
| --uc-autohide-sidebar-delay: 600ms; | |
| /* Wait 0.6s before hiding sidebar */ | |
| position: relative !important; | |
| min-width: var(--uc-sidebar-width) !important; | |
| width: var(--uc-sidebar-width) !important; | |
| max-width: var(--uc-sidebar-width) !important; | |
| z-index: 1 !important; | |
| } | |
| #sidebar-box[positionend] { | |
| direction: rtl | |
| } | |
| #sidebar-box[positionend]>* { | |
| direction: ltr | |
| } | |
| #sidebar-box[positionend]:-moz-locale-dir(rtl) { | |
| direction: ltr | |
| } | |
| #sidebar-box[positionend]:-moz-locale-dir(rtl)>* { | |
| direction: rtl | |
| } | |
| #main-window[sizemode="fullscreen"] #sidebar-box { | |
| --uc-sidebar-width: 1px; | |
| } | |
| #sidebar-splitter { | |
| display: none !important | |
| } | |
| #sidebar-header { | |
| overflow: hidden !important; | |
| color: var(--chrome-color, inherit) !important; | |
| padding-inline: 0 !important; | |
| } | |
| #sidebar-header::before, | |
| #sidebar-header::after { | |
| content: ""; | |
| display: flex !important; | |
| padding-left: 8px !important; | |
| } | |
| #sidebar-header, | |
| #sidebar { | |
| transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important; | |
| min-width: var(--uc-sidebar-width) !important; | |
| will-change: min-width !important; | |
| } | |
| #sidebar-box:hover>#sidebar-header, | |
| #sidebar-box:hover>#sidebar { | |
| min-width: var(--uc-sidebar-hover-width) !important; | |
| transition-delay: 0ms !important; | |
| } | |
| .sidebar-panel { | |
| background-color: transparent !important; | |
| color: var(--newtab-text-primary-color) !important; | |
| } | |
| .sidebar-panel #search-box { | |
| -moz-appearance: none !important; | |
| background-color: rgba(249, 249, 250, 0.1) !important; | |
| color: inherit !important; | |
| } | |
| /* Add sidebar divider and give it background */ | |
| #sidebar, | |
| #sidebar-header { | |
| background-color: inherit !important; | |
| border-inline: 1px solid rgb(80, 80, 80) !important; | |
| border-inline-width: 0px 1px !important; | |
| } | |
| #sidebar-box:not([positionend])> :-moz-locale-dir(rtl), | |
| #sidebar-box[positionend]>* { | |
| border-inline-width: 1px 0px !important; | |
| } | |
| /* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */ | |
| #sidebar-box:not([positionend]):hover~#appcontent #statuspanel { | |
| inset-inline: auto 0px !important; | |
| } | |
| #sidebar-box:not([positionend]):hover~#appcontent #statuspanel-label { | |
| margin-inline: 0px !important; | |
| border-left-style: solid !important; | |
| } | |
| /* test */ | |
| .tab-context-line { | |
| display: none; | |
| } | |
| .tab-text, | |
| .tab-label { | |
| text-decoration: solid underline var(--identity-tab-color) 2px; | |
| text-underline-offset: 4px; | |
| } | |
| /* New activity in tab */ | |
| .tabbrowser-tab[titlechanged] .tab-text.tab-label { | |
| color: #9400FF !important; | |
| font-style: italic !important; | |
| } | |
| /* Selected (loaded) */ | |
| .tabbrowser-tab[selected="true"] .tab-label { | |
| color: #eee !important; | |
| font-style: normal !important; | |
| font-weight: bold !important; | |
| text-shadow: 1px 2px 1px #000 !important; | |
| } | |
| /* loading */ | |
| .tabbrowser-tab[busy] .tab-text.tab-label { | |
| color: #626262 !important; | |
| font-style: italic !important; | |
| } | |
| /* Not loaded yet (also visited) */ | |
| .tabbrowser-tab:not([selected="true"])[pending] .tab-label, | |
| .tabbrowser-tab:not([selected="true"])[visited] .tab-label { | |
| font-style: italic !important; | |
| opacity: var(--inactive_opacity) !important; | |
| } | |
| /* hide private mode indicators / private masks */ | |
| #main-window[privatebrowsingmode=temporary]:not([inDOMFullscreen="true"]) #navigator-toolbox #TabsToolbar .private-browsing-indicator, | |
| * #private-browsing-indicator-titlebar, | |
| * #private-browsing-indicator, | |
| * .private-browsing-indicator { | |
| visibility: collapse !important; | |
| } | |
| #private-browsing-indicator-with-label { | |
| display: none !important; | |
| } | |
| /* remove left and right tab spaces */ | |
| #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])>#tabbrowser-arrowscrollbox>.tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])), | |
| #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])>#tabbrowser-arrowscrollbox>.tabbrowser-tab[first-visible-unpinned-tab] { | |
| margin-inline-start: 0px !important; | |
| } | |
| /* selected / multiselected colors * | |
| .tabbrowser-tab:is([selected], [multiselected])>.tab-stack>.tab-background:not(:-moz-lwtheme) { | |
| box-shadow: 0 0 1px rgba(0, 0, 0, .5) !important; | |
| } | |
| .tab-background:is([selected], [multiselected]) { | |
| box-shadow: inset -1px 0 0 0 rgba(125, 125, 125, 0.409), | |
| inset 1px 0 0 0 rgba(145, 145, 145, 0.4) !important; | |
| } | |
| .tab-background:is([selected], [multiselected]):-moz-lwtheme, | |
| .tab-background:is([selected], [multiselected]):-moz-lwtheme { | |
| box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, .4), | |
| inset 1px 0 0 0 rgba(255, 255, 255, .4) !important; | |
| } | |
| /* Blend Inactive tabs favicon */ | |
| #TabsToolbar #tabbrowser-tabs .tabbrowser-tab[pending] .tab-content:not(:hover) .tab-icon-image { | |
| filter: grayscale(70%); | |
| transition: filter 0.2s ease-in; | |
| opacity: 0.7; | |
| } | |
| /* | |
| .tabbrowser-tab:not([selected="true"]) .tab-icon-image { | |
| opacity: 0.5 !important; | |
| } | |
| /* text shadow * | |
| .tabbrowser-tab .tab-label { | |
| text-shadow: 0px 1px 0px white, | |
| 0px 1px 4px white !important; | |
| } | |
| /* text shadow * | |
| .tabbrowser-tab:hover:not([selected]) .tab-label { | |
| text-shadow: 0px 1px 0px white, | |
| 0px 1px 1px white !important, text-shadow: 1px 2px 1px #000 !important; | |
| } | |
| /*bold*/ | |
| .tabbrowser-tab:hover:not([selected]) .tab-label { | |
| font-weight: bold !important; | |
| } | |
| :root { | |
| --chrome-content-separator-color: #b3b1b3 !important; | |
| --inactive_opacity: .6 !important; | |
| } | |
| /* De-emphasize tab icons and names when window is unfocused */ | |
| :root:-moz-window-inactive .tab-content { | |
| opacity: 0.6 !important; | |
| } | |
| /* Adds an effect to the highlight that wasn't there in Photon */ | |
| /* Remove if unwanted */ | |
| .tabbrowser-tab:hover>.tab-stack>.tab-background[selected]::before { | |
| filter: brightness(125%) saturate(150%) !important; | |
| } | |
| .tabbrowser-tab:not([visuallyselected="true"], [multiselected]):hover .tab-icon-image { | |
| filter: drop-shadow(1px 1px 1px rgba(2, 2, 2, 0.74)) contrast(175%) brightness(100%) !important; | |
| } | |
| /* Favicon icon when mouse over to pinned inactive tab grayscale(15%) */ | |
| .tabbrowser-tab:hover .tab-icon-image[pinned] { | |
| filter: drop-shadow(16px 16px 10px black) !important; | |
| } | |
| /*rework en la Linea de Contenedores-BordeFavicon*/ | |
| .tab-icon-pending:not([selected], [pinned]), | |
| .tab-icon-pending:not([pinned]), | |
| .tab-sharing-icon-overlay:not([selected], [pinned]), | |
| .tab-throbber[busy], | |
| .tab-icon-image:not([selected], [pinned]) { | |
| box-shadow: 0 -1px 0px var(--identity-icon-color, #00000000), | |
| 0 1px 0px var(--identity-icon-color, #00000000) !important; | |
| border-radius: 50% !important; | |
| padding: 2px !important; | |
| margin-left: -1px !important; | |
| margin-right: 6px !important; | |
| } | |
| .tab-icon-pending[selected], | |
| .tab-sharing-icon-overlay[selected], | |
| .tab-icon-image[selected] { | |
| outline: 1px solid var(--identity-icon-color, #00000000) !important; | |
| border-radius: 10px !important; | |
| padding: 2px !important; | |
| margin-left: -1px !important; | |
| margin-right: 6px !important; | |
| } | |
| .tab-icon-pending:not([selected])[pinned], | |
| .tab-sharing-icon-overlay:not([selected])[pinned], | |
| .tab-throbber[busy][pinned], | |
| .tab-icon-image:not([selected])[pinned] { | |
| box-shadow: 0 -1px 0px var(--identity-icon-color, #00000000), | |
| 0 1px 0px var(--identity-icon-color, #00000000) !important; | |
| padding: 2px !important; | |
| border-radius: 10px !important; | |
| } | |
| .tab-icon-pending[pinned], | |
| .tab-sharing-icon-overlay[pinned], | |
| .tab-icon-image[pinned], | |
| .tab-throbber:is([busy][pinned]) { | |
| margin-right: -1px !important; | |
| margin-left: -1px !important; | |
| } | |
| /* Bookmarks bar with BLUR need layout.css.backdrop-filter.enabled = true rgba(50, 50, 52, 0.85)*/ | |
| #PersonalToolbar { | |
| background-image: url(images/noise-512x512.png) !important; | |
| background-color: #0d0d0dcf !important; | |
| -webkit-backdrop-filter: blur(32px) !important; | |
| backdrop-filter: blur(32px) !important; | |
| } | |
| /* url bar */ | |
| #widget-overflow-mainView, | |
| #urlbar[open="true"]>#urlbar-background { | |
| backdrop-filter: blur(20px) !important; | |
| } | |
| /*** inactive tab hover * | |
| .tabbrowser-tab:not([visuallyselected="true"]):not([multiselected]):hover, | |
| .tabbrowser-tab:-moz-lwtheme:hover { | |
| opacity: 1 !important; | |
| backdrop-filter: blur(26px) !important; | |
| }*/ | |
| #urlbar[open="true"] { | |
| backdrop-filter: blur(26px) !important; | |
| } | |
| :root[privatebrowsingmode="temporary"] #urlbar-input-container:hover { | |
| background-color: #250454 !important; | |
| } | |
| :root[privatebrowsingmode="temporary"] { | |
| /* Toolbar */ | |
| --toolbar-bgcolor: #7300ff !important; | |
| /* Behind Tabs */ | |
| --lwt-accent-color: #9f53f6 !important; | |
| /* Search Bar Colour */ | |
| --toolbar-field-background-color: #410774 !important; | |
| /* Turns Tab Into Same Colour As Toolbar */ | |
| --lwt-selected-tab-background-color: var(--toolbar-bgcolor) !important; | |
| /* What Happens When You Hover Over A Button */ | |
| --toolbarbutton-hover-background: rgba(255, 255, 255, 0.05) !important; | |
| /* Click On A Button, This Colour Is What The Button Will Be */ | |
| --toolbarbutton-active-background: #4d4175 !important; | |
| /* Click A Button With A Context Menu? This Is The Menu Colour */ | |
| --arrowpanel-background: #1d1935 !important; | |
| /* Tool Bar Context Menu Outline */ | |
| --arrowpanel-border-color: #322560 !important; | |
| /* Line Between Toobar And Site */ | |
| --chrome-content-separator-color: transparent !important; | |
| /* Colour Of The Expanded Address Bar */ | |
| --toolbar-field-focus-background-color: var(--toolbar-field-background-color) !important; | |
| /* Hovering Over The Autocomplete Items Colour */ | |
| --autocomplete-popup-hover-background: #1d1935 !important; | |
| /* Clicking On Said Autocomplete Item Colour */ | |
| --autocomplete-popup-highlight-background: rgba(65, 48, 117, 0.5) !important; | |
| } | |
| /* Pastel purple titlebar when in private browsing mode. */ | |
| window[privatebrowsingmode="temporary"] #navigator-toolbox { | |
| background: #6700f8 !important; | |
| } | |
| /* Purple titlebar when in private browsing mode. 25003e8*/ | |
| window[privatebrowsingmode="temporary"] #navigator-toolbox, | |
| window[privatebrowsingmode="temporary"] #titlebar, | |
| window[privatebrowsingmode="temporary"] #TabsToolbar, | |
| window[privatebrowsingmode="temporary"] #tabbrowser-tabs { | |
| background: #810cff !important; | |
| } | |
| /* Pastel purple titlebar when in private browsing mode. */ | |
| window[privatebrowsingmode="temporary"] #navigator-toolbox { | |
| background: #6700f8 !important; | |
| } | |
| /* Purple titlebar when in private browsing mode. 25003e8*/ | |
| window[privatebrowsingmode="temporary"] #navigator-toolbox, | |
| window[privatebrowsingmode="temporary"] #titlebar, | |
| window[privatebrowsingmode="temporary"] #TabsToolbar, | |
| window[privatebrowsingmode="temporary"] #tabbrowser-tabs { | |
| background: #810cff !important; | |
| } | |
| /* URL Bar Fade Animation On Hover */ | |
| #urlbar-input-container:hover { | |
| background-color: #3225609b !important; | |
| } | |
| #urlbar-input-container { | |
| transition: background-color 0.3s ease-in; | |
| } | |
| /* change urlbar highlight text color */ | |
| #urlbar-input::-moz-selection { | |
| background-color: rgb(144, 89, 255, 1) !important; | |
| color: #fff !important; | |
| } | |
| #urlbar-background, | |
| #searchbar { | |
| text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.337), | |
| 1px 1px 1px rgba(0, 0, 0, 0.5) !important; | |
| } | |
| /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/centered_tab_content.css made available under Mozilla Public License v. 2.0 | |
| See the above repository for updates as well as full license text. */ | |
| .tabbrowser-tab[selected]:not(:hover):not([pinned]) .tab-label-container, | |
| #tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab:not(:hover):not([pinned]) .tab-label-container { | |
| padding-inline-end: 6px !important; | |
| } | |
| .tab-icon-stack { | |
| margin-inline-start: auto !important; | |
| } | |
| .tab-label-container { | |
| max-width: min-content !important; | |
| margin-inline-end: auto !important; | |
| } | |
| /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_close_button_always_on_hover.css made available under Mozilla Public License v. 2.0 | |
| See the above repository for updates as well as full license text. */ | |
| /* Always show tab close button on hover and never otherwise */ | |
| .tabbrowser-tab .tab-close-button { | |
| display: none !important; | |
| } | |
| .tabbrowser-tab:not([pinned]):hover .tab-close-button { | |
| display: flex !important; | |
| align-items: center !important; | |
| } | |
| /* private browsing indicator next to window controls */ | |
| .accessibility-indicator, | |
| #private-browsing-indicator-with-label { | |
| height: auto !important; | |
| width: auto !important; | |
| box-sizing: border-box !important; | |
| padding: 0 var(--toolbarbutton-outer-padding) !important; | |
| margin: 0 !important; | |
| background: none !important; | |
| border: 0 !important; | |
| outline: 0; | |
| fill: currentColor !important; | |
| -moz-context-properties: fill, fill-opacity !important; | |
| align-items: center !important; | |
| } | |
| #private-browsing-indicator-with-label { | |
| background: none !important; | |
| appearance: none !important; | |
| >image { | |
| content: ""; | |
| box-sizing: border-box !important; | |
| width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; | |
| height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; | |
| background-image: url(chrome://userchrome/content/skin/privateBrowsing.svg) !important; | |
| background-size: 16px !important; | |
| background-position: center !important; | |
| background-repeat: no-repeat !important; | |
| padding: var(--toolbarbutton-inner-padding) !important; | |
| border-radius: var(--toolbarbutton-border-radius) !important; | |
| } | |
| >label { | |
| display: none !important; | |
| } | |
| } | |
| #private-browsing-indicator-with-label { | |
| -moz-context-properties: fill, fill-opacity !important; | |
| fill: currentColor !important; | |
| } | |
| .accessibility-indicator { | |
| >.button-box { | |
| width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; | |
| height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; | |
| padding: var(--toolbarbutton-inner-padding) !important; | |
| border-radius: var(--toolbarbutton-border-radius) !important; | |
| >.button-icon { | |
| width: 16px !important; | |
| height: 16px !important; | |
| list-style-image: url(chrome://userchrome/content/devtools/tool-accessibility.svg) !important; | |
| } | |
| } | |
| } | |
| .accessibility-indicator:is(:hover, :focus-visible)>.button-box, | |
| toolbarbutton#private-browsing-indicator-with-label:is(:hover, :focus-visible)>image { | |
| background-color: var(--arrowpanel-dimmed) !important; | |
| } | |
| .accessibility-indicator:is(:hover:active, [open])>.button-box, | |
| toolbarbutton#private-browsing-indicator-with-label:is(:hover:active, [open])>image { | |
| background-color: var(--arrowpanel-dimmed-further) !important; | |
| } | |
| :root:not([privatebrowsingmode="temporary"]) :is(#firefox-view-button, #wrapper-firefox-view-button)+#tabbrowser-tabs { | |
| border-inline-start: revert !important; | |
| padding-inline-start: revert !important; | |
| } | |
| #TabsToolbar-customization-target> :is(toolbarbutton, toolbaritem, toolbarpaletteitem):first-child { | |
| margin-inline-start: 2px !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment