From f0f0aefca1d506b750707b28821abbbcf47f5986 Mon Sep 17 00:00:00 2001 From: Madelena Mak Date: Thu, 8 Aug 2024 01:56:51 -0400 Subject: [PATCH] Clean up OHF badge for splash screen (#21593) * Clean up OHF badge for splash screen * Fix demo logo size * Fixed the code to Bram's feedback * Pixel pushing --- demo/src/html/index.html.template | 27 ++++++++---- public/static/images/ohf-badge.svg | 66 ++++++++++++++++++++++++++++++ src/html/index.html.template | 25 +++++++---- 3 files changed, 101 insertions(+), 17 deletions(-) create mode 100644 public/static/images/ohf-badge.svg diff --git a/demo/src/html/index.html.template b/demo/src/html/index.html.template index 5faafef63d..adcae133fb 100644 --- a/demo/src/html/index.html.template +++ b/demo/src/html/index.html.template @@ -63,33 +63,42 @@ align-items: center; } #ha-launch-screen svg { - width: 170px; + width: 112px; flex-shrink: 0; } - #ha-launch-screen .ha-launch-screen-spacer { + #ha-launch-screen .ha-launch-screen-spacer-top { flex: 1; + margin-top: calc( 2 * max(env(safe-area-inset-bottom), 48px) + 46px ); + padding-top: 48px; + } + #ha-launch-screen .ha-launch-screen-spacer-bottom { + flex: 1; + padding-top: 48px; } .ohf-logo { - color: grey; - font-size: 12px; - margin-bottom: 16px; + margin: max(env(safe-area-inset-bottom), 48px) 0; display: flex; flex-direction: column; align-items: center; + opacity: .66; + } + @media (prefers-color-scheme: dark) { + .ohf-logo { + filter: invert(1); + } }
-
+
-
+
diff --git a/public/static/images/ohf-badge.svg b/public/static/images/ohf-badge.svg new file mode 100644 index 0000000000..bbe9a15613 --- /dev/null +++ b/public/static/images/ohf-badge.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/html/index.html.template b/src/html/index.html.template index 5a6316452d..94efb29c09 100644 --- a/src/html/index.html.template +++ b/src/html/index.html.template @@ -42,30 +42,39 @@ width: 112px; flex-shrink: 0; } - #ha-launch-screen .ha-launch-screen-spacer { + #ha-launch-screen .ha-launch-screen-spacer-top { flex: 1; + margin-top: calc( 2 * max(env(safe-area-inset-bottom), 48px) + 46px ); + padding-top: 48px; + } + #ha-launch-screen .ha-launch-screen-spacer-bottom { + flex: 1; + padding-top: 48px; } .ohf-logo { - color: grey; - font-size: 12px; - margin-bottom: 16px; + margin: max(env(safe-area-inset-bottom), 48px) 0; display: flex; flex-direction: column; align-items: center; + opacity: .66; + } + @media (prefers-color-scheme: dark) { + .ohf-logo { + filter: invert(1); + } }
-
+
-
+