GUACAMOLE-598: Ensure fatal error message is hidden by default, shown only when a fatal error has actually occurred.
diff --git a/guacamole/src/main/webapp/app/index/styles/fatal-page-error.css b/guacamole/src/main/webapp/app/index/styles/fatal-page-error.css
index a6e28ba..9a50e9c 100644
--- a/guacamole/src/main/webapp/app/index/styles/fatal-page-error.css
+++ b/guacamole/src/main/webapp/app/index/styles/fatal-page-error.css
@@ -59,3 +59,18 @@
margin: 0 0.25em;
margin-bottom: -0.2em;
}
+
+/* Ensure fatal error is initially hidden, fading the error message in when
+ * needed */
+
+.fatal-page-error-outer {
+ visibility: hidden;
+ opacity: 0;
+ transition: opacity, visibility;
+ transition-duration: 0.25s;
+}
+
+.shown.fatal-page-error-outer {
+ visibility: visible;
+ opacity: 1;
+}
diff --git a/guacamole/src/main/webapp/index.html b/guacamole/src/main/webapp/index.html
index ff920db..1d51606 100644
--- a/guacamole/src/main/webapp/index.html
+++ b/guacamole/src/main/webapp/index.html
@@ -58,7 +58,7 @@
</div>
<!-- Absolute fatal error -->
- <div ng-if="fatalError" class="fatal-page-error-outer">
+ <div ng-if="fatalError" ng-class="{shown: fatalError}" class="fatal-page-error-outer">
<div class="fatal-page-error-middle">
<div class="fatal-page-error">
<h1 translate="APP.DIALOG_HEADER_ERROR"></h1>
