234 lines
7.4 KiB
SCSS
234 lines
7.4 KiB
SCSS
/*- Background Color -------------------------------------------------------*/
|
|
@import "./animate_common";
|
|
|
|
//-- Mixin ---------------------------------------------------------------------
|
|
@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) {
|
|
@include not_lwtheme {
|
|
.tabbrowser-tab:is([visuallyselected], [multiselected], [selected]) .tab-background {
|
|
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;
|
|
&: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),
|
|
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: margin-inline-start 0.2s var(--animation-easing-function), min-width 0.1s ease-out, max-width 0.1s ease-out !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;
|
|
&: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;
|
|
&:hover {
|
|
transition: background-color 1.25s var(--animation-easing-function) !important;
|
|
}
|
|
}
|
|
|
|
@include Option("userChrome.combined.urlbar_with_reload") {
|
|
#nav-bar-customization-target > #stop-reload-button .toolbarbutton-icon {
|
|
transition: background-color 2.5s var(--animation-easing-function) !important;
|
|
&:hover {
|
|
transition: background-color 1.25s var(--animation-easing-function) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*- Border - Other Fields --------------------------------------------------*/
|
|
#search-box,
|
|
xul|search-textbox.tabsFilter,
|
|
#editBMPanel_namePicker,
|
|
#editBMPanel_tagsField,
|
|
.findbar-container .findbar-textbox {
|
|
transition: border-color 1s var(--animation-easing-function) !important;
|
|
&:hover {
|
|
transition: border-color 0.5s var(--animation-easing-function) !important;
|
|
}
|
|
}
|
|
|
|
/*- Sidebar ----------------------------------------------------------------*/
|
|
@include NotOption("userChrome.decoration.disable_sidebar_animate") {
|
|
#sidebar-box {
|
|
/* like #sidebar-box > #sidebar */
|
|
min-width: 14em;
|
|
width: 18em;
|
|
max-width: 36em;
|
|
|
|
/* Animation */
|
|
transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out,
|
|
visibility 0s linear !important;
|
|
will-change: margin-inline-start, opacity, visibility;
|
|
|
|
&[hidden="true"] {
|
|
@include Box(true);
|
|
margin-inline-start: -18em;
|
|
opacity: 0;
|
|
visibility: collapse;
|
|
transition-delay: 0s, 0s, 0.25s !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*- Titlebar & Full Screen -------------------------------------------------*/
|
|
#titlebar {
|
|
will-change: background-color !important;
|
|
transition: $toolbox-transition-background-color !important;
|
|
|
|
&:-moz-window-inactive {
|
|
transition: background-color 0.5s var(--animation-easing-function) !important;
|
|
}
|
|
}
|
|
#navigator-toolbox {
|
|
/* Full screen out */
|
|
will-change: margin-top, background-color !important;
|
|
transition: $toolbox-transition-margin-top,
|
|
$toolbox-transition-background-color !important;
|
|
transform-origin: top;
|
|
|
|
&:-moz-window-inactive {
|
|
transition: $toolbox-transition-margin-top,
|
|
$toolbox-transition-background-color-inactive !important;
|
|
}
|
|
|
|
&[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: $toolbox-transition-margin-top-fullscreen,
|
|
$toolbox-transition-background-color !important;
|
|
&:-moz-window-inactive {
|
|
transition: $toolbox-transition-margin-top-fullscreen,
|
|
$toolbox-transition-background-color-inactive !important;
|
|
}
|
|
|
|
&:hover {
|
|
// Full screen navbar hover
|
|
// transition-duration: 1.5s; // Not works, because !important
|
|
// transition-delay: 0.5s;
|
|
margin-top: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes fullscreen {
|
|
from {
|
|
margin-top: 0;
|
|
}
|
|
/* Don't use `to`: Depending on density */
|
|
}
|
|
|
|
/*- Expand - Synced Tabs ---------------------------------------------------*/
|
|
@include 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 ----------------------------------------------------*/
|
|
@include 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;
|
|
}
|
|
|
|
&.closed .item-twisty-container {
|
|
transform: rotate(-90deg);
|
|
background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
|
|
|
|
&:dir(rtl) {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*- Arrow - Edit Bookmark Popup --------------------------------------------*/
|
|
#editBookmarkPanelRows .expander-up .button-icon,
|
|
#editBookmarkPanelRows .expander-down .button-icon {
|
|
transition: transform 0.1s var(--animation-easing-function) !important;
|
|
}
|
|
#editBookmarkPanelRows .expander-up {
|
|
list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
|
|
.button-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|