Add alert banner (#16199)

This commit is contained in:
Bram Kragten 2021-01-16 21:49:17 +01:00 committed by GitHub
parent b7f926c7c0
commit 142813b6c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 47 additions and 3 deletions

View File

@ -29,7 +29,7 @@ html {
height: calc(100% - 68px);;
margin-top: 68px;
overflow-y: scroll;
padding-top: 32px;
padding-top: 82px;
width: 100%;
}
@ -43,6 +43,10 @@ html {
}
}
.alert-banner {
height: 50px;
}
.site-header {
position: fixed;
width: 100%;

View File

@ -69,7 +69,7 @@ header .grid {
.menu {
margin: 0;
top: 68px;
top: 138px;
}
.menu li a{
@ -116,9 +116,17 @@ header .grid {
padding: 15px 15px 15px 25px;
}
.alert-banner {
height: 70px !important;
}
.page-content {
padding-top: 102px;
}
.toggle {
position: absolute;
top: 15px;
top: 85px;
right: 10px;
}

View File

@ -2,6 +2,38 @@
<body {% if page.body_id %} id="{{ page.body_id }}"{% endif %}>
<header class='site-header'>
<div class="alert-banner" style="background: #FF9800;color: white;text-align: center;display: flex;justify-content: space-around;">
<div style="
display: flex;
align-items: center;
padding: 0 8px;
">
Make sure you run at least Home Assistant Core 2021.1.3
<a href="/blog/2021/01/14/security-bulletin/" style="
background: white;
padding: 6px;
color: #FF9800;
margin-left: 8px;
font-size: .8em;
font-weight: 400;
border-radius: 4px;
letter-spacing: 0.05em;
display: flex;
align-items: center;
">
MORE INFO
<svg viewBox="0 0 24 24" style="
height: 20px;
fill: currentcolor;
flex-shrink: 0;
">
<path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path>
</svg>
</a>
</div>
</div>
{% include site/header.html %}
</header>
<div class="page-content">