aboutsummaryrefslogtreecommitdiff
path: root/ext/bg/css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-12-28 23:00:03 -0500
committerGitHub <noreply@github.com>2020-12-28 23:00:03 -0500
commit524c0b2b20c74f3d5d64678144b04157944bcfcd (patch)
treea1a27b427e352ae7dd1b9c39fa002ddf35e74d22 /ext/bg/css
parentcb8015faedda829dde741e9507d39fad3e2c90a6 (diff)
Improve element hiding (#1171)
* Use multi-line definition for transition * Update how PopupElement visibility is controlled
Diffstat (limited to 'ext/bg/css')
-rw-r--r--ext/bg/css/settings2.css42
1 files changed, 25 insertions, 17 deletions
diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css
index 42201174..89359309 100644
--- a/ext/bg/css/settings2.css
+++ b/ext/bg/css/settings2.css
@@ -1447,18 +1447,22 @@ button.icon-button:active {
background-color: var(--dim-background-color);
outline: none;
z-index: 100;
+ opacity: 1;
+ visibility: visible;
+ transition:
+ opacity var(--animation-duration2) ease-out,
+ visibility 0s linear;
+}
+.modal-container[hidden] {
opacity: 0;
visibility: hidden;
- transition: opacity var(--animation-duration2) ease-in, visibility 0s linear var(--animation-duration2);
+ transition:
+ opacity var(--animation-duration2) ease-in,
+ visibility 0s linear var(--animation-duration2);
}
-.modal-container:not(.modal-container-open):not(.modal-container-opening):not(.modal-container-closing) {
+.modal-container[hidden]:not(.hidden-animating) {
display: none;
}
-.modal-container.modal-container-open {
- opacity: 1;
- visibility: visible;
- transition: opacity var(--animation-duration2) ease-out, visibility 0s linear;
-}
.modal-content {
max-width: 100%;
max-height: 100%;
@@ -1467,9 +1471,9 @@ button.icon-button:active {
background-color: var(--background-color-light);
flex: 0 1 auto;
border-radius: 0.5em;
- transform: translate(0, var(--modal-transition-offset));
+ transform: translate(0, 0);
transition:
- transform 0s linear var(--animation-duration2),
+ transform var(--animation-duration2) ease-out,
width var(--animation-duration2) ease-in-out,
height var(--animation-duration2) ease-in-out,
border-radius var(--animation-duration2) ease-in-out;
@@ -1478,7 +1482,7 @@ button.icon-button:active {
flex-flow: column nowrap;
overflow: hidden;
}
-.modal-container:not(.modal-container-open) .modal-content {
+.modal-container[hidden] .modal-content {
pointer-events: none;
}
.modal-content.modal-content-small {
@@ -1493,10 +1497,10 @@ button.icon-button:active {
transform: translate(0, 0);
border-radius: 0;
}
-.modal-container.modal-container-open .modal-content {
- transform: translate(0, 0);
+.modal-container[hidden] .modal-content {
+ transform: translate(0, var(--modal-transition-offset));
transition:
- transform var(--animation-duration2) ease-out,
+ transform 0s linear var(--animation-duration2),
width var(--animation-duration2) ease-in-out,
height var(--animation-duration2) ease-in-out,
border-radius var(--animation-duration2) ease-in-out;
@@ -1756,14 +1760,18 @@ button.popup-menu-item:disabled {
border-radius: var(--settings-group-border-radius) var(--settings-group-border-radius) 0 0;
transform: none;
opacity: 1;
- transition: transform var(--animation-duration) ease-out, opacity var(--animation-duration) ease-out;
+ transition:
+ transform var(--animation-duration) ease-out,
+ opacity var(--animation-duration) ease-out;
}
-.status-footer-container:not(.status-footer-container-open) .status-footer {
+.status-footer-container[hidden] .status-footer {
transform: translate(0, 100%);
opacity: 0;
- transition: transform var(--animation-duration) ease-in, opacity var(--animation-duration) ease-in;
+ transition:
+ transform var(--animation-duration) ease-in,
+ opacity var(--animation-duration) ease-in;
}
-.status-footer-container:not(.status-footer-container-open):not(.status-footer-container-opening):not(.status-footer-container-closing) {
+.status-footer-container[hidden]:not(.hidden-animating) {
display: none;
}
.status-footer-header {