preview <webview> now fades in and out seamlessly

Instead of instantly flashing when it's done loading and so on, it now
fades in, instead, without any problems.

1 files changed, 7 insertions, 0 deletions

diff --git a/src/app/main.css b/src/app/main.css
index 903c03e..3229f6c 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -92,10 +92,17 @@ button {
 .popup webview {
 	width: 78%;
 	margin: 0 auto;
+	filter: opacity(1.0);
+	transition: filter 0.15s ease-in-out;
 	margin-top: calc(var(--spacing) / 2);
 	height: calc(100% - calc(var(--spacing) / 2));
 }
 
+.popup webview.loading {
+	filter: opacity(0.0);
+	pointer-events: none;
+}
+
 .popup .el, .popup .misc, .popup .loading {
 	--spacing: calc(var(--padding) / 2);
 	--height: calc(var(--padding) * 3.5);