From 9c6ff387a0836a78b7a755cfc99828e09d6a6cf8 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Fri, 6 Nov 2020 22:14:00 -0500 Subject: 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 --- ext/bg/css/popup-preview.css | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) (limited to 'ext/bg/css') 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 . */ +: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 { -- cgit v1.2.3