diff options
| author | toasted-nutbread <toasted-nutbread@users.noreply.github.com> | 2020-11-06 22:14:00 -0500 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-11-06 22:14:00 -0500 |
| commit | 9c6ff387a0836a78b7a755cfc99828e09d6a6cf8 (patch) | |
| tree | 5218136c06d9c01a25281934369e6f7d4386dfd8 /ext/bg/css | |
| parent | b62c48822eeea948c0d78c5730f20793838d59da (diff) | |
Popup preview update (#994)
* Add options.global.showPopupPreview option
* Add preview visibility control using a checkbox
* Add attribute on page load
* Disable animation until page is loaded
Diffstat (limited to 'ext/bg/css')
| -rw-r--r-- | ext/bg/css/popup-preview.css | 15 |
1 files changed, 11 insertions, 4 deletions
diff --git a/ext/bg/css/popup-preview.css b/ext/bg/css/popup-preview.css index 3828d236..6f520db6 100644 --- a/ext/bg/css/popup-preview.css +++ b/ext/bg/css/popup-preview.css @@ -15,8 +15,15 @@ * along with this program. If not, see <https://www.gnu.org/licenses/>. */ +:root { + --animation-duration: 0s; +} +:root[data-loaded=true] { + --animation-duration: 0.25s; +} + html { - transition: background-color 0.25s linear 0s, color 0.25s linear 0s; + transition: background-color var(--animation-duration) linear 0s, color var(--animation-duration) linear 0s; background-color: rgba(255, 255, 255, 0); color: #333333; } @@ -81,7 +88,7 @@ body { color: inherit; background-color: transparent; white-space: pre; - transition: background-color 0.25s linear 0s, border-color 0.25s linear 0s; + transition: background-color var(--animation-duration) linear 0s, border-color var(--animation-duration) linear 0s; } .example-text:hover, .example-text-input { @@ -114,12 +121,12 @@ body { flex: 0 1 auto; visibility: hidden; opacity: 0; - transition: opacity 0.5s linear 0s, visibility 0s linear 0.5s; + transition: opacity var(--animation-duration) linear 0s, visibility 0s linear var(--animation-duration); } .placeholder-info.placeholder-info-visible { visibility: visible; opacity: 1; - transition: opacity 0.5s linear 0s, visibility 0s linear 0s; + transition: opacity var(--animation-duration) linear 0s, visibility 0s linear 0s; } .theme-button { |