mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2026-01-01 23:10:41 -08:00
Clean: Separated to decoration.scss
This commit is contained in:
alstjr7375
parent
5782d22661
commit
2f37ac0961
2 changed files with 258 additions and 1437 deletions
255
src/theme/_decoration.scss
Normal file
255
src/theme/_decoration.scss
Normal file
|
|
@ -0,0 +1,255 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
||||
/* 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,
|
||||
#appMenu-zoomEnlarge-button2,
|
||||
#appMenu-fullscreen-button2,
|
||||
#panelMenu_showAllBookmarks,
|
||||
#PanelUI-historyMore,
|
||||
#appMenuClearRecentHistory:not([disabled]),
|
||||
#appMenu-library-recentlyClosedTabs > .restoreallitem.panel-subview-footer-button,
|
||||
#appMenu-library-recentlyClosedWindows > .restoreallitem.panel-subview-footer-button,
|
||||
#BMB_viewBookmarksSidebar,
|
||||
#BMB_bookmarksShowAllTop,
|
||||
#BMB_bookmarksShowAll,
|
||||
#import-button,
|
||||
menuitem.openintabs-menuitem,
|
||||
#downloadsListBox .downloadButton,
|
||||
#downloadsListBox .download-state[exists],
|
||||
#downloadsListBox .download-state[exists] .downloadDetails,
|
||||
#downloadsHistory,
|
||||
#protections-popup-settings-button,
|
||||
#protections-popup-show-report-button,
|
||||
#identity-popup-clear-sitedata-button,
|
||||
#identity-popup-more-info {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
/* TODO: For now, fxa-menu doesn't show any status.
|
||||
(JS required, observe .syncNowBtn status)
|
||||
#PanelUI-fxa-menu-syncnow-button[syncstatus="active"] {
|
||||
cursor: progress !important;
|
||||
}
|
||||
*/
|
||||
|
||||
/*= Animate ==================================================================*/
|
||||
@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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
@include OS($linux) {
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected], [selected]) .tab-background:not(:-moz-lwtheme) {
|
||||
transition: background-image 0.25s var(--animation-easing-function) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.subviewbutton {
|
||||
/* treechildren::-moz-tree-row: Can't apply
|
||||
menu, menuitem is not apply.
|
||||
*/
|
||||
transition: background-color 0.5s var(--animation-easing-function) !important;
|
||||
}
|
||||
.subviewbutton:hover {
|
||||
transition: background-color 0.1s var(--animation-easing-function) !important;
|
||||
}
|
||||
|
||||
/*- Pinned Tab -------------------------------------------------------------*/
|
||||
#tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:not([collapsed]) {
|
||||
/* -moz-box-flex may be caused #tabbrowser-tabs[closebuttons] */
|
||||
transition: -moz-box-flex 0.2s var(--animation-easing-function),
|
||||
margin-inline-start 0.2s var(--animation-easing-function), min-width 0.1s ease-out, max-width 0.1s ease-out !important;
|
||||
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%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
#editBookmarkPanelRows .expander-up {
|
||||
list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
|
||||
}
|
||||
#editBookmarkPanelRows .expander-up .button-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
1440
src/userChrome.scss
1440
src/userChrome.scss
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue