mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2026-01-03 07:42:47 -08:00
Merge branch 'master' into proton-style
This commit is contained in:
alstjr7375
commit
d97bc6c11a
2 changed files with 338 additions and 273 deletions
553
userChrome.css
553
userChrome.css
|
|
@ -27,7 +27,7 @@
|
|||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/*= Identity Poup Icon Crop ================================================*/
|
||||
/*= Identity Popup Icon Crop ===============================================*/
|
||||
.identity-popup-security-connection.identity-button {
|
||||
padding-block: 1px !important;
|
||||
}
|
||||
|
|
@ -263,9 +263,10 @@
|
|||
--win-hover-active-bgcolor: #c2c2c2; /* also button-bgcolor */
|
||||
--win-field-bgcolor: #ffffff;
|
||||
--win-component-bgcolor: #f2f2f2;
|
||||
--win-border-color: #8a8a8a;
|
||||
--win-tab-seperator-color: #a3a3a3;
|
||||
--win-sidebar-bgcolor: #e6e6e6;
|
||||
--win-sidebar-hover-bgcolor: #cfcfcf;
|
||||
--win-sidebar-border-color: #8a8a8a;
|
||||
--win-sidebar-button-hover-bgcolor: #b8b8b8;
|
||||
--win-sidebar-button-hover-active-bgcolor: #a3a3a3;
|
||||
--win-button-border: #747474;
|
||||
|
|
@ -289,9 +290,10 @@
|
|||
--win-hover-active-bgcolor: #454545; /* also button-bgcolor */
|
||||
--win-field-bgcolor: #373737;
|
||||
--win-component-bgcolor: #171717;
|
||||
--win-border-color: #5b5b5b;
|
||||
--win-tab-seperator-color: #555555;
|
||||
--win-sidebar-bgcolor: #1f1f1f;
|
||||
--win-sidebar-hover-bgcolor: #353535;
|
||||
--win-sidebar-border-color: #5b5b5b;
|
||||
--win-sidebar-button-hover-bgcolor: #353535;
|
||||
--win-sidebar-button-hover-active-bgcolor: #4c4c4c;
|
||||
--win-button-border: #8f8f8f;
|
||||
|
|
@ -340,10 +342,7 @@
|
|||
--menu-border-color: var(--win-bgcolor) !important;
|
||||
--lwt-accent-color: var(--win-bgcolor) !important;
|
||||
--toolbar-field-border-color: var(--win-bgcolor) !important;
|
||||
--arrowpanel-border-color: var(--win-bgcolor) !important;
|
||||
--chrome-content-separator-color: var(--win-bgcolor) !important;
|
||||
--toolbarseparator-color: var(--win-bgcolor) !important;
|
||||
--panel-separator-color: var(--win-bgcolor) !important;
|
||||
|
||||
/* Component Background Color */
|
||||
--menu-background-color: var(--win-component-bgcolor) !important;
|
||||
|
|
@ -352,6 +351,9 @@
|
|||
--arrowpanel-background: var(--win-component-bgcolor) !important;
|
||||
--autocomplete-popup-background: var(--win-component-bgcolor) !important;
|
||||
|
||||
/* Seperator */
|
||||
--toolbarseparator-color: var(--win-tab-seperator-color) !important;
|
||||
|
||||
/* Field Backround Color */
|
||||
--input-bgcolor: var(--win-field-bgcolor) !important;
|
||||
--toolbar-field-background-color: var(--win-field-bgcolor) !important;
|
||||
|
|
@ -428,6 +430,16 @@
|
|||
--panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important;
|
||||
}
|
||||
|
||||
/*- Separator ------------------------------------------------------------*/
|
||||
:root:not(:-moz-lwtheme) {
|
||||
--arrowpanel-border-color: var(--win-bgcolor) !important;
|
||||
--panel-separator-color: var(--win-bgcolor) !important;
|
||||
}
|
||||
:root[lwt-default-theme-in-dark-mode] {
|
||||
--arrowpanel-border-color: var(--win-border-color) !important;
|
||||
--panel-separator-color: var(--win-border-color) !important;
|
||||
}
|
||||
|
||||
/*- Menu -----------------------------------------------------------------*/
|
||||
html#main-window menupopup:not(:-moz-lwtheme) {
|
||||
--menu-color: var(--win-text-color) !important;
|
||||
|
|
@ -455,7 +467,7 @@
|
|||
:root[lwt-default-theme-in-dark-mode] #sidebar-box {
|
||||
--sidebar-background-color: var(--win-sidebar-bgcolor) !important;
|
||||
--sidebar-text-color: var(--win-text-color) !important;
|
||||
--sidebar-border-color: var(--win-sidebar-border-color) !important;
|
||||
--sidebar-border-color: var(--win-border-color) !important;
|
||||
}
|
||||
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
|
||||
.sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
|
||||
|
|
@ -990,7 +1002,7 @@
|
|||
|
||||
/* Default theme color preservation */
|
||||
:root[lwtheme-mozlightdark] menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]),
|
||||
:root[lwtheme-mozlightdark] menupopup:is(#goPopup, #bookmarksMenuPopup) {
|
||||
:root[lwtheme-mozlightdark] menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) {
|
||||
--menu-color: var(--toolbar-color, var(--in-content-page-color)) !important;
|
||||
--arrowpanel-background: var(
|
||||
--toolbar-bgcolor,
|
||||
|
|
@ -1042,6 +1054,7 @@
|
|||
#editBMPanel_namePicker,
|
||||
#editBMPanel_tagsField {
|
||||
--input-bgcolor: var(--arrowpanel-background, Field);
|
||||
--input-color: var(--arrowpanel-color, FieldText);
|
||||
}
|
||||
|
||||
/*== Sidebar - Field Color =================================================*/
|
||||
|
|
@ -2127,8 +2140,9 @@
|
|||
padding-inline-end: 4px !important;
|
||||
}
|
||||
|
||||
/*- Search Bar ---------------------------------------------------------*/
|
||||
#searchFilter {
|
||||
/*- Search Bar & Input -------------------------------------------------*/
|
||||
#searchFilter,
|
||||
#detailsPane html|input {
|
||||
appearance: none !important;
|
||||
background-color: var(--organizer-toolbar-field-background) !important;
|
||||
color: var(--organizer-color) !important;
|
||||
|
|
@ -2172,6 +2186,16 @@
|
|||
outline: 2px solid var(--organizer-outline-color) !important;
|
||||
}
|
||||
|
||||
richlistitem[selected="true"],
|
||||
richlistitem:hover {
|
||||
background-color: var(--organizer-hover-background) !important;
|
||||
color: var(--organizer-color) !important;
|
||||
}
|
||||
|
||||
richlistbox:where(:focus) > richlistitem[selected="true"] {
|
||||
background-color: var(--organizer-selected-background) !important;
|
||||
}
|
||||
|
||||
/*- Tree ---------------------------------------------------------------*/
|
||||
#contentView treecol {
|
||||
/* Use box-shadow to draw a bottom border instead of border-bottom
|
||||
|
|
@ -2365,49 +2389,52 @@
|
|||
}
|
||||
|
||||
/** Decoration **************************************************************/
|
||||
/*= URL, Search Bar ========================================================*/
|
||||
#urlbar:hover:not([focused="true"]) > #urlbar-background,
|
||||
#searchbar:hover:not(:focus-within) {
|
||||
--toolbar-field-border-color: var(--toolbar-field-focus-border-color);
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
/*= URL, Search Bar ======================================================*/
|
||||
#urlbar:hover:not([focused="true"]) > #urlbar-background,
|
||||
#searchbar:hover:not(:focus-within) {
|
||||
--toolbar-field-border-color: var(--toolbar-field-focus-border-color);
|
||||
}
|
||||
|
||||
/*= Other Fields ===========================================================*/
|
||||
/* Sidebar */
|
||||
.sidebar-panel[lwt-sidebar] #search-box:hover,
|
||||
body[lwt-sidebar] xul|search-textbox.tabsFilter:hover {
|
||||
border-color: var(--lwt-sidebar-highlight-background-color, Highlight) !important;
|
||||
}
|
||||
.sidebar-panel:not([lwt-sidebar]) #search-box:hover,
|
||||
body:not([lwt-sidebar]) xul|search-textbox.tabsFilter:hover {
|
||||
border-color: -moz-accent-color !important;
|
||||
}
|
||||
/*= Other Fields =========================================================*/
|
||||
/* Sidebar */
|
||||
.sidebar-panel[lwt-sidebar] #search-box:hover,
|
||||
body[lwt-sidebar] xul|search-textbox.tabsFilter:hover {
|
||||
border-color: var(--lwt-sidebar-highlight-background-color, Highlight) !important;
|
||||
}
|
||||
.sidebar-panel:not([lwt-sidebar]) #search-box:hover,
|
||||
body:not([lwt-sidebar]) xul|search-textbox.tabsFilter:hover {
|
||||
border-color: -moz-accent-color !important;
|
||||
}
|
||||
|
||||
/* Others */
|
||||
#editBMPanel_namePicker:hover,
|
||||
#editBMPanel_tagsField:hover,
|
||||
.findbar-container .findbar-textbox:hover {
|
||||
--input-border-color: color-mix(in srgb, var(--focus-outline-color, -moz-accent-color) 50%, transparent);
|
||||
}
|
||||
/* Others */
|
||||
#editBMPanel_namePicker:hover,
|
||||
#editBMPanel_tagsField:hover,
|
||||
.findbar-container .findbar-textbox:hover {
|
||||
--input-border-color: color-mix(in srgb, var(--focus-outline-color, -moz-accent-color) 50%, transparent);
|
||||
}
|
||||
|
||||
/*= Downloads Panel ========================================================*/
|
||||
/* Accent Color for downloaded item */
|
||||
#downloadsListBox .download-state[exists] .downloadDetails {
|
||||
color: var(--button-primary-bgcolor);
|
||||
}
|
||||
#downloadsListBox .download-state[exists] .downloadDetails.downloadDetailsHover {
|
||||
color: var(--button-primary-hover-bgcolor);
|
||||
}
|
||||
/*= Downloads Panel ======================================================*/
|
||||
/* Accent Color for downloaded item */
|
||||
#downloadsListBox .download-state[exists] .downloadDetails {
|
||||
color: var(--button-primary-bgcolor);
|
||||
}
|
||||
#downloadsListBox .download-state[exists] .downloadDetails.downloadDetailsHover {
|
||||
color: var(--button-primary-hover-bgcolor);
|
||||
}
|
||||
|
||||
/* File moved or missing */
|
||||
#downloadsListBox .download-state:not([exists], [state="0"]) .downloadTarget {
|
||||
text-decoration: line-through;
|
||||
text-decoration-color: color-mix(in srgb, currentColor 65%, transparent);
|
||||
}
|
||||
#downloadsListBox .download-state:not([exists], [state="0"]) .downloadTypeIcon {
|
||||
filter: grayscale(100%) !important;
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
/*= Cursor Types ===========================================================*/
|
||||
#appMenu-proton-update-banner,
|
||||
#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2,
|
||||
#appMenu-zoomReduce-button2,
|
||||
#appMenu-zoomReset-button2,
|
||||
|
|
@ -2442,180 +2469,184 @@
|
|||
*/
|
||||
|
||||
/*= Animate ================================================================*/
|
||||
/*- Background Color -------------------------------------------------------*/
|
||||
button,
|
||||
toolbarbutton,
|
||||
stack,
|
||||
vbox,
|
||||
.toolbarbutton-icon {
|
||||
transition: background-color 1s var(--animation-easing-function) !important;
|
||||
}
|
||||
button:hover,
|
||||
toolbarbutton:hover,
|
||||
stack:hover,
|
||||
vbox:hover,
|
||||
.toolbarbutton-icon:hover {
|
||||
transition: background-color 0.25s var(--animation-easing-function) !important;
|
||||
}
|
||||
@media (-moz-gtk-csd-available) {
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected], [selected]) .tab-background:not(:-moz-lwtheme) {
|
||||
transition: background-image 0.25s var(--animation-easing-function) !important;
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
/*- Background Color -----------------------------------------------------*/
|
||||
button,
|
||||
toolbarbutton,
|
||||
stack,
|
||||
vbox,
|
||||
.toolbarbutton-icon,
|
||||
#tabs-newtab-button > .toolbarbutton-icon {
|
||||
transition: background-color 1s var(--animation-easing-function) !important;
|
||||
}
|
||||
}
|
||||
|
||||
menu,
|
||||
menuitem,
|
||||
.subviewbutton {
|
||||
/* treechildren::-moz-tree-row: Can't apply */
|
||||
transition: background-color 0.5s var(--animation-easing-function) !important;
|
||||
}
|
||||
menu:hover,
|
||||
menuitem:hover,
|
||||
.subviewbutton:hover {
|
||||
transition: background-color 0.1s var(--animation-easing-function) !important;
|
||||
}
|
||||
|
||||
/*- Pinned Tab -------------------------------------------------------------*/
|
||||
#tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:not([collapsed]) {
|
||||
/* -moz-box-flex may be caused #tabbrowser-tabs[closebuttons] */
|
||||
transition: -moz-box-flex 0.2s var(--animation-easing-function),
|
||||
margin-inline-start 0.2s var(--animation-easing-function), min-width 0.1s ease-out, max-width 0.1s ease-out !important;
|
||||
max-width: var(--tab-max-width, 240px);
|
||||
}
|
||||
#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 {
|
||||
transition: padding-inline 0.2s var(--animation-easing-function),
|
||||
/* Unloaded Tab */ opacity 0.5s 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;
|
||||
}
|
||||
|
||||
/*- URL / Search Bar -------------------------------------------------------*/
|
||||
#urlbar-background,
|
||||
#searchbar {
|
||||
transition: border-color 1s var(--animation-easing-function), background-color 1.5s var(--animation-easing-function) !important;
|
||||
}
|
||||
#urlbar-background:hover,
|
||||
#searchbar:hover {
|
||||
transition: border-color 0.5s var(--animation-easing-function), background-color 1s var(--animation-easing-function) !important;
|
||||
}
|
||||
|
||||
/* Buttons in URL bar */
|
||||
#tracking-protection-icon-container,
|
||||
#identity-icon-box,
|
||||
#identity-permission-box,
|
||||
#notification-popup-box,
|
||||
#page-action-buttons > .urlbar-page-action {
|
||||
transition: background-color 2.5s var(--animation-easing-function) !important;
|
||||
}
|
||||
#tracking-protection-icon-container:hover,
|
||||
#identity-icon-box:hover,
|
||||
#identity-permission-box:hover,
|
||||
#notification-popup-box:hover,
|
||||
#page-action-buttons > .urlbar-page-action:hover {
|
||||
transition: background-color 1.25s var(--animation-easing-function) !important;
|
||||
}
|
||||
|
||||
/*- Border - Other Fields --------------------------------------------------*/
|
||||
#search-box:hover,
|
||||
xul|search-textbox.tabsFilter:hover,
|
||||
#editBMPanel_namePicker:hover,
|
||||
#editBMPanel_tagsField:hover,
|
||||
.findbar-container .findbar-textbox:hover {
|
||||
transition: border-color 1s var(--animation-easing-function) !important;
|
||||
}
|
||||
#search-box:hover,
|
||||
xul|search-textbox.tabsFilter:hover,
|
||||
#editBMPanel_namePicker:hover,
|
||||
#editBMPanel_tagsField:hover,
|
||||
.findbar-container .findbar-textbox:hover {
|
||||
transition: border-color 0.5s var(--animation-easing-function) !important;
|
||||
}
|
||||
|
||||
/*- Sidebar ----------------------------------------------------------------*/
|
||||
#sidebar-box {
|
||||
/* like #sidebar-box > #sidebar */
|
||||
min-width: 14em;
|
||||
width: 18em;
|
||||
max-width: 36em;
|
||||
|
||||
/* Animation */
|
||||
transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out,
|
||||
visibility 0s linear !important;
|
||||
}
|
||||
#sidebar-box[hidden="true"] {
|
||||
display: -moz-box !important;
|
||||
margin-inline-start: -18em;
|
||||
opacity: 0;
|
||||
visibility: collapse;
|
||||
transition-delay: 0s, 0s, 0.25s !important;
|
||||
}
|
||||
|
||||
/*- Expand - Synced Tabs ---------------------------------------------------*/
|
||||
@-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml")
|
||||
{
|
||||
.item-tabs-list {
|
||||
transition: transform 0.2s ease-out, opacity 0.2s ease-out;
|
||||
transform: translateY(0%);
|
||||
opacity: 1;
|
||||
max-height: 100%;
|
||||
button:hover,
|
||||
toolbarbutton:hover,
|
||||
stack:hover,
|
||||
vbox:hover,
|
||||
.toolbarbutton-icon:hover,
|
||||
#tabs-newtab-button:hover > .toolbarbutton-icon {
|
||||
transition: background-color 0.25s var(--animation-easing-function) !important;
|
||||
}
|
||||
@media (-moz-gtk-csd-available) {
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected], [selected]) .tab-background:not(:-moz-lwtheme) {
|
||||
transition: background-image 0.25s var(--animation-easing-function) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.item.client.closed .item-tabs-list {
|
||||
display: flex !important;
|
||||
.subviewbutton {
|
||||
/* treechildren::-moz-tree-row: Can't apply
|
||||
menu, menuitem is not apply.
|
||||
*/
|
||||
transition: background-color 0.5s var(--animation-easing-function) !important;
|
||||
}
|
||||
.subviewbutton:hover {
|
||||
transition: background-color 0.1s var(--animation-easing-function) !important;
|
||||
}
|
||||
|
||||
transition: transform 0.2s ease-out, opacity 0.2s ease-out,
|
||||
max-height 0.25s cubic-bezier(0.82, 0.085, 0.395, 0.895) 0.05s;
|
||||
visibility: hidden;
|
||||
transform: translateY(-100%);
|
||||
/*- 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;
|
||||
max-width: var(--tab-max-width, 240px);
|
||||
}
|
||||
#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 {
|
||||
transition: padding-inline 0.2s var(--animation-easing-function),
|
||||
/* Unloaded Tab */ opacity 0.5s 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;
|
||||
}
|
||||
|
||||
/*- URL / Search Bar -----------------------------------------------------*/
|
||||
#urlbar-background,
|
||||
#searchbar {
|
||||
transition: border-color 1s var(--animation-easing-function),
|
||||
background-color 1.5s var(--animation-easing-function) !important;
|
||||
}
|
||||
#urlbar-background:hover,
|
||||
#searchbar:hover {
|
||||
transition: border-color 0.5s var(--animation-easing-function),
|
||||
background-color 1s var(--animation-easing-function) !important;
|
||||
}
|
||||
|
||||
/* Buttons in URL bar */
|
||||
#tracking-protection-icon-container,
|
||||
#identity-icon-box,
|
||||
#identity-permission-box,
|
||||
#notification-popup-box,
|
||||
#page-action-buttons > .urlbar-page-action {
|
||||
transition: background-color 2.5s var(--animation-easing-function) !important;
|
||||
}
|
||||
#tracking-protection-icon-container:hover,
|
||||
#identity-icon-box:hover,
|
||||
#identity-permission-box:hover,
|
||||
#notification-popup-box:hover,
|
||||
#page-action-buttons > .urlbar-page-action:hover {
|
||||
transition: background-color 1.25s var(--animation-easing-function) !important;
|
||||
}
|
||||
|
||||
/*- Border - Other Fields ------------------------------------------------*/
|
||||
#search-box:hover,
|
||||
xul|search-textbox.tabsFilter:hover,
|
||||
#editBMPanel_namePicker:hover,
|
||||
#editBMPanel_tagsField:hover,
|
||||
.findbar-container .findbar-textbox:hover {
|
||||
transition: border-color 1s var(--animation-easing-function) !important;
|
||||
}
|
||||
#search-box:hover,
|
||||
xul|search-textbox.tabsFilter:hover,
|
||||
#editBMPanel_namePicker:hover,
|
||||
#editBMPanel_tagsField:hover,
|
||||
.findbar-container .findbar-textbox:hover {
|
||||
transition: border-color 0.5s var(--animation-easing-function) !important;
|
||||
}
|
||||
|
||||
/*- Sidebar --------------------------------------------------------------*/
|
||||
#sidebar-box {
|
||||
/* like #sidebar-box > #sidebar */
|
||||
min-width: 14em;
|
||||
width: 18em;
|
||||
max-width: 36em;
|
||||
|
||||
/* Animation */
|
||||
transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out,
|
||||
visibility 0s linear !important;
|
||||
}
|
||||
#sidebar-box[hidden="true"] {
|
||||
display: -moz-box !important;
|
||||
margin-inline-start: -18em;
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
visibility: collapse;
|
||||
transition-delay: 0s, 0s, 0.25s !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*- Arrow - Synced Tabs ----------------------------------------------------*/
|
||||
@-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml")
|
||||
{
|
||||
/* treechildren::-moz-tree-twisty: Can't apply */
|
||||
#template-container .item.client .item-twisty-container {
|
||||
/*- Expand - Synced Tabs -------------------------------------------------*/
|
||||
@-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml")
|
||||
{
|
||||
.item-tabs-list {
|
||||
transition: transform 0.2s ease-out, opacity 0.2s ease-out;
|
||||
transform: translateY(0%);
|
||||
opacity: 1;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.item.client.closed .item-tabs-list {
|
||||
display: flex !important;
|
||||
|
||||
transition: transform 0.2s ease-out, opacity 0.2s ease-out,
|
||||
max-height 0.25s cubic-bezier(0.82, 0.085, 0.395, 0.895) 0.05s;
|
||||
visibility: hidden;
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*- Arrow - Synced Tabs --------------------------------------------------*/
|
||||
@-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml")
|
||||
{
|
||||
/* treechildren::-moz-tree-twisty: Can't apply */
|
||||
#template-container .item.client .item-twisty-container {
|
||||
transition: transform 0.1s var(--animation-easing-function) !important;
|
||||
}
|
||||
|
||||
#template-container .item.client.closed .item-twisty-container {
|
||||
transform: rotate(-90deg);
|
||||
background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
|
||||
}
|
||||
|
||||
#template-container .item.client.closed .item-twisty-container:dir(rtl) {
|
||||
transform: rotate(90deg);
|
||||
background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*- Arrow - Edit Bookmark Popup ------------------------------------------*/
|
||||
#editBookmarkPanelRows .expander-up .button-icon,
|
||||
#editBookmarkPanelRows .expander-down .button-icon {
|
||||
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;
|
||||
#editBookmarkPanelRows .expander-up {
|
||||
list-style-image: url("chrome://global/skin/icons/arrow-down.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;
|
||||
#editBookmarkPanelRows .expander-up .button-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*- Arrow - Edit Bookmark Popup --------------------------------------------*/
|
||||
#editBookmarkPanelRows .expander-up .button-icon,
|
||||
#editBookmarkPanelRows .expander-down .button-icon {
|
||||
transition: transform 0.1s var(--animation-easing-function) !important;
|
||||
}
|
||||
#editBookmarkPanelRows .expander-up {
|
||||
list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
|
||||
}
|
||||
#editBookmarkPanelRows .expander-up .button-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/** Reduce Padding **********************************************************/
|
||||
/*= Root - Reduce Padding ==================================================*/
|
||||
:root {
|
||||
|
|
@ -2888,7 +2919,7 @@
|
|||
:root[uidensity="touch"] {
|
||||
--menu-padding: 0.5em;
|
||||
}
|
||||
menupopup > menuitem,
|
||||
menupopup:not(.in-menulist) > menuitem,
|
||||
menupopup > menu {
|
||||
/* Original: 0.5em */
|
||||
padding-block: var(--menu-padding) !important;
|
||||
|
|
@ -2977,7 +3008,7 @@
|
|||
padding-block: var(--bookmark-menu-padding) !important;
|
||||
}
|
||||
|
||||
/*= Poup Panel - Reduce padding ============================================*/
|
||||
/*= Popup Panel - Reduce padding ===========================================*/
|
||||
#protections-popup-main-header-label {
|
||||
height: unset !important; /* Original: 37.6px */
|
||||
}
|
||||
|
|
@ -3051,8 +3082,7 @@
|
|||
}
|
||||
|
||||
/** Unselected Tab - Divide line ********************************************/
|
||||
#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before,
|
||||
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before,
|
||||
.tab-background::before,
|
||||
#tabbrowser-arrowscrollbox:not([overflowing])
|
||||
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab]
|
||||
.tab-background::after {
|
||||
|
|
@ -3067,8 +3097,8 @@
|
|||
height: 20px;
|
||||
|
||||
/* Bar Color */
|
||||
opacity: var(--tab-separator-opacity);
|
||||
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
|
||||
opacity: 0;
|
||||
background-color: var(--toolbarseparator-color);
|
||||
}
|
||||
|
||||
.tab-background::before {
|
||||
|
|
@ -3078,9 +3108,13 @@
|
|||
right: 0;
|
||||
transform: translateX(1.5px) translateY(calc(-50% + 1px)) !important;
|
||||
}
|
||||
#tabs-newtab-button:is(:hover, [open])::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
||||
#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before,
|
||||
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before,
|
||||
#tabbrowser-arrowscrollbox:not([overflowing])
|
||||
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab]
|
||||
.tab-background::after {
|
||||
opacity: var(--tab-separator-opacity);
|
||||
}
|
||||
|
||||
#navigator-toolbox:not([movingtab])
|
||||
|
|
@ -3097,6 +3131,16 @@
|
|||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
/* Animate */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.tab-background::before,
|
||||
#tabbrowser-arrowscrollbox:not([overflowing])
|
||||
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab]
|
||||
.tab-background::after {
|
||||
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
|
||||
}
|
||||
}
|
||||
|
||||
/* Latest Tab & New tab margin */
|
||||
#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[last-visible-tab] {
|
||||
margin-inline-end: 1px !important;
|
||||
|
|
@ -3149,16 +3193,23 @@
|
|||
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button {
|
||||
visibility: collapse !important;
|
||||
opacity: 0;
|
||||
|
||||
/* Animation - Fade out */
|
||||
transition: opacity 0.1s var(--animation-easing-function) !important;
|
||||
}
|
||||
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button {
|
||||
visibility: visible !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Animation - Fade in */
|
||||
transition: opacity 0.25s var(--animation-easing-function) !important;
|
||||
/* Animate */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
/* Fade out */
|
||||
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button {
|
||||
transition: opacity 0.1s var(--animation-easing-function) !important;
|
||||
}
|
||||
|
||||
/* Fade in */
|
||||
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button {
|
||||
transition: opacity 0.25s var(--animation-easing-function) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Closed Button's icon thicker */
|
||||
|
|
@ -3218,9 +3269,6 @@
|
|||
border-radius: 10px !important;
|
||||
width: 17px !important;
|
||||
height: 17px !important;
|
||||
|
||||
/* Animation */
|
||||
transition: 0.1s var(--animation-easing-function);
|
||||
}
|
||||
.tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
|
||||
/* Color */
|
||||
|
|
@ -3230,13 +3278,22 @@
|
|||
fill-opacity: 0.8 !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.tab-label-container > .tab-label {
|
||||
transition: transform 0.25s var(--animation-easing-function);
|
||||
}
|
||||
.tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* Animate */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.tab-icon-overlay:not([crashed]),
|
||||
.tab-icon-overlay[pinned][crashed][selected] {
|
||||
transition: 0.1s var(--animation-easing-function);
|
||||
}
|
||||
|
||||
.tab-label-container > .tab-label {
|
||||
transition: transform 0.25s var(--animation-easing-function);
|
||||
}
|
||||
}
|
||||
|
||||
/* None exist favicon - Size bigger */
|
||||
.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) {
|
||||
transform: translateX(-0.5px) translateY(-1px);
|
||||
|
|
@ -3338,27 +3395,33 @@
|
|||
content: "";
|
||||
display: block;
|
||||
position: absolute !important;
|
||||
transform: translate(9px, 12px) !important;
|
||||
|
||||
/* Shape */
|
||||
border-bottom: 2px solid color-mix(in srgb, var(--identity-icon-color) 75%, transparent);
|
||||
border-bottom: 2px solid var(--identity-icon-color);
|
||||
width: 25%;
|
||||
|
||||
/* Animate */
|
||||
transition: 0.15s var(--animation-easing-function) !important;
|
||||
transform: translate(9px, 12px) !important;
|
||||
opacity: 0.75;
|
||||
}
|
||||
.tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before {
|
||||
width: calc(100% - 30px);
|
||||
border-color: var(--identity-icon-color);
|
||||
opacity: 1;
|
||||
}
|
||||
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before {
|
||||
width: calc(100% - 33px);
|
||||
}
|
||||
|
||||
/* Animate */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.tab-content:not([titlechanged])::before {
|
||||
transition: 0.15s var(--animation-easing-function) !important;
|
||||
transition-property: width, opacity;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pinned Tab */
|
||||
.tabbrowser-tab[pinned] .tab-content::before {
|
||||
width: 16px;
|
||||
transform: translateY(12px) !important;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
/* Pinned Tab - Titlechanged Indicator override */
|
||||
|
|
@ -4057,9 +4120,9 @@
|
|||
> menupopup
|
||||
> menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
|
||||
#main-menubar > menu,
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
|
||||
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
|
||||
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
|
||||
|
|
@ -4093,9 +4156,9 @@
|
|||
}
|
||||
:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic),
|
||||
:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic),
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item),
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
|
||||
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
|
||||
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
|
||||
|
|
@ -4149,9 +4212,9 @@
|
|||
:not(menu, #ContentSelectDropdown, #context-navigation)
|
||||
> menupopup
|
||||
> menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist),
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item),
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
|
||||
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
|
||||
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
|
||||
|
|
@ -4175,9 +4238,9 @@
|
|||
:not(menu, #ContentSelectDropdown, #context-navigation)
|
||||
> menupopup
|
||||
> menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist),
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item),
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
|
||||
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
|
||||
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
|
||||
|
|
@ -4230,7 +4293,7 @@
|
|||
}
|
||||
|
||||
/*= Bookmark Menu - Layout =================================================*/
|
||||
/* #goPoup, #bookmarksMenuPopup: looks like global menu
|
||||
/* #goPopup(Legacy of historyMenuPoup), #historyMenuPopup, #bookmarksMenuPopup: looks like global menu
|
||||
* #BMB_bookmarksPopup: looks like arrow panel
|
||||
*/
|
||||
|
||||
|
|
@ -4249,7 +4312,7 @@
|
|||
/* Windows 7, 8 */
|
||||
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
|
||||
/* Global Menu */
|
||||
menupopup:is(#goPopup, #bookmarksMenuPopup) .bookmark-item {
|
||||
menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item {
|
||||
padding-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
|
|
@ -4293,7 +4356,7 @@
|
|||
/* Linux */
|
||||
@media (-moz-gtk-csd-available) {
|
||||
/* Global Menu */
|
||||
menupopup:is(#goPopup, #bookmarksMenuPopup) .bookmark-item {
|
||||
menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item {
|
||||
padding-inline-start: var(--context-menu-background-padding) !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,36 +32,38 @@
|
|||
}
|
||||
|
||||
/** Activity Stream - Animate *********************************************/
|
||||
:root {
|
||||
--animation-easing-function: cubic-bezier(0.07, 0.95, 0, 1);
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:root {
|
||||
--animation-easing-function: cubic-bezier(0.07, 0.95, 0, 1);
|
||||
}
|
||||
|
||||
/* Background */
|
||||
.top-site-outer,
|
||||
#searchSubmit,
|
||||
button.icon,
|
||||
button.close-button {
|
||||
transition: background 1.5s var(--animation-easing-function);
|
||||
}
|
||||
.top-site-outer:hover,
|
||||
#searchSubmit:hover,
|
||||
button.icon:hover,
|
||||
button.close-button:hover {
|
||||
transition: background 0.5s var(--animation-easing-function);
|
||||
}
|
||||
/* Background */
|
||||
.top-site-outer,
|
||||
#searchSubmit,
|
||||
button.icon,
|
||||
button.close-button {
|
||||
transition: background 1.5s var(--animation-easing-function);
|
||||
}
|
||||
.top-site-outer:hover,
|
||||
#searchSubmit:hover,
|
||||
button.icon:hover,
|
||||
button.close-button:hover {
|
||||
transition: background 0.5s var(--animation-easing-function);
|
||||
}
|
||||
|
||||
/* Search Bar */
|
||||
.search-inner-wrapper input {
|
||||
transition: 1s var(--animation-easing-function);
|
||||
transition-property: border-color, box-shadow;
|
||||
}
|
||||
.search-wrapper .search-inner-wrapper:active input,
|
||||
.search-wrapper input:focus {
|
||||
transition: border-color 0.5s var(--animation-easing-function), box-shadow 1s var(--animation-easing-function);
|
||||
}
|
||||
.search-wrapper .search-inner-wrapper:hover input {
|
||||
border-color: var(--newtab-primary-action-background) !important;
|
||||
transition: border-color 0.5s var(--animation-easing-function);
|
||||
/* Search Bar */
|
||||
.search-inner-wrapper input {
|
||||
transition: 1s var(--animation-easing-function);
|
||||
transition-property: border-color, box-shadow;
|
||||
}
|
||||
.search-wrapper .search-inner-wrapper:active input,
|
||||
.search-wrapper input:focus {
|
||||
transition: border-color 0.5s var(--animation-easing-function), box-shadow 1s var(--animation-easing-function);
|
||||
}
|
||||
.search-wrapper .search-inner-wrapper:hover input {
|
||||
border-color: var(--newtab-primary-action-background) !important;
|
||||
transition: border-color 0.5s var(--animation-easing-function);
|
||||
}
|
||||
}
|
||||
|
||||
/** Activity Stream - Home Search Bar looks like proton *******************/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue