diff --git a/homeassistant/components/frontend/templates/index.html b/homeassistant/components/frontend/templates/index.html
index a13d640a579..4b1aa2033ea 100644
--- a/homeassistant/components/frontend/templates/index.html
+++ b/homeassistant/components/frontend/templates/index.html
@@ -9,6 +9,7 @@
+
{% for panel in panels.values() -%}
{% endfor -%}
@@ -27,32 +28,25 @@
font-weight: 300;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
+ margin: 0;
+ padding: 0;
}
- #ha-init-skeleton {
- display: -webkit-flex;
- display: flex;
- -webkit-flex-direction: column;
- -webkit-justify-content: center;
- -webkit-align-items: center;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- text-align: center;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin-bottom: 83px;
- font-family: Roboto, sans-serif;
- font-size: 0pt;
+ #ha-init-skeleton::before {
+ display: block;
+ content: "";
+ height: 48px;
+ background-color: #03A9F4;
+ }
+
+ #ha-init-skeleton .message {
transition: font-size 2s;
+ font-size: 0;
+ padding: 24px;
}
- #ha-init-skeleton paper-spinner {
- height: 28px;
- margin-top: 16px;
+ #ha-init-skeleton.error .message {
+ font-size: 16px;
}
#ha-init-skeleton a {
@@ -60,15 +54,6 @@
text-decoration: none;
font-weight: bold;
}
-
- #ha-init-skeleton.error {
- font-size: 16px;
- }
-
- #ha-init-skeleton.error img,
- #ha-init-skeleton.error paper-spinner {
- display: none;
- }
#}