mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2026-01-30 04:10:32 -08:00
Merge branch 'master' into photon-style
This commit is contained in:
alstjr7375
commit
cce6e71a23
21 changed files with 584 additions and 312 deletions
10
README.org
10
README.org
|
|
@ -18,10 +18,14 @@
|
|||
|
||||
-----
|
||||
|
||||
🔔🔔 A project redesign is in progress. #351
|
||||
🔔🔔 Did you set a custom, but not work?
|
||||
|
||||
It's built with SCSS and all configured as options. \\
|
||||
It's in beta testing, and I'am looking forward to hearing from you.
|
||||
You should copy [[./user.js][ ~user.js~ ]] file before the theme works.
|
||||
|
||||
The option system depends on user configuration, and nothing applies without settings. \\
|
||||
Also, real-time changes are difficult for [[./docs/Restrictions.md#supports][technical limitations]] and require restarts.
|
||||
|
||||
Some settings [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options#using-userjs][can be conflict]] and should be explicitly =false=.
|
||||
|
||||
-----
|
||||
|
||||
|
|
|
|||
|
|
@ -77,24 +77,28 @@
|
|||
/*= Remove Tab Border ========================================================*/
|
||||
@supports -moz-bool-pref("userChrome.tab.connect_to_window") {
|
||||
/* TARGET: original, photon */
|
||||
/* Light Theme */
|
||||
#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 {
|
||||
border: unset !important;
|
||||
/* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */
|
||||
border: unset !important;
|
||||
}
|
||||
|
||||
/* Dark Theme */
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
border: unset !important;
|
||||
/* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)) */
|
||||
#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;
|
||||
}
|
||||
}
|
||||
/*= Light Weight Theme =======================================================*/
|
||||
|
|
@ -105,7 +109,6 @@
|
|||
background-repeat: no-repeat !important;
|
||||
background-position: right top !important;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
:root[lwtheme-image] {
|
||||
background-size: contain;
|
||||
|
|
@ -138,11 +141,9 @@
|
|||
:root[sizemode="normal"][tabsintitlebar] #navigator-toolbox {
|
||||
border-top: 0.5px solid #2f2f2f !important;
|
||||
}
|
||||
|
||||
:root[sizemode="normal"][tabsintitlebar]:-moz-window-inactive #navigator-toolbox {
|
||||
border-top-color: #393939 !important;
|
||||
}
|
||||
|
||||
@media (-moz-windows-accent-color-in-titlebar) {
|
||||
:root[sizemode="normal"][tabsintitlebar] #navigator-toolbox {
|
||||
border-top-color: -moz-accent-color !important;
|
||||
|
|
@ -160,18 +161,19 @@
|
|||
}
|
||||
}
|
||||
@media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) {
|
||||
#TabsToolbar:-moz-lwtheme {
|
||||
color: var(--lwt-text-color) !important;
|
||||
}
|
||||
|
||||
/* Remove Aero */
|
||||
#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;
|
||||
}
|
||||
}
|
||||
|
|
@ -214,7 +216,6 @@
|
|||
border: none !important;
|
||||
/* Remove border */
|
||||
}
|
||||
|
||||
#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"],
|
||||
|
|
@ -2730,7 +2731,6 @@
|
|||
#downloadsListBox .download-state[exists] .downloadDetails {
|
||||
color: var(--button-primary-bgcolor);
|
||||
}
|
||||
|
||||
#downloadsListBox .download-state[exists] .downloadDetails.downloadDetailsHover {
|
||||
color: var(--button-primary-hover-bgcolor);
|
||||
}
|
||||
|
|
@ -2740,7 +2740,6 @@
|
|||
text-decoration: line-through;
|
||||
text-decoration-color: color-mix(in srgb, currentColor 65%, transparent);
|
||||
}
|
||||
|
||||
#downloadsListBox .download-state:not([exists], [state="0"]) .downloadTypeIcon {
|
||||
filter: grayscale(100%) !important;
|
||||
}
|
||||
|
|
@ -2777,7 +2776,6 @@
|
|||
*/
|
||||
transition: background-color 0.5s var(--animation-easing-function) !important;
|
||||
}
|
||||
|
||||
.subviewbutton:hover {
|
||||
transition: background-color 0.1s var(--animation-easing-function) !important;
|
||||
}
|
||||
|
|
@ -2788,21 +2786,17 @@
|
|||
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] {
|
||||
transition: -moz-box-flex 0.2s var(--animation-easing-function),
|
||||
margin-inline-start 0.2s var(--animation-easing-function) !important;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
|
@ -2813,7 +2807,6 @@
|
|||
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),
|
||||
|
|
@ -2828,7 +2821,6 @@
|
|||
#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,
|
||||
|
|
@ -2838,14 +2830,13 @@
|
|||
}
|
||||
|
||||
/*- Border - Other Fields --------------------------------------------------*/
|
||||
#search-box:hover,
|
||||
xul|search-textbox.tabsFilter:hover,
|
||||
#editBMPanel_namePicker:hover,
|
||||
#editBMPanel_tagsField:hover,
|
||||
.findbar-container .findbar-textbox:hover {
|
||||
#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,
|
||||
|
|
@ -2865,7 +2856,6 @@
|
|||
transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out,
|
||||
visibility 0s linear !important;
|
||||
}
|
||||
|
||||
#sidebar-box[hidden="true"] {
|
||||
display: -moz-box !important;
|
||||
margin-inline-start: -18em;
|
||||
|
|
@ -2880,19 +2870,16 @@
|
|||
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 0.3s var(--animation-easing-function) 50ms;
|
||||
transition: margin-top 1.3s var(--animation-easing-function) 50ms;
|
||||
}
|
||||
|
||||
#navigator-toolbox[inFullscreen="true"]:hover {
|
||||
transition-duration: 1.5s;
|
||||
transition-delay: 0.1s;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
@keyframes fullscreen {
|
||||
|
|
@ -2928,15 +2915,12 @@
|
|||
#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);
|
||||
background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
|
||||
}
|
||||
}
|
||||
/*- Arrow - Edit Bookmark Popup --------------------------------------------*/
|
||||
|
|
@ -2948,7 +2932,6 @@
|
|||
#editBookmarkPanelRows .expander-up {
|
||||
list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
|
||||
}
|
||||
|
||||
#editBookmarkPanelRows .expander-up .button-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
|
@ -3169,13 +3152,69 @@
|
|||
/* If the option is not specified, it is equivalent to 0px. */
|
||||
}
|
||||
|
||||
:root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] {
|
||||
height: calc(var(--tab-min-height) + var(--space-above-tabbar));
|
||||
}
|
||||
@media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) {
|
||||
:root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] {
|
||||
height: calc(var(--tab-min-height) + var(--space-above-tabbar) - var(--tabs-navbar-shadow-size));
|
||||
}
|
||||
|
||||
:root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items,
|
||||
:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
|
||||
padding-top: var(--space-above-tabbar) !important;
|
||||
@supports -moz-bool-pref("userChrome.padding.drag_space.maximized") {
|
||||
:root[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"] {
|
||||
height: calc(var(--tab-min-height) + var(--space-above-tabbar) - var(--tabs-navbar-shadow-size));
|
||||
}
|
||||
}
|
||||
}
|
||||
@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"] {
|
||||
height: calc(var(--tab-min-height) + var(--space-above-tabbar));
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("userChrome.padding.drag_space.maximized") {
|
||||
:root[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"] {
|
||||
height: calc(var(--tab-min-height) + var(--space-above-tabbar));
|
||||
}
|
||||
}
|
||||
}
|
||||
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
|
||||
#TabsToolbar > .toolbar-items {
|
||||
padding-top: var(--space-above-tabbar) !important;
|
||||
}
|
||||
}
|
||||
@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 {
|
||||
padding-top: calc(var(--space-above-tabbar) + 4px) !important;
|
||||
}
|
||||
|
||||
@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 {
|
||||
padding-top: calc(var(--space-above-tabbar) + 4px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@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 {
|
||||
padding-top: var(--space-above-tabbar) !important;
|
||||
}
|
||||
|
||||
@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 {
|
||||
padding-top: var(--space-above-tabbar) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.padding.tabbar_height") {
|
||||
|
|
@ -3501,12 +3540,28 @@
|
|||
--bookmark-menu-padding: 1.5px;
|
||||
}
|
||||
|
||||
:root:not([uidensity="touch"]) #BMB_bookmarksPopup .subviewbutton,
|
||||
@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 {
|
||||
min-height: unset !important;
|
||||
/* Original: 24px */
|
||||
}
|
||||
}
|
||||
}
|
||||
/*= Global Menu - Set Padding ================================================*/
|
||||
@supports -moz-bool-pref("userChrome.padding.global_menubar") {
|
||||
|
|
@ -4205,8 +4260,10 @@
|
|||
.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) */
|
||||
background-color: var(--tab-line-color, #0a84ff) !important;
|
||||
Automatic: color-mix(in srgb, var(--button-primary-bgcolor) 80%, transparent)
|
||||
|
||||
FF v96+ replace by var(--lwt-tab-line-color) */
|
||||
background-color: var(--tab-line-color, var(--lwt-tab-line-color, #0a84ff)) !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
|
||||
|
|
@ -4271,28 +4328,6 @@
|
|||
margin: unset !important;
|
||||
}
|
||||
}
|
||||
/*= Selected Tab - Photon like contextline ===================================*/
|
||||
@supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") {
|
||||
.tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button {
|
||||
display: -moz-box !important;
|
||||
-moz-box-ordinal-group: 0 !important;
|
||||
/* Looks like hover */
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
margin-inline: -4px !important;
|
||||
/* (24px - 16px) / 2 */
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
/*= Unselected Tab - Divide line =============================================*/
|
||||
/*= Unselected Tab - Dynamic Separator =======================================*/
|
||||
@supports -moz-bool-pref("userChrome.tab.dynamic_separtor") {
|
||||
|
|
@ -4464,10 +4499,19 @@
|
|||
right: 0;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[visuallyselected] .tab-background::before,
|
||||
.tabbrowser-tab[visuallyselected] .tab-background::after,
|
||||
.tabbrowser-tab[beforeselected-visible] .tab-background::after {
|
||||
opacity: 0;
|
||||
@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)));
|
||||
}
|
||||
}
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animate */
|
||||
|
|
@ -4710,6 +4754,81 @@
|
|||
/* Redefine from 19px !important, Original: 17px = (width - padding) */
|
||||
}
|
||||
}
|
||||
/** Clipped tabs - Show close button at pinned tab ****************************/
|
||||
@supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") {
|
||||
#tabbrowser-tabs {
|
||||
--uc-close-button-size: 24px;
|
||||
--uc-close-button-padding: 6px;
|
||||
--uc-close-button-margin: calc((var(--uc-close-button-size) - 16px) / -2);
|
||||
}
|
||||
|
||||
#tabbrowser-tabs[closebuttons="activetab"] {
|
||||
--uc-close-button-size: 20px;
|
||||
--uc-close-button-padding: 4px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
/** Clipped tabs - Always show tab icon ***************************************/
|
||||
@supports -moz-bool-pref("userChrome.tab.always_show_tab_icon") {
|
||||
.tab-icon-image:not([src], [pinned], [crashed], [busy]) {
|
||||
|
|
@ -5096,13 +5215,21 @@
|
|||
/* Makes the UI take up the entire width */
|
||||
}
|
||||
|
||||
:root:not([sizemode="fullscreen"]) #PersonalToolbar[initialized="true"]:not([collapsed="true"]),
|
||||
:root[sizemode="fullscreen"] #PersonalToolbar[initialized="true"] {
|
||||
visibility: unset !important;
|
||||
/* Makes the bookmarks toolbar visible if enabled */
|
||||
@media (-moz-gtk-csd-available) {
|
||||
/* Fix transparent backgorund */
|
||||
: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"] {
|
||||
visibility: unset !important;
|
||||
/* Makes the bookmarks toolbar visible if enabled */
|
||||
}
|
||||
}
|
||||
/** Library - Icons Replace ***************************************************/
|
||||
@supports -moz-bool-pref("userChrome.icon.library") {
|
||||
/*= Standard Folder - More Visible ===========================================*/
|
||||
|
|
@ -6000,6 +6127,12 @@
|
|||
--menuitem-image: none;
|
||||
/* Prevent Image Inheritance */
|
||||
}
|
||||
|
||||
@supports not -moz-bool-pref("userChrome.padding.global_menubar") {
|
||||
#main-menubar > menu {
|
||||
padding-block: 2px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Padding - Windows */
|
||||
@media (-moz-os-version: windows-win7),
|
||||
|
|
|
|||
|
|
@ -170,7 +170,7 @@ html|input {
|
|||
If you want to limit the coverage to some pages, you can use [`@-moz-document`](https://developer.mozilla.org/en-US/docs/Web/CSS/@document):
|
||||
```css
|
||||
/* Main browser UI */
|
||||
@-moz-document url(chrome://browser/content/browser.xhtml) {
|
||||
@-moz-document url("chrome://browser/content/browser.xhtml") {
|
||||
/* Your CSS */
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,17 @@
|
|||
/*= Windows 10 - Top border of accent color at ESR #358 ======================*/
|
||||
@include OS($win10) {
|
||||
:root[sizemode=normal][tabsintitlebar] #navigator-toolbox {
|
||||
border-top: .5px solid rgb(47, 47, 47) !important;
|
||||
}
|
||||
:root[sizemode=normal][tabsintitlebar]:-moz-window-inactive #navigator-toolbox {
|
||||
border-top-color: rgb(57, 57, 57) !important;
|
||||
}
|
||||
@media (-moz-windows-accent-color-in-titlebar) {
|
||||
:root[sizemode=normal][tabsintitlebar] #navigator-toolbox {
|
||||
border-top-color: -moz-accent-color !important;
|
||||
:root[sizemode=normal][tabsintitlebar] {
|
||||
#navigator-toolbox {
|
||||
border-top: .5px solid rgb(47, 47, 47) !important;
|
||||
}
|
||||
&:-moz-window-inactive #navigator-toolbox {
|
||||
border-top-color: rgb(57, 57, 57) !important;
|
||||
}
|
||||
|
||||
@media (-moz-windows-accent-color-in-titlebar) {
|
||||
#navigator-toolbox {
|
||||
border-top-color: -moz-accent-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -20,20 +23,25 @@
|
|||
background-color: var(--lwt-accent-color) !important;
|
||||
}
|
||||
}
|
||||
@include OS($win7) {
|
||||
#TabsToolbar:-moz-lwtheme {
|
||||
color: var(--lwt-text-color) !important;
|
||||
}
|
||||
|
||||
/* Remove Aero */
|
||||
@mixin _os_winTabBarTextColor {
|
||||
/* background textcolor */
|
||||
color: var(--lwt-text-color) !important;
|
||||
}
|
||||
@include OS($win7) {
|
||||
#TabsToolbar {
|
||||
&:-moz-lwtheme {
|
||||
@include _os_winTabBarTextColor;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
@include OS($win8) {
|
||||
#navigator-toolbox:-moz-lwtheme {
|
||||
color: var(--lwt-text-color) !important;
|
||||
@include _os_winTabBarTextColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -66,26 +74,27 @@
|
|||
#BMB_bookmarksPopup menu,
|
||||
#BMB_bookmarksPopup menuitem {
|
||||
border: none !important; /* Remove border */
|
||||
}
|
||||
#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;
|
||||
|
||||
&:not([disabled], :active)[_moz-menuactive="true"] {
|
||||
background-color: var(--button-hover-bgcolor) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include OS($win7) {
|
||||
@mixin _os_menuEmulate($bgRate, $bdRate) {
|
||||
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;
|
||||
background-color: color-mix(in srgb, -moz-menuhover $bgRate, transparent) !important;
|
||||
border-color: color-mix(in srgb, -moz-menuhover $bdRate, transparent) !important;
|
||||
}
|
||||
menu[_moz-menuactive="true"][disabled="disabled"],
|
||||
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;
|
||||
background-color: color-mix(in srgb, currentColor $bgRate, transparent) !important;
|
||||
border-color: color-mix(in srgb, currentColor $bdRate, transparent) !important;
|
||||
}
|
||||
}
|
||||
@include OS($win7) {
|
||||
@include _os_menuEmulate(5%, 60%);
|
||||
|
||||
/* Remove text shadow */
|
||||
:root:-moz-lwtheme #toolbar-menubar {
|
||||
|
|
@ -100,16 +109,7 @@
|
|||
}
|
||||
}
|
||||
@include OS($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;
|
||||
}
|
||||
menu[_moz-menuactive="true"][disabled="disabled"],
|
||||
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;
|
||||
}
|
||||
@include _os_menuEmulate(17%, 80%);
|
||||
}
|
||||
|
||||
@include OS($linux) {
|
||||
|
|
@ -140,6 +140,15 @@
|
|||
}
|
||||
|
||||
/*= Linux - Light System Default Theme's Selected Tab ========================*/
|
||||
$_os_linuxDefaultShadow: 0 0 4px rgba(128, 128, 142, 0.5);
|
||||
@mixin _os_linuxDefaultThemeSelectedTab {
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background:not(:-moz-lwtheme) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@include OS($linux) {
|
||||
@include Light {
|
||||
/* Because of
|
||||
|
|
@ -148,18 +157,13 @@
|
|||
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;
|
||||
@include _os_linuxDefaultThemeSelectedTab {
|
||||
box-shadow: $_os_linuxDefaultShadow !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;
|
||||
#TabsToolbar:not([brighttext]) {
|
||||
@include _os_linuxDefaultThemeSelectedTab {
|
||||
box-shadow: 0 0 1px var(--tab-line-color, rgba(128, 128, 142, 0.9)), $_os_linuxDefaultShadow !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,10 +16,12 @@
|
|||
}
|
||||
|
||||
/*= 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;
|
||||
#customization-palette-container,
|
||||
#customization-panel-container,
|
||||
#widget-overflow-mainView {
|
||||
#zoom-in-button > .toolbarbutton-icon {
|
||||
padding-inline-start: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*= Icon Fill Color ==========================================================*/
|
||||
|
|
@ -36,30 +38,47 @@
|
|||
}
|
||||
|
||||
/*= Disabled menu background color ===========================================*/
|
||||
menuitem[disabled="true"],
|
||||
menu[disabled="true"] {
|
||||
background-color: transparent !important;
|
||||
menuitem,
|
||||
menu {
|
||||
&[disabled="true"] {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*= Remove Tab Border ========================================================*/
|
||||
@mixin _theme_removeTabBorder($options...) {
|
||||
%noneBorder {
|
||||
/* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */
|
||||
border: unset !important;
|
||||
}
|
||||
@each $prefix, $postfix in $options {
|
||||
#TabsToolbar#{$prefix}
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background#{$postfix} {
|
||||
@extend %noneBorder;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.tab.connect_to_window") {
|
||||
/* TARGET: original, photon */
|
||||
/* Light Theme */
|
||||
#TabsToolbar:not([brighttext])
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background {
|
||||
border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */
|
||||
}
|
||||
@include _theme_removeTabBorder(
|
||||
// Light Theme
|
||||
":not([brighttext])",
|
||||
// Dark Theme
|
||||
"[brighttext]" ":-moz-lwtheme"
|
||||
);
|
||||
|
||||
/* Dark Theme */
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)) */
|
||||
#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon:-moz-lwtheme,
|
||||
.tab-background[selected]:-moz-lwtheme {
|
||||
// Nightly 102: outline: 1px solid var(--lwt-tab-line-color, var(--lwt-tabs-border-color, currentColor));
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -69,21 +88,23 @@ menu[disabled="true"] {
|
|||
background-image: var(--lwt-header-image) !important; /* Original: var(--lwt-header-image) */
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: right top !important;
|
||||
}
|
||||
@media (min-width: 2500px) {
|
||||
:root[lwtheme-image] {
|
||||
|
||||
// For high-resolution screen's image ratio
|
||||
@media (min-width: 2500px) {
|
||||
background-size: contain;
|
||||
|
||||
@include Option("userChrome.compatibility.covered_header_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;
|
||||
background-color: unset !important; /* Original: var(--lwt-accent-color) */
|
||||
|
||||
// lwtheme compatibility
|
||||
#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;
|
||||
background-color: unset !important; /* Original: var(--lwt-accent-color) */
|
||||
}
|
||||
}
|
||||
|
||||
/* Navbar Border */
|
||||
|
|
|
|||
|
|
@ -1,20 +1,16 @@
|
|||
/*- 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;
|
||||
@mixin _animate_bgColor($duration, $presudo: "") {
|
||||
button#{$presudo},
|
||||
toolbarbutton#{$presudo},
|
||||
stack#{$presudo},
|
||||
vbox#{$presudo},
|
||||
.toolbarbutton-icon#{$presudo},
|
||||
#tabs-newtab-button#{$presudo} > .toolbarbutton-icon {
|
||||
transition: background-color $duration var(--animation-easing-function) !important;
|
||||
}
|
||||
}
|
||||
@include _animate_bgColor(1s);
|
||||
@include _animate_bgColor(0.25s, ":hover");
|
||||
@include OS($linux) {
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected], [selected]) .tab-background:not(:-moz-lwtheme) {
|
||||
transition: background-image 0.25s var(--animation-easing-function) !important;
|
||||
|
|
@ -26,41 +22,47 @@ vbox:hover,
|
|||
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;
|
||||
&: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] {
|
||||
transition: -moz-box-flex 0.2s var(--animation-easing-function),
|
||||
margin-inline-start 0.2s var(--animation-easing-function) !important;
|
||||
}
|
||||
#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;
|
||||
}
|
||||
&[pinned] {
|
||||
transition: -moz-box-flex 0.2s var(--animation-easing-function),
|
||||
margin-inline-start 0.2s var(--animation-easing-function) !important;
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
&::before,
|
||||
&::after {
|
||||
transition: width 0.2s var(--animation-easing-function), transform 0.2s var(--animation-easing-function) !important;
|
||||
}
|
||||
.tab-label-container {
|
||||
transition: width 0.3s var(--animation-easing-function) !important;
|
||||
}
|
||||
.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;
|
||||
&:hover {
|
||||
transition: border-color 0.5s var(--animation-easing-function), background-color 1s var(--animation-easing-function) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Buttons in URL bar */
|
||||
|
|
@ -70,29 +72,21 @@ vbox:hover,
|
|||
#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;
|
||||
&:hover {
|
||||
transition: background-color 1.25s var(--animation-easing-function) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*- Border - Other Fields --------------------------------------------------*/
|
||||
#search-box:hover,
|
||||
xul|search-textbox.tabsFilter:hover,
|
||||
#editBMPanel_namePicker:hover,
|
||||
#editBMPanel_tagsField:hover,
|
||||
.findbar-container .findbar-textbox:hover {
|
||||
#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;
|
||||
&:hover {
|
||||
transition: border-color 0.5s var(--animation-easing-function) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*- Sidebar ----------------------------------------------------------------*/
|
||||
|
|
@ -106,13 +100,14 @@ xul|search-textbox.tabsFilter:hover,
|
|||
/* Animation */
|
||||
transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out,
|
||||
visibility 0s linear !important;
|
||||
}
|
||||
#sidebar-box[hidden="true"] {
|
||||
display: -moz-box !important;
|
||||
margin-inline-start: -18em;
|
||||
opacity: 0;
|
||||
visibility: collapse;
|
||||
transition-delay: 0s, 0s, 0.25s !important;
|
||||
|
||||
&[hidden="true"] {
|
||||
display: -moz-box !important;
|
||||
margin-inline-start: -18em;
|
||||
opacity: 0;
|
||||
visibility: collapse;
|
||||
transition-delay: 0s, 0s, 0.25s !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -121,19 +116,23 @@ xul|search-textbox.tabsFilter:hover,
|
|||
/* 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 0.3s var(--animation-easing-function) 50ms;
|
||||
}
|
||||
#navigator-toolbox[inFullscreen="true"]:hover {
|
||||
transition-duration: 1.5s;
|
||||
transition-delay: 0.1s;
|
||||
&[inFullscreen="true"] {
|
||||
/* Full screen enter */
|
||||
animation-duration: 1s;
|
||||
animation-name: fullscreen;
|
||||
animation-timing-function: ease;
|
||||
|
||||
/* Full screen navbar not hover */
|
||||
// transition: margin-top 0.3s var(--animation-easing-function) 50ms;
|
||||
transition: margin-top 1.3s var(--animation-easing-function) 50ms;
|
||||
&:hover {
|
||||
// Full screen navbar hover
|
||||
// transition-duration: 1.5s; // Not works, because !important
|
||||
// transition-delay: 0.5s;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fullscreen {
|
||||
|
|
@ -169,18 +168,19 @@ xul|search-textbox.tabsFilter:hover,
|
|||
@-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 {
|
||||
.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;
|
||||
}
|
||||
&.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);
|
||||
background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
|
||||
&:dir(rtl) {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -191,7 +191,7 @@ xul|search-textbox.tabsFilter:hover,
|
|||
}
|
||||
#editBookmarkPanelRows .expander-up {
|
||||
list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
|
||||
}
|
||||
#editBookmarkPanelRows .expander-up .button-icon {
|
||||
transform: rotate(180deg);
|
||||
.button-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
/* 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);
|
||||
&.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);
|
||||
}
|
||||
#downloadsListBox .download-state:not([exists], [state="0"]) .downloadTypeIcon {
|
||||
filter: grayscale(100%) !important;
|
||||
#downloadsListBox .download-state:not([exists], [state="0"]) {
|
||||
.downloadTarget {
|
||||
text-decoration: line-through;
|
||||
text-decoration-color: color-mix(in srgb, currentColor 65%, transparent);
|
||||
}
|
||||
.downloadTypeIcon {
|
||||
filter: grayscale(100%) !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,9 @@
|
|||
:root[sizemode="fullscreen"] #navigator-toolbox {
|
||||
position: fixed !important; /* Needed for content to take up entire height */
|
||||
z-index: 1000 !important; /* Puts the UI above the content */
|
||||
@include Option("userChrome.fullscreen.overlap") {
|
||||
@include Option("browser.fullscreen.autohide") {
|
||||
@import "overlap";
|
||||
}
|
||||
}
|
||||
|
||||
:root[sizemode="fullscreen"] :-moz-any(#navigator-toolbox, #titlebar, #nav-bar, #PersonalToolbar) {
|
||||
width: 100%; /* Makes the UI take up the entire width */
|
||||
}
|
||||
|
||||
:root:not([sizemode="fullscreen"]) #PersonalToolbar[initialized="true"]:not([collapsed="true"]),
|
||||
:root[sizemode="fullscreen"] #PersonalToolbar[initialized="true"] {
|
||||
visibility: unset !important; /* Makes the bookmarks toolbar visible if enabled */
|
||||
@include Option("userChrome.fullscreen.show_bookmarkbar") {
|
||||
@import "show_bookmarkbar";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,6 +77,12 @@ menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
|
|||
#main-menubar > menu > menupopup {
|
||||
--menuitem-image: none; /* Prevent Image Inheritance */
|
||||
}
|
||||
|
||||
@include NotOption("userChrome.padding.global_menubar") {
|
||||
#main-menubar > menu {
|
||||
padding-block: 2px !important;;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Padding - Windows */
|
||||
|
|
|
|||
|
|
@ -66,11 +66,7 @@
|
|||
@import "panel/index";
|
||||
|
||||
/** Fullscreen - Overlap toolbar **********************************************/
|
||||
@include Option("userChrome.fullscreen.overlap") {
|
||||
@include Option("browser.fullscreen.autohide") {
|
||||
@import "fullscreen/index";
|
||||
}
|
||||
}
|
||||
@import "fullscreen/index";
|
||||
|
||||
/** Library - Icons Replace ***************************************************/
|
||||
@include Option("userChrome.icon.library") {
|
||||
|
|
@ -92,7 +88,7 @@
|
|||
@import "icons/context_menu";
|
||||
}
|
||||
@include Option("userChrome.icon.global_menubar") {
|
||||
@import "icons/main_menubar";
|
||||
@import "icons/global_menubar";
|
||||
}
|
||||
@include Option("userChrome.icon.global_menu") {
|
||||
@import "icons/global_menu";
|
||||
|
|
|
|||
|
|
@ -4,10 +4,24 @@
|
|||
:root[uidensity="compact"] {
|
||||
--bookmark-menu-padding: 1.5px;
|
||||
}
|
||||
@include Option("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"]) #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;
|
||||
}
|
||||
|
||||
@include Option("userChrome.padding.menu_compact", "userChrome.padding.bookmark_menu.compact") {
|
||||
:root:not([uidensity="touch"]) #BMB_bookmarksPopup .bookmark-item,
|
||||
:root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .bookmark-item {
|
||||
min-height: unset !important; /* Original: 24px */
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,57 @@
|
|||
/* for Extra Drag Space */
|
||||
// https://searchfox.org/mozilla-esr78/search?q=--space-above-tabbar&path=&case=false®exp=false
|
||||
:root {
|
||||
--space-above-tabbar: 8px; /* If the option is not specified, it is equivalent to 0px. */
|
||||
}
|
||||
|
||||
:root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] {
|
||||
height: calc(var(--tab-min-height) + var(--space-above-tabbar));
|
||||
@mixin dragSpaceHeight {
|
||||
:root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] {
|
||||
@content;
|
||||
}
|
||||
@include Option("userChrome.padding.drag_space.maximized") {
|
||||
:root[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"] {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
:root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items,
|
||||
:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
|
||||
padding-top: var(--space-above-tabbar) !important;
|
||||
@mixin dragSpacePadding {
|
||||
/* 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 {
|
||||
@content;
|
||||
}
|
||||
@include Option("userChrome.padding.drag_space.maximized") {
|
||||
:root[sizemode="maximized"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items,
|
||||
:root[sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include OS($win10) {
|
||||
@include dragSpaceHeight {
|
||||
height: calc(var(--tab-min-height) + var(--space-above-tabbar) - var(--tabs-navbar-shadow-size));
|
||||
}
|
||||
}
|
||||
@include OS($win7, $win8, $linux) {
|
||||
@include dragSpaceHeight {
|
||||
height: calc(var(--tab-min-height) + var(--space-above-tabbar));
|
||||
}
|
||||
}
|
||||
|
||||
@include OS($mac) {
|
||||
#TabsToolbar > .toolbar-items {
|
||||
padding-top: var(--space-above-tabbar) !important;
|
||||
}
|
||||
}
|
||||
@include OS($win7) {
|
||||
/* Add 4px extra margin on top of the tabs toolbar on Windows 7. */
|
||||
@include dragSpacePadding {
|
||||
padding-top: calc(var(--space-above-tabbar) + 4px) !important;
|
||||
}
|
||||
}
|
||||
@include OS($win8, $win10, $linux) {
|
||||
@include dragSpacePadding {
|
||||
padding-top: var(--space-above-tabbar) !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,11 @@
|
|||
@import "clipped_tab/show_close_button_at_hover";
|
||||
}
|
||||
|
||||
/** Clipped tabs - Show close button at pinned tab ****************************/
|
||||
@include Option("userChrome.tab.close_button_at_pinned") {
|
||||
@import "clipped_tab/pinned_close_button";
|
||||
}
|
||||
|
||||
/** Clipped tabs - Always show tab icon ***************************************/
|
||||
@include Option("userChrome.tab.always_show_tab_icon") {
|
||||
@import "clipped_tab/always_show_tab_icon";
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@
|
|||
.tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before {
|
||||
opacity: 0;
|
||||
}
|
||||
// Don't hide at userChrome.tab.close_button_at_pinned.background
|
||||
}
|
||||
|
||||
/* Pinned Tab - Titlechanged Indicator override */
|
||||
|
|
|
|||
|
|
@ -22,8 +22,3 @@
|
|||
@include Option("userChrome.tab.photon_like_contextline") {
|
||||
@import "selected_tab/photon_like_contextline";
|
||||
}
|
||||
|
||||
/*= Selected Tab - Photon like contextline ===================================*/
|
||||
@include Option("userChrome.tab.close_button_at_pinned") {
|
||||
@import "selected_tab/pinned_close_button";
|
||||
}
|
||||
|
|
|
|||
54
src/tabbar/clipped_tab/_pinned_close_button.scss
Normal file
54
src/tabbar/clipped_tab/_pinned_close_button.scss
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
#tabbrowser-tabs {
|
||||
--uc-close-button-size: 24px;
|
||||
--uc-close-button-padding: 6px;
|
||||
--uc-close-button-margin: calc((var(--uc-close-button-size) - 16px) / -2);
|
||||
}
|
||||
#tabbrowser-tabs[closebuttons="activetab"] {
|
||||
--uc-close-button-size: 20px;
|
||||
--uc-close-button-padding: 4px;
|
||||
}
|
||||
|
||||
@mixin pinnedCloseButtonShow($prefix: "") {
|
||||
#{$prefix}: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;
|
||||
}
|
||||
}
|
||||
@mixin pinnedIconStackLayout($prefix: "") {
|
||||
#{$prefix}:not([busy]) .tab-icon-stack {
|
||||
width: 0 !important;
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
}
|
||||
}
|
||||
@mixin pinnedIconHide($prefix: "") {
|
||||
#{$prefix} .tab-icon-image {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tabbrowser-tab[pinned] {
|
||||
@include pinnedCloseButtonShow("&[visuallyselected]:not([style*='transform: translateX']):hover");
|
||||
@include pinnedIconStackLayout("&[visuallyselected]:not([style*='transform: translateX']):hover");
|
||||
@include pinnedIconHide("&[visuallyselected]:not([style*='transform: translateX']):hover");
|
||||
|
||||
@include Option("userChrome.tab.close_button_at_pinned.always") {
|
||||
@include pinnedCloseButtonShow("&[visuallyselected]");
|
||||
@include pinnedIconStackLayout("&[visuallyselected]");
|
||||
@include pinnedIconHide("&[visuallyselected]");
|
||||
}
|
||||
@include Option("userChrome.tab.close_button_at_pinned.background") {
|
||||
@include pinnedCloseButtonShow("&:not([style*='transform: translateX']):hover");
|
||||
@include pinnedIconStackLayout("&:not([style*='transform: translateX']):hover");
|
||||
@include pinnedIconHide("&:not([style*='transform: translateX']):hover");
|
||||
}
|
||||
}
|
||||
#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;
|
||||
}
|
||||
|
|
@ -18,8 +18,10 @@
|
|||
.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) */
|
||||
background-color: var(--tab-line-color, rgb(10, 132, 255)) !important;
|
||||
Automatic: color-mix(in srgb, var(--button-primary-bgcolor) 80%, transparent)
|
||||
|
||||
FF v96+ replace by var(--lwt-tab-line-color) */
|
||||
background-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255))) !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
.tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button {
|
||||
display: -moz-box !important;
|
||||
-moz-box-ordinal-group: 0 !important;
|
||||
|
||||
/* Looks like hover */
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
margin-inline: -4px !important; /* (24px - 16px) / 2 */
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
|
@ -28,7 +28,12 @@
|
|||
.tabbrowser-tab[visuallyselected] .tab-background::before,
|
||||
.tabbrowser-tab[visuallyselected] .tab-background::after,
|
||||
.tabbrowser-tab[beforeselected-visible] .tab-background::after {
|
||||
opacity: 0;
|
||||
@include Option("userChrome.tab.static_separator.selected_accent") {
|
||||
--lwt-background-tab-separator-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255)));
|
||||
}
|
||||
@include NotOption("userChrome.tab.static_separator.selected_accent") {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animate */
|
||||
|
|
|
|||
6
user.js
6
user.js
|
|
@ -36,6 +36,7 @@ user_pref("userChrome.tab.photon_like_padding", true); // Photon
|
|||
|
||||
// user_pref("userChrome.tab.dynamic_separtor", true); // Original, Proton
|
||||
user_pref("userChrome.tab.static_separator", true); // Photon
|
||||
// user_pref("userChrome.tab.static_separator.selected_accent", true); // Just option
|
||||
|
||||
// user_pref("userChrome.tab.newtab_button_like_tab", true); // Original
|
||||
user_pref("userChrome.tab.newtab_button_smaller", true); // Photon
|
||||
|
|
@ -78,8 +79,10 @@ user_pref("userChrome.rounding.square_tab", true);
|
|||
|
||||
// user_pref("userChrome.padding.first_tab", true);
|
||||
// user_pref("userChrome.padding.drag_space", true);
|
||||
// user_pref("userChrome.padding.drag_space.maximized", true);
|
||||
|
||||
// user_pref("userChrome.padding.menu_compact", true);
|
||||
// user_pref("userChrome.padding.bookmark_menu.compact", true);
|
||||
// user_pref("userChrome.padding.urlView_expanding", true);
|
||||
// user_pref("userChrome.padding.urlView_result", true);
|
||||
// user_pref("userChrome.padding.panel_header", true);
|
||||
|
|
@ -93,6 +96,8 @@ user_pref("userChrome.rounding.square_tab", true);
|
|||
// user_pref("userChrome.tab.on_bottom.menubar_on_top", true); // Need on_bottom
|
||||
// user_pref("userChrome.tab.always_show_tab_icon", true);
|
||||
// user_pref("userChrome.tab.close_button_at_pinned", true);
|
||||
// user_pref("userChrome.tab.close_button_at_pinned.always", true);
|
||||
// user_pref("userChrome.tab.close_button_at_pinned.background", true);
|
||||
// user_pref("userChrome.tab.close_button_at_hover.always", true); // Need close_button_at_hover
|
||||
// user_pref("userChrome.tab.sound_show_label", true); // Need remove sound_hide_label
|
||||
// user_pref("userChrome.tab.centered_label", true);
|
||||
|
|
@ -151,6 +156,7 @@ user_pref("userChrome.tab.container", true);
|
|||
user_pref("userChrome.tab.crashed", true);
|
||||
|
||||
user_pref("userChrome.fullscreen.overlap", true);
|
||||
user_pref("userChrome.fullscreen.show_bookmarkbar", true);
|
||||
|
||||
user_pref("userChrome.icon.library", true);
|
||||
user_pref("userChrome.icon.panel", true);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue