Restyle integration alert bar (#23579)

This commit is contained in:
Paulus Schoutsen 2022-07-30 10:27:08 -07:00 committed by GitHub
parent 342c450d2f
commit 42db5c489a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 77 additions and 40 deletions

View File

@ -41,15 +41,37 @@ $primary-color: #049cdb;
} }
} }
.integration-alert { .integration-alert-container {
margin: -1em 0; margin: -1em 0;
background-color: wheat;
padding: 4px;
a {
text-decoration: none !important;
} }
a.integration-alert {
margin: 1em 0;
background-color: wheat;
padding: 8px;
text-decoration: none !important;
display: flex;
align-items: center;
color: black;
svg {
width: 24px;
margin-right: 8px;
}
.content {
flex: 1;
}
.learn-more {
padding: 4px 6px;
border-radius: 2px;
font-size: .8em;
&:hover {
background-color: rgba(0, 0, 0, .12);
}
}
} }
@media only screen and (max-width: $menu-collapse) { @media only screen and (max-width: $menu-collapse) {
@ -136,6 +158,7 @@ $primary-color: #049cdb;
box-shadow: none; box-shadow: none;
border: 1px solid rgba(0, 0, 0, .12); border: 1px solid rgba(0, 0, 0, .12);
border-radius: 4px; border-radius: 4px;
h4 { h4 {
margin: 0 0 8px !important; margin: 0 0 8px !important;
@ -144,6 +167,7 @@ $primary-color: #049cdb;
color: #000; color: #000;
} }
} }
.links a { .links a {
font-weight: 400; font-weight: 400;
text-transform: none; text-transform: none;
@ -186,6 +210,7 @@ $primary-color: #049cdb;
background-color: lighten(#038fc7, 10%); background-color: lighten(#038fc7, 10%);
} }
} }
.events { .events {
padding: 16px; padding: 16px;
@ -448,8 +473,7 @@ article.listing {
} }
} }
h1 { h1 {}
}
h2 { h2 {
font-size: 1.5em; font-size: 1.5em;
@ -562,10 +586,12 @@ div.note {
li.toc-entry { li.toc-entry {
list-style-type: none; list-style-type: none;
li { li {
list-style-type: circle; list-style-type: circle;
margin-left: 1em; margin-left: 1em;
} }
ul { ul {
margin-left: 1em; margin-left: 1em;
} }
@ -610,7 +636,8 @@ lite-youtube::before {
// https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php // https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
.videoWrapper { .videoWrapper {
position: relative; position: relative;
padding-bottom: 56.25%; /* 16:9 */ padding-bottom: 56.25%;
/* 16:9 */
height: 0; height: 0;
margin-bottom: 25px; margin-bottom: 25px;
background: #000; background: #000;
@ -773,10 +800,8 @@ code {
hyphens: none; hyphens: none;
background-color: #fdfdfd; background-color: #fdfdfd;
background-image: linear-gradient( background-image: linear-gradient(transparent 50%,
transparent 50%, rgba(69, 142, 209, 0.04) 50%);
rgba(69, 142, 209, 0.04) 50%
);
background-size: 3em 3em; background-size: 3em 3em;
background-origin: content-box; background-origin: content-box;
background-attachment: local; background-attachment: local;
@ -812,6 +837,7 @@ code {
} }
} }
} }
footer { footer {
position: absolute; position: absolute;
bottom: 0; bottom: 0;

View File

@ -26,9 +26,14 @@ ha_platforms:
ha_integration_type: integration ha_integration_type: integration
--- ---
<div class="integration-alert" style='margin-bottom: 16px'> <a class="integration-alert" href="/more-info/nest-auth-deprecation">
<a href="/more-info/nest-auth-deprecation">⚠️ Nest authentication is changing. Existing users click here to learn more</a> <svg preserveAspectRatio="xMidYMid meet" focusable="false" role="img" aria-hidden="true" viewBox="0 0 24 24" color="currentColor">
</div> <g><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"></path></g>
</svg>
<div class="content">Existing users: Nest authentication is changing.</div>
<div class="learn-more">LEARN MORE</div>
</a>
The `nest` integration allows you to integrate your [Google Nest](https://store.google.com/us/category/connected_home?) devices in Home Assistant. This integration uses the [Smart Device Management](https://developers.google.com/nest/device-access/api) API and Google's Cloud Pubsub to efficiently listen for changes in device state or other events. See [Supported Devices](https://developers.google.com/nest/device-access/supported-devices) for all devices supported by the SDM API. The `nest` integration allows you to integrate your [Google Nest](https://store.google.com/us/category/connected_home?) devices in Home Assistant. This integration uses the [Smart Device Management](https://developers.google.com/nest/device-access/api) API and Google's Cloud Pubsub to efficiently listen for changes in device state or other events. See [Supported Devices](https://developers.google.com/nest/device-access/supported-devices) for all devices supported by the SDM API.

View File

@ -20,8 +20,14 @@ layout: default
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}
{% if active_alert != "" %} {% if active_alert != "" %}
<div class="integration-alert"> <div class="integration-alert-container">
<a href="{{active_alert}}" target="_blank">⚠️ There is an active alert for this integration!</a> <a class="integration-alert" href="{{active_alert}}" target="_blank">
<svg preserveAspectRatio="xMidYMid meet" focusable="false" role="img" aria-hidden="true" viewBox="0 0 24 24" color="currentColor">
<g><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"></path></g>
</svg>
<div class="content">There is an active alert for this integration!</div>
<div class="learn-more">LEARN MORE</div>
</a>
</div> </div>
{% endif %} {% endif %}
{% endif %} {% endif %}